/* GestionOptimaley · hoja de estilos
   Identidad visual tomada de la herramienta "Diagnóstico Normativo" de Optimaley:
   rojo corporativo #C63527, antracita #262626, tipografía Quicksand. */

/* ---------- Tipografía (local: sin llamadas a Google Fonts) ---------- */
@font-face {
  font-family: "Quicksand";
  font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("fuentes/quicksand-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Quicksand";
  font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("fuentes/quicksand-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Colores ---------- */
:root {
  --tinta: #262626; --tinta-suave: #6B6B6B; --tinta-tenue: #9A9A9A;
  --fondo: #FAFAFA; --superficie: #FFFFFF; --superficie-2: #F2F2F2; --superficie-3: #EAEAEA;
  --acento: #C63527; --acento-hover: #AE2C20; --acento-tinta: #FFFFFF; --acento-suave: #F7E4E2;
  --borde: #E3E3E3; --borde-suave: #EDEDED;
  --exito: #2E7D4F; --exito-suave: #E3F1E8;
  --aviso: #B45309; --aviso-suave: #FBEEDC;
  --peligro: #A31B0F; --peligro-suave: #F7E0DD;
  --info: #2F6690; --info-suave: #E2ECF4;
  --lateral-fondo: #262626; --lateral-tinta: #D9D9D9; --lateral-tenue: #8C8C8C;
  --lateral-hover: #333333; --lateral-activo: #3A2523;
  --sombra: 0 1px 2px rgba(20,20,20,.05), 0 8px 24px -12px rgba(20,20,20,.16);
  --sombra-flotante: 0 12px 32px -8px rgba(20,20,20,.28);
  /* Agenda */
  --ev-senalamiento: #262626; --ev-cita: #2F6690; --ev-reunion: #3A7D5C; --ev-otro: #8A8A8A;
  --ev-plazo: #D97706; --ev-plazo-vencido: #C63527; --ev-tarea: #8C6D46; --ev-hecho: #BDBDBD;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tinta: #F2F1EF; --tinta-suave: #B3B3B3; --tinta-tenue: #858585;
    --fondo: #141414; --superficie: #1E1E1E; --superficie-2: #262626; --superficie-3: #303030;
    --acento: #F24E3E; --acento-hover: #FF6656; --acento-tinta: #1A1A1A; --acento-suave: #3D1A16;
    --borde: #333333; --borde-suave: #2A2A2A;
    --exito: #6FCF97; --exito-suave: #18301F; --aviso: #F0B060; --aviso-suave: #3A2A12;
    --peligro: #E2887A; --peligro-suave: #3A2420; --info: #8EC0E8; --info-suave: #16293A;
    --lateral-fondo: #0F0F0F; --lateral-tinta: #D9D9D9; --lateral-tenue: #7A7A7A;
    --lateral-hover: #1F1F1F; --lateral-activo: #3D1A16;
    --sombra: 0 1px 2px rgba(0,0,0,.3), 0 12px 28px -14px rgba(0,0,0,.6);
    --sombra-flotante: 0 16px 40px -10px rgba(0,0,0,.7);
    --ev-senalamiento: #D8D5D0; --ev-cita: #5B9BD5; --ev-reunion: #5FAE85; --ev-otro: #8A8A8A;
    --ev-plazo: #E89A3C; --ev-plazo-vencido: #F24E3E; --ev-tarea: #B08D60; --ev-hecho: #5A5A5A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --tinta: #F2F1EF; --tinta-suave: #B3B3B3; --tinta-tenue: #858585;
  --fondo: #141414; --superficie: #1E1E1E; --superficie-2: #262626; --superficie-3: #303030;
  --acento: #F24E3E; --acento-hover: #FF6656; --acento-tinta: #1A1A1A; --acento-suave: #3D1A16;
  --borde: #333333; --borde-suave: #2A2A2A;
  --exito: #6FCF97; --exito-suave: #18301F; --aviso: #F0B060; --aviso-suave: #3A2A12;
  --peligro: #E2887A; --peligro-suave: #3A2420; --info: #8EC0E8; --info-suave: #16293A;
  --lateral-fondo: #0F0F0F; --lateral-tinta: #D9D9D9; --lateral-tenue: #7A7A7A;
  --lateral-hover: #1F1F1F; --lateral-activo: #3D1A16;
  --sombra: 0 1px 2px rgba(0,0,0,.3), 0 12px 28px -14px rgba(0,0,0,.6);
  --sombra-flotante: 0 16px 40px -10px rgba(0,0,0,.7);
  --ev-senalamiento: #D8D5D0; --ev-cita: #5B9BD5; --ev-reunion: #5FAE85; --ev-otro: #8A8A8A;
  --ev-plazo: #E89A3C; --ev-plazo-vencido: #F24E3E; --ev-tarea: #B08D60; --ev-hecho: #5A5A5A;
  color-scheme: dark;
}

/* ---------- Medidas ---------- */
:root {
  --radio: 14px; --radio-pequeno: 10px; --radio-boton: 10px;
  --ancho-lateral: 256px; --alto-barra: 64px;
  --fuente: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font-family: var(--fuente); font-size: 15px; line-height: 1.5; font-weight: 500;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.25; text-wrap: balance; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.12rem; }
h3 { font-size: 1rem; }
p { margin: 0; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
small { font-size: .82rem; }
img { max-width: 100%; }
::selection { background: var(--acento-suave); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.icono { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.icono-pequeno { width: 15px; height: 15px; }
.icono-grande { width: 22px; height: 22px; }
.texto-suave { color: var(--tinta-suave); }
.numero { font-variant-numeric: tabular-nums; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Estructura ---------- */
.app { display: grid; grid-template-columns: var(--ancho-lateral) minmax(0, 1fr); min-height: 100vh; }
.principal { min-width: 0; display: flex; flex-direction: column; }
.contenido { width: 100%; max-width: 1280px; margin: 0 auto; padding: 28px 32px 64px; flex: 1; }

/* ---------- Menú lateral ---------- */
.lateral {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 40;
  background: var(--lateral-fondo); color: var(--lateral-tinta);
  display: flex; flex-direction: column; padding: 18px 12px 12px;
  scrollbar-width: thin; scrollbar-color: #444 transparent;
}
.marca { display: flex; align-items: center; gap: 11px; padding: 4px 10px 18px; color: #fff; text-decoration: none; }
.marca:hover { text-decoration: none; }
.marca img { width: 36px; height: 36px; border-radius: 999px; flex: none; }
/* Logotipo completo en blanco (los fondos de la marca son oscuros en los dos temas). */
.marca img.marca-logo { width: auto; height: 34px; max-width: 100%; border-radius: 0; }
.lateral .marca { flex-direction: column; align-items: flex-start; gap: 6px; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca-nombre { font-weight: 700; font-size: 1.02rem; letter-spacing: .01em; }
.marca-sub { font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--lateral-tenue); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav + .nav-seccion, .nav-seccion + .nav-seccion { margin-top: 14px; }
.nav-titulo {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 6px 10px; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--lateral-tenue); list-style: none; cursor: default;
}
details.nav-seccion > summary { cursor: pointer; border-radius: 8px; }
details.nav-seccion > summary::-webkit-details-marker { display: none; }
details.nav-seccion > summary:hover { color: var(--lateral-tinta); }
details.nav-seccion > summary .icono { transition: transform .15s; }
details.nav-seccion[open] > summary .icono { transform: rotate(180deg); }
.nav-enlace {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px;
  color: var(--lateral-tinta); font-weight: 600; font-size: .92rem; text-decoration: none; position: relative;
}
.nav-enlace:hover { background: var(--lateral-hover); color: #fff; text-decoration: none; }
.nav-enlace .icono { color: var(--lateral-tenue); }
.nav-enlace:hover .icono { color: #fff; }
.nav-enlace.activo { background: var(--lateral-activo); color: #fff; }
.nav-enlace.activo .icono { color: #F24E3E; }
.nav-enlace.activo::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #F24E3E; }
.lateral-pie { margin-top: auto; padding-top: 16px; border-top: 1px solid #3a3a3a; }
.usuario { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.avatar {
  width: 34px; height: 34px; border-radius: 999px; flex: none; display: grid; place-items: center;
  background: var(--acento); color: #fff; font-weight: 700; font-size: .82rem; letter-spacing: .02em;
}
.usuario-datos { min-width: 0; line-height: 1.25; display: flex; flex-direction: column; }
.usuario-nombre { font-weight: 700; font-size: .9rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario-rol { font-size: .74rem; color: var(--lateral-tenue); }
.lateral-pie form { margin: 0; }
.lateral-pie button.nav-enlace { width: 100%; border: 0; background: none; font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; text-align: left; }

/* ---------- Barra superior ---------- */
.barra {
  position: sticky; top: 0; z-index: 30; height: var(--alto-barra);
  display: flex; align-items: center; gap: 14px; padding: 0 32px;
  background: color-mix(in srgb, var(--fondo) 88%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde-suave);
}
.barra .boton-menu, .barra .barra-marca { display: none; }
.buscador-global { flex: 1; max-width: 520px; position: relative; margin: 0; }
.buscador-global .icono { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--tinta-tenue); pointer-events: none; }
.buscador-global input { width: 100%; height: 40px; padding: 0 14px 0 40px; border-radius: 999px; background: var(--superficie); }
.barra-acciones { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: var(--radio-boton); border: 1px solid transparent;
  background: var(--acento); color: var(--acento-tinta);
  font: inherit; font-weight: 700; font-size: .9rem; line-height: 1; white-space: nowrap;
  cursor: pointer; text-decoration: none; transition: background-color .12s, border-color .12s, box-shadow .12s;
}
.boton:hover { background: var(--acento-hover); text-decoration: none; }
.boton:active { transform: translateY(1px); }
.boton:disabled, .boton[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.boton-secundario { background: var(--superficie); color: var(--tinta); border-color: var(--borde); }
.boton-secundario:hover { background: var(--superficie-2); }
.boton-fantasma { background: transparent; color: var(--tinta-suave); }
.boton-fantasma:hover { background: var(--superficie-2); color: var(--tinta); }
.boton-peligro { background: var(--superficie); color: var(--peligro); border-color: var(--borde); }
.boton-peligro:hover { background: var(--peligro-suave); border-color: var(--peligro); }
.boton-pequeno { height: 32px; padding: 0 11px; font-size: .82rem; gap: 6px; }
.boton-icono { width: 40px; padding: 0; }
.boton-icono.boton-pequeno { width: 32px; }
.boton-hecho { height: 30px; padding: 0 10px; font-size: .8rem; border-radius: 999px; background: var(--superficie); color: var(--tinta-suave); border-color: var(--borde); }
.boton-hecho:hover { border-color: var(--exito); color: var(--exito); background: var(--exito-suave); }
.boton-hecho.hecho { background: var(--exito-suave); color: var(--exito); border-color: transparent; }

/* ---------- Menús desplegables (details) ---------- */
.desplegable { position: relative; }
.desplegable > summary { list-style: none; }
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 210px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px;
  box-shadow: var(--sombra-flotante); padding: 6px; margin: 0; list-style: none;
}
.desplegable-menu a, .desplegable-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border-radius: 8px;
  color: var(--tinta); font: inherit; font-weight: 600; font-size: .9rem; text-decoration: none;
  background: none; border: 0; cursor: pointer; text-align: left;
}
.desplegable-menu a:hover, .desplegable-menu button:hover { background: var(--superficie-2); text-decoration: none; }
.desplegable-menu .icono { color: var(--tinta-suave); }
.desplegable-titulo { padding: 8px 11px 4px; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-tenue); font-weight: 700; }

/* ---------- Cabecera de página ---------- */
.miga { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .84rem; color: var(--tinta-suave); margin-bottom: 10px; }
.miga a { color: var(--tinta-suave); }
.miga a:hover { color: var(--acento); }
.miga .icono { width: 14px; height: 14px; color: var(--tinta-tenue); }
.cabecera-pagina { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.titulo-pagina { display: flex; align-items: center; gap: 14px; min-width: 0; }
.chip-icono {
  width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: var(--acento-suave); color: var(--acento);
}
.chip-icono .icono { width: 22px; height: 22px; }
.titulo-pagina h1 { overflow-wrap: anywhere; }
.subtitulo { color: var(--tinta-suave); font-size: .9rem; margin-top: 3px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.subtitulo .dato { display: inline-flex; align-items: center; gap: 6px; }
.subtitulo .icono { width: 15px; height: 15px; color: var(--tinta-tenue); }
.codigo { color: var(--tinta-suave); font-weight: 600; margin-right: 4px; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
.acciones select { width: auto; min-width: 200px; }

/* ---------- Tarjetas ---------- */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde-suave); border-radius: var(--radio); box-shadow: var(--sombra); }
.tarjeta + .tarjeta { margin-top: 18px; }
/* Dentro de cuadrículas la separación la pone el gap. */
.estadisticas > .tarjeta, .paneles > .tarjeta, .contactos > .tarjeta { margin-top: 0; }
.tarjeta-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--borde-suave); }
.tarjeta-cabecera h2 { display: flex; align-items: center; gap: 9px; }
.tarjeta-cabecera h2 .icono { color: var(--acento); }
.tarjeta-cuerpo { padding: 18px 20px; }
.contador { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--superficie-2); color: var(--tinta-suave); font-size: .75rem; font-weight: 700; }
.contador-peligro { background: var(--peligro-suave); color: var(--peligro); }
.contador-aviso { background: var(--aviso-suave); color: var(--aviso); }

/* ---------- Avatares ---------- */
.avatar { object-fit: cover; }
.avatar-mediano { width: 40px; height: 40px; font-size: .86rem; }
.avatar-grande { width: 64px; height: 64px; font-size: 1.3rem; }
.avatar-xl { width: 112px; height: 112px; font-size: 2rem; }
.avatar-color-0 { background: #C63527; } .avatar-color-1 { background: #2F6690; } .avatar-color-2 { background: #3A7D5C; }
.avatar-color-3 { background: #8C6D46; } .avatar-color-4 { background: #6B4C9A; } .avatar-color-5 { background: #4A4A4A; }
a.usuario { border-radius: 10px; color: inherit; text-decoration: none; }
a.usuario:hover, a.usuario.activo { background: var(--lateral-hover); text-decoration: none; }
a.usuario > .icono { margin-left: auto; color: var(--lateral-tenue); }
.perfil-foto { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.texto-peligro { color: var(--peligro); }
.texto-acento { color: var(--acento); }

/* ---------- Inicio ---------- */
.inicio { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.inicio-principal { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.inicio-principal > * { margin: 0 !important; }
.inicio-lateral {
  position: sticky; top: calc(var(--alto-barra) + 16px);
  display: flex; flex-direction: column; gap: 16px; padding: 16px; border-radius: 20px;
  background: color-mix(in srgb, var(--acento) 7%, var(--fondo));
  border: 1px solid color-mix(in srgb, var(--acento) 12%, transparent);
}
.inicio-lateral .tarjeta { margin: 0; box-shadow: none; }
.bienvenida {
  display: flex; align-items: center; gap: 18px; padding: 22px 24px; flex-wrap: wrap;
  background: linear-gradient(120deg, var(--superficie) 55%, color-mix(in srgb, var(--acento) 10%, var(--superficie)));
}
.bienvenida-foto { position: relative; flex: none; border-radius: 999px; }
.bienvenida-foto:hover { text-decoration: none; }
.bienvenida-foto .avatar { box-shadow: 0 0 0 4px var(--superficie), 0 0 0 5px var(--borde); }
.bienvenida-camara {
  position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 999px;
  display: grid; place-items: center; background: var(--superficie); color: var(--tinta-suave); border: 1px solid var(--borde);
}
.bienvenida-texto { min-width: 260px; flex: 1 1 260px; }
/* En el inicio las cifras van en vertical (icono, número, texto) para que quepan cinco por fila. */
.inicio .estadisticas { grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); gap: 12px; }
.inicio .estadistica { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; }
.inicio .estadistica .chip-icono { width: 38px; height: 38px; border-radius: 11px; }
.bienvenida-texto h1 { font-size: 1.55rem; }
.bienvenida-acciones { margin-left: auto; }
.fecha-chip {
  flex: none; width: 46px; display: flex; flex-direction: column; align-items: center; line-height: 1.05;
  padding: 6px 0; border-radius: 10px; background: var(--aviso-suave); color: var(--aviso);
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
}
.fecha-chip strong { font-size: 1.05rem; }
.fecha-chip.vencida { background: var(--peligro-suave); color: var(--peligro); }

/* Mini calendario */
.mini-cal { padding: 14px 14px 10px; }
.mini-cal-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mini-cal-cabecera h2 { font-size: 1rem; color: var(--acento); }
.mini-cal table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mini-cal th { font-size: .7rem; font-weight: 700; color: var(--tinta-tenue); padding: 4px 0 6px; }
.mini-cal td { padding: 1px; text-align: center; }
.mini-dia {
  position: relative; display: grid; place-items: center; height: 36px; border-radius: 10px;
  color: var(--tinta); font-weight: 600; font-size: .86rem; text-decoration: none; font-variant-numeric: tabular-nums;
}
.mini-dia:hover { background: var(--superficie-2); text-decoration: none; }
.mini-dia.fuera { color: var(--tinta-tenue); opacity: .55; }
.mini-dia.hoy { background: var(--acento); color: var(--acento-tinta); }
.mini-marcas { position: absolute; bottom: 4px; left: 0; right: 0; display: flex; justify-content: center; gap: 2px; }
.mini-marcas i { width: 4px; height: 4px; border-radius: 999px; background: var(--ev); }
.mini-dia.hoy .mini-marcas i { background: var(--acento-tinta); }
.mini-cal-hoy { display: block; text-align: center; font-size: .8rem; font-weight: 700; margin-top: 6px; }
.ev-evento { --ev: var(--ev-cita); }

/* Línea de tiempo de hoy */
.linea-tiempo { list-style: none; margin: 0; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.linea-tiempo li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: start; }
.linea-hora { font-size: .8rem; font-weight: 700; color: var(--tinta-suave); padding-top: 9px; display: flex; flex-direction: column; line-height: 1.2; font-variant-numeric: tabular-nums; }
.linea-hora small { font-weight: 600; color: var(--tinta-tenue); font-size: .72rem; }
.linea-tarjeta {
  display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 12px; text-decoration: none;
  color: var(--tinta); border-left: 4px solid var(--ev);
  background: color-mix(in srgb, var(--ev) 12%, var(--superficie));
}
.linea-tarjeta:hover { text-decoration: none; background: color-mix(in srgb, var(--ev) 20%, var(--superficie)); }
.linea-tarjeta strong { font-size: .9rem; line-height: 1.3; }
.linea-tipo { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); }
.linea-tarjeta .meta { font-size: .78rem; color: var(--tinta-suave); }

/* Tareas de la columna lateral */
.tareas-lateral { list-style: none; margin: 0; padding: 6px 0; }
.tareas-lateral li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 16px; }
.tareas-lateral li + li { border-top: 1px solid var(--borde-suave); }
.tareas-lateral form { margin: 0; }
.tareas-lateral .detalle { min-width: 0; display: flex; flex-direction: column; }
.tareas-lateral .detalle a { color: var(--tinta); font-weight: 600; font-size: .9rem; }
.tareas-lateral .detalle a:hover { color: var(--acento); }
.tareas-lateral .meta { font-size: .76rem; color: var(--tinta-suave); }
.tareas-lateral li.vencida .meta { color: var(--peligro); }
.casilla-tarea {
  width: 22px; height: 22px; margin-top: 1px; flex: none; border-radius: 7px; border: 2px solid var(--borde);
  background: var(--superficie); color: transparent; display: grid; place-items: center; cursor: pointer; padding: 0;
}
.casilla-tarea:hover { border-color: var(--exito); color: var(--exito); background: var(--exito-suave); }
.casilla-tarea:disabled { cursor: default; }

/* Equipo */
.equipo { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
/* Cada persona en una línea: foto y nombre (enlace a lo suyo) · chatear, tarea, correo · anillo de «al día». */
.equipo-item { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 12px; }
.equipo-item:hover { background: var(--superficie-2); }
.equipo-item.soy-yo { background: color-mix(in srgb, var(--acento) 7%, var(--superficie)); }
.equipo-fila { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: var(--tinta); text-decoration: none; }
.equipo-fila:hover { text-decoration: none; }
.equipo-fila:hover .equipo-nombre { color: var(--acento); }
.equipo-nombre, .equipo .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Chatear, asignar una tarea y escribir un correo, junto a cada persona. */
.equipo-acciones { display: flex; align-items: center; gap: 0; flex: none; }
.equipo-fila .avatar { width: 36px; height: 36px; font-size: .8rem; }
.equipo-item > .anillo { width: 40px; height: 40px; }
.equipo-item > .anillo span { font-size: .64rem; }
.equipo-acciones form { display: contents; }
.equipo-accion { display: grid; place-items: center; width: 27px; height: 27px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--tinta-suave); cursor: pointer; transition: background-color .12s, color .12s; }
.equipo-accion:hover, .equipo-accion:focus-visible { background: var(--superficie-3); color: var(--acento); text-decoration: none; }
.equipo-hueco { pointer-events: none; }  /* mantiene los botones en columna aunque falte alguno */
.equipo-whatsapp:hover, .equipo-whatsapp:focus-visible { color: #1DA851; }
.equipo-item > .anillo { margin-left: 4px; color: var(--tinta); text-decoration: none; }
.equipo-datos { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.equipo-nombre { font-weight: 700; font-size: .92rem; }
.equipo .meta { font-size: .78rem; color: var(--tinta-suave); }
.anillo { position: relative; width: 46px; height: 46px; flex: none; display: grid; place-items: center; }
.anillo svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 3.2; }
.anillo-fondo { stroke: var(--superficie-3); }
.anillo-valor { stroke: var(--exito); stroke-linecap: round; }
.anillo-aviso .anillo-valor { stroke: var(--aviso); }
.anillo-peligro .anillo-valor { stroke: var(--peligro); }
.anillo span { font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* (sigue) Inicio: estadísticas y paneles */
.saludo { margin-bottom: 22px; }
.saludo h1 { font-size: 1.75rem; }
.estadisticas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; }
.estadistica { display: flex; align-items: center; gap: 14px; padding: 16px 18px; color: var(--tinta); text-decoration: none; transition: transform .12s, box-shadow .12s, border-color .12s; }
.estadistica:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--borde); }
.estadistica .chip-icono { width: 42px; height: 42px; background: var(--superficie-2); color: var(--tinta-suave); }
.estadistica-valor { font-size: 1.6rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.estadistica-etiqueta { font-size: .84rem; color: var(--tinta-suave); line-height: 1.25; }
.estadistica.es-peligro .chip-icono { background: var(--peligro-suave); color: var(--peligro); }
.estadistica.es-peligro .estadistica-valor { color: var(--peligro); }
.estadistica.es-aviso .chip-icono { background: var(--aviso-suave); color: var(--aviso); }
.estadistica.es-aviso .estadistica-valor { color: var(--aviso); }
.paneles { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.lista-simple { list-style: none; margin: 0; padding: 6px 0; }
.lista-simple li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 20px; }
.lista-simple li + li { border-top: 1px solid var(--borde-suave); }
.lista-simple .hora { flex: none; min-width: 58px; font-weight: 700; font-size: .86rem; font-variant-numeric: tabular-nums; }
.lista-simple .detalle { min-width: 0; }
.lista-simple .detalle a { color: var(--tinta); font-weight: 600; }
.lista-simple .detalle a:hover { color: var(--acento); }
.lista-simple .meta { font-size: .8rem; color: var(--tinta-suave); }
.marca-color { width: 4px; align-self: stretch; border-radius: 4px; flex: none; background: var(--borde); }

/* ---------- Tablas ---------- */
.tabla-contenedor { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th {
  text-align: left; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-suave); padding: 12px 16px; border-bottom: 1px solid var(--borde); background: var(--superficie); white-space: nowrap;
}
.tabla td { padding: 12px 16px; border-bottom: 1px solid var(--borde-suave); vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr { transition: background-color .1s; }
.tabla tbody tr:hover { background: var(--superficie-2); }
.tabla tr[data-href] { cursor: pointer; }
.tabla td.principal-celda a { color: var(--tinta); font-weight: 700; }
.tabla td.principal-celda a:hover { color: var(--acento); }
.tabla td.accion-celda { width: 1%; white-space: nowrap; text-align: right; }
.tabla td.accion-celda .acciones { flex-wrap: nowrap; }
/* Botón de tema: luna en claro, sol en oscuro. */
.icono-sol { display: none; }
:root[data-theme="dark"] .icono-sol { display: inline; }
:root[data-theme="dark"] .icono-luna { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icono-sol { display: inline; }
  :root:not([data-theme="light"]) .icono-luna { display: none; }
}
.tabla tr.vencida td { color: var(--peligro); }
.tabla tr.vencida td.principal-celda a { color: var(--peligro); }
.tabla tr.pasado td { color: var(--tinta-tenue); }
.tabla input, .tabla select { min-width: 140px; }

/* ---------- Insignias de estado ---------- */
.insignia {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; white-space: nowrap; background: var(--superficie-2); color: var(--tinta-suave);
}
.insignia::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.insignia-abierto, .insignia-si, .insignia-convertido-en-cliente { background: var(--exito-suave); color: var(--exito); }
.insignia-pendiente { background: var(--aviso-suave); color: var(--aviso); }
.insignia-cerrado, .insignia-archivado, .insignia-descartado, .insignia-no { background: var(--superficie-2); color: var(--tinta-suave); }
.insignia-senalamiento { background: var(--superficie-3); color: var(--tinta); }
.insignia-cita-con-cliente, .insignia-notificacion-resolucion { background: var(--info-suave); color: var(--info); }
.insignia-reunion, .insignia-contrato-poder { background: var(--exito-suave); color: var(--exito); }
.insignia-escrito { background: var(--acento-suave); color: var(--acento); }
.insignia-documentacion-del-cliente, .insignia-correo { background: var(--aviso-suave); color: var(--aviso); }
.insignia-vencido { background: var(--peligro-suave); color: var(--peligro); }

/* ---------- Filtros y paginación ---------- */
.barra-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 12px; margin-bottom: 16px; }
.barra-filtros .campo-busqueda { position: relative; flex: 2 1 240px; }
.barra-filtros .campo-busqueda .icono { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--tinta-tenue); pointer-events: none; }
.barra-filtros .campo-busqueda input { padding-left: 38px; }
.barra-filtros select { flex: 1 1 160px; width: auto; }
.paginacion { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; color: var(--tinta-suave); font-size: .86rem; }
.paginacion .acciones { gap: 6px; }

/* ---------- Formularios ---------- */
/* :where() deja la especificidad en 0 para que cualquier regla de componente pueda ajustar los campos. */
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea) {
  width: 100%; height: 42px; padding: 0 12px; font: inherit; font-weight: 500; font-size: .93rem; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-pequeno);
  transition: border-color .12s, box-shadow .12s;
}
:where(textarea) { height: auto; min-height: 110px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
:where(select) {
  appearance: none; padding-right: 36px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta-suave) 50%), linear-gradient(135deg, var(--tinta-suave) 50%, transparent 50%);
  background-position: calc(100% - 19px) 52%, calc(100% - 14px) 52%; background-size: 5px 5px; background-repeat: no-repeat;
}
:where(select[multiple]) { height: auto; background-image: none; padding: 6px; }
:where(input, select, textarea):hover { border-color: var(--tinta-tenue); }
:where(input, select, textarea):focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: var(--acento); margin: 0; flex: none; cursor: pointer; }
input[type=file] { font: inherit; font-size: .88rem; color: var(--tinta-suave); width: 100%; }
input[type=file]::file-selector-button {
  font: inherit; font-weight: 700; font-size: .85rem; margin-right: 12px; height: 38px; padding: 0 14px; cursor: pointer;
  border-radius: var(--radio-boton); border: 1px solid var(--borde); background: var(--superficie-2); color: var(--tinta);
}
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset:disabled input, fieldset:disabled select, fieldset:disabled textarea { background: var(--superficie-2); color: var(--tinta-suave); cursor: default; }
.bloque { padding: 20px; }
.bloque + .bloque { margin-top: 16px; }
.bloque-titulo { font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-suave); font-weight: 700; margin-bottom: 14px; }
.bloque-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.bloque-cabecera .bloque-titulo { margin: 0; }

/* Disponibilidad semanal (Mi perfil): una fila por día con mañana y tarde. */
.disponibilidad { display: grid; gap: 8px; margin: 14px 0 8px; }
.disp-fila { display: grid; grid-template-columns: 110px repeat(4, minmax(0, 1fr)); gap: 8px; align-items: center; }
.disp-fila input { width: 100%; }
.disp-cabecera { font-size: .74rem; font-weight: 700; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .05em; }
.disp-error { grid-column: 2 / -1; }
.disp-fila.con-error input { border-color: var(--acento); }
@media (max-width: 720px) {
  .disp-cabecera { display: none; }
  .disp-fila { grid-template-columns: 1fr 1fr; padding-bottom: 10px; border-bottom: 1px solid var(--borde-suave); }
  .disp-fila > strong { grid-column: 1 / -1; }
  .disp-fila [data-label]::before { content: attr(data-label); display: block; font-size: .74rem; color: var(--tinta-suave); margin-bottom: 3px; }
  .disp-error { grid-column: 1 / -1; }
}
details.bloque > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; margin: -4px 0; }
details.bloque > summary::-webkit-details-marker { display: none; }
details.bloque > summary .bloque-titulo { margin: 0; }
details.bloque > summary .icono { color: var(--tinta-tenue); transition: transform .15s; }
details.bloque[open] > summary { margin-bottom: 14px; }
details.bloque[open] > summary .icono { transform: rotate(180deg); }
.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px 16px; grid-auto-flow: row dense; }
/* Anchos según el contenido: normal, dos columnas; corto (fechas, DNI, CP, importes), una; largo, tres. */
.campos > .campo { grid-column: span 2; }
.campos > .campo.campo-corto { grid-column: span 1; }
.campos > .campo.campo-largo { grid-column: span 3; }
.campos > .campo.campo-ancho, .campos > fieldset.campo-ancho { grid-column: 1 / -1; }
/* Una sola columna (redactor, cambiar la contraseña…): cada campo, a todo el ancho. */
.campos.campos-columna { grid-template-columns: minmax(0, 1fr); }
.campos.campos-columna > * { grid-column: 1 / -1; }
@media (max-width: 640px) { .campos > .campo, .campos > .campo.campo-largo { grid-column: 1 / -1; } .campos > .campo.campo-corto { grid-column: span 1; } }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo-ancho { grid-column: 1 / -1; }
.campo > label, .campo legend { font-size: .84rem; font-weight: 700; color: var(--tinta); }
.campo .obligatorio { color: var(--acento); margin-left: 2px; }
.campo-casilla { flex-direction: row; align-items: center; gap: 10px; padding-top: 26px; }
.campo-casilla label { font-weight: 600; cursor: pointer; }
.ayuda { font-size: .78rem; color: var(--tinta-suave); }
.error { font-size: .8rem; color: var(--peligro); font-weight: 600; }
.campo.con-error input, .campo.con-error select, .campo.con-error textarea { border-color: var(--peligro); }
.opciones-multiples { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--borde);
  border-radius: var(--radio-pequeno); cursor: pointer; font-weight: 600; font-size: .88rem; background: var(--superficie);
}
.opcion:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
.errores-formulario { margin-bottom: 16px; }
.barra-guardar {
  position: sticky; bottom: 0; z-index: 10; margin-top: 18px; padding: 14px 0;
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  background: linear-gradient(to top, var(--fondo) 70%, transparent);
}
.barra-guardar .derecha { margin-left: auto; }
.pie-auditoria { margin-top: 10px; font-size: .8rem; color: var(--tinta-tenue); display: flex; flex-wrap: wrap; gap: 4px 16px; }
.pie-auditoria .icono { width: 14px; height: 14px; }
.subida { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 10px; align-items: center; }

/* ---------- Pestañas ---------- */
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.pestana {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 14px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; white-space: nowrap;
  font: inherit; font-weight: 700; font-size: .9rem; color: var(--tinta-suave);
}
.pestana:hover { color: var(--tinta); }
.pestana[aria-selected="true"] { color: var(--acento); border-bottom-color: var(--acento); }
.pestana[aria-selected="true"] .contador { background: var(--acento-suave); color: var(--acento); }

/* ---------- Avisos ---------- */
.avisos { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.aviso {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px;
  background: var(--info-suave); color: var(--tinta); border: 1px solid transparent; font-weight: 600; font-size: .9rem;
  animation: entrar .2s ease-out;
}
.aviso > .icono { margin-top: 1px; color: var(--info); }
.aviso-success { background: var(--exito-suave); }
.aviso-success > .icono { color: var(--exito); }
.aviso-error { background: var(--peligro-suave); }
.aviso-error > .icono { color: var(--peligro); }
.aviso-warning { background: var(--aviso-suave); }
.aviso-warning > .icono { color: var(--aviso); }
.aviso .cerrar { margin-left: auto; background: none; border: 0; padding: 0; color: var(--tinta-suave); cursor: pointer; display: grid; }
.aviso.saliendo { opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s; }
@keyframes entrar { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Estado vacío ---------- */
.vacio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 36px 20px; color: var(--tinta-suave); }
.vacio .chip-icono { background: var(--superficie-2); color: var(--tinta-tenue); margin-bottom: 4px; }
.vacio strong { color: var(--tinta); }
.vacio-compacto { padding: 22px 20px; }

/* ---------- Buscador rápido de los formularios ---------- */
.buscador { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.buscador-caja { position: relative; }
.buscador-lupa { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--tinta-tenue); pointer-events: none; }
.buscador-caja input { padding-left: 38px; padding-right: 36px; }
.buscador-caja input::-webkit-search-cancel-button { display: none; }  /* ya hay un botón propio para quitar */
.buscador-caja.elegido input { font-weight: 700; background: color-mix(in srgb, var(--acento) 4%, var(--superficie)); border-color: color-mix(in srgb, var(--acento) 30%, var(--borde)); }
.buscador-caja.elegido .buscador-lupa { color: var(--acento); }
.buscador-caja.con-error input { border-color: var(--peligro); box-shadow: 0 0 0 3px var(--peligro-suave); }
.buscador-caja.con-error + .buscador-detalle { color: var(--peligro); font-weight: 600; }
.buscador-quitar { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 4px; color: var(--tinta-suave); cursor: pointer; display: grid; border-radius: 6px; }
.buscador-quitar:hover { background: var(--superficie-2); color: var(--peligro); }
.buscador-detalle { min-height: 0; font-size: .76rem; }
.buscador-detalle:empty { display: none; }
/* Posición fija (la calcula app.js bajo el campo): así ningún contenedor con desplazamiento la recorta,
   p. ej. las tablas de «Otros clientes» o «Contrarios». */
.buscador-resultados { position: fixed; z-index: 60; max-height: 320px; overflow-y: auto; right: auto; }
.buscador-resultados li { list-style: none; }
.buscador-resultados button { flex-direction: column; align-items: flex-start; gap: 1px; }
.buscador-resultados button small { color: var(--tinta-tenue); font-weight: 500; font-size: .76rem; }
.buscador-resultados button.activo { background: var(--acento-suave); }
.tabla .buscador { min-width: 220px; }

/* ---------- Fichas: contacto de los clientes del expediente ---------- */
.contactos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 16px; }
.contacto { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; }
.contacto-datos { min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: .86rem; }
.contacto-datos > a:first-child { font-weight: 700; font-size: .95rem; color: var(--tinta); }
.contacto-datos .dato { display: inline-flex; gap: 6px; align-items: center; color: var(--tinta-suave); overflow-wrap: anywhere; }
.contacto-datos .dato a { color: var(--tinta); }
.contacto-datos .dato .icono { color: var(--tinta-tenue); }
/* Enlace a WhatsApp junto al móvil: verde reconocible, sin usar la marca. */
.enlace-whatsapp { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  font-size: .76rem; font-weight: 600; color: #1a7f4b !important; background: color-mix(in srgb, #25a35a 12%, transparent); text-decoration: none; }
.enlace-whatsapp .icono { color: currentColor !important; }
.enlace-whatsapp:hover { background: color-mix(in srgb, #25a35a 22%, transparent); }
:root[data-theme="dark"] .enlace-whatsapp { color: #6fd39b !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .enlace-whatsapp { color: #6fd39b !important; } }
.contacto .insignia { align-self: flex-start; }

/* ---------- Correo ---------- */
.nav-contador {
  margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center;
  background: var(--acento); color: #fff; font-size: .72rem; font-weight: 700;
}
.contenido-correo { max-width: none; padding: 16px 20px; }
.correo {
  display: grid; grid-template-columns: 220px minmax(300px, 380px) minmax(0, 1fr);
  height: calc(100vh - var(--alto-barra) - 32px); min-height: 520px; overflow: hidden;
  background: var(--superficie); border: 1px solid var(--borde-suave); border-radius: var(--radio); box-shadow: var(--sombra);
}
.correo-carpetas { display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; border-right: 1px solid var(--borde-suave); overflow-y: auto; background: color-mix(in srgb, var(--superficie-2) 55%, var(--superficie)); }
.correo-redactar { width: 100%; margin-bottom: 10px; }
.correo-nav { display: flex; flex-direction: column; gap: 2px; }
.correo-carpeta { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: var(--tinta); font-weight: 600; font-size: .9rem; text-decoration: none; }
.correo-carpeta span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.correo-carpeta .icono { color: var(--tinta-suave); }
.correo-carpeta .contador { margin-left: auto; }
.correo-carpeta:hover { background: var(--superficie-2); text-decoration: none; }
.correo-carpeta.activa { background: var(--acento-suave); color: var(--acento); }
.correo-carpeta.activa .icono { color: var(--acento); }
.correo-estado { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--borde-suave); display: flex; flex-direction: column; gap: 6px; font-size: .82rem; }
.correo-estado form { margin: 0; }
.correo-cuenta { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; }
.correo-cuenta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.correo-sin-carpetas { padding: 6px 10px; }
.correo-lista { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--borde-suave); overflow: hidden; }
.correo-buscar { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid var(--borde-suave); margin: 0; }
.correo-buscar .campo-busqueda { position: relative; flex: 1; }
.correo-buscar .campo-busqueda .icono, .correo-asociar .campo-busqueda .icono { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--tinta-tenue); pointer-events: none; }
.correo-buscar input, .correo-asociar input { height: 38px; padding-left: 36px; }
.correo-buscar select { width: auto; height: 38px; }
.correo-selector-carpeta { display: none; }
.correo-lista-titulo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 14px 6px; }
.correo-lista-titulo h1 { font-size: 1.02rem; }
.correo-mensajes { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.correo-fila { display: flex; gap: 11px; padding: 11px 14px; border-bottom: 1px solid var(--borde-suave); color: var(--tinta); text-decoration: none; }
.correo-fila:hover { background: var(--superficie-2); text-decoration: none; }
.correo-fila.activa { background: var(--acento-suave); }
.correo-fila.no-leido { box-shadow: inset 3px 0 0 var(--acento); }
.correo-fila.no-leido .correo-remitente, .correo-fila.no-leido .correo-asunto { font-weight: 700; color: var(--tinta); }
.correo-fila-texto { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.correo-fila-linea { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.correo-remitente, .correo-direccion, .correo-asunto, .correo-extracto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* La dirección real del remitente, siempre a la vista bajo el nombre (para detectar suplantaciones). */
.correo-direccion { font-size: .76rem; font-weight: 600; color: var(--tinta-suave); margin-top: -1px; }
.correo-remitente { font-size: .9rem; font-weight: 600; }
.correo-fecha { flex: none; font-size: .74rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.correo-asunto { font-size: .86rem; font-weight: 500; color: var(--tinta-suave); }
.correo-extracto { font-size: .79rem; color: var(--tinta-tenue); }
.correo-marcas { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; align-items: center; }
.correo-marca { color: var(--tinta-suave); display: inline-flex; }
.correo-marca.destacado, .correo-destacado { color: var(--aviso); }
.correo-destacado .icono { fill: currentColor; }
.correo-etiqueta { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; font-size: .7rem; font-weight: 700; background: var(--acento-suave); color: var(--acento); max-width: 100%; overflow: hidden; white-space: nowrap; }
.correo-paginacion { padding: 8px 14px; margin: 0; border-top: 1px solid var(--borde-suave); }
.correo-lectura { min-width: 0; overflow-y: auto; display: flex; flex-direction: column; }
.correo-vacio { flex: 1; justify-content: center; }
.correo-panel { display: flex; flex-direction: column; flex: 1; min-height: 100%; }
.correo-barra { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 10px 14px; border-bottom: 1px solid var(--borde-suave); background: var(--superficie); }
.correo-barra form { margin: 0; }
.correo-barra-separador { flex: 1; }
.correo-volver { display: none; }
.correo-cabecera { padding: 16px 20px 8px; }
.correo-cabecera h2 { font-size: 1.22rem; margin-bottom: 12px; overflow-wrap: anywhere; }
.correo-de { display: flex; gap: 12px; align-items: flex-start; }
.correo-de-datos { flex: 1; min-width: 0; font-size: .9rem; overflow-wrap: anywhere; }
.correo-de-fecha { flex: none; }
.correo-asociaciones {
  margin: 6px 20px 12px; padding: 10px 12px; border-radius: 12px; display: flex; flex-direction: column; gap: 8px;
  background: color-mix(in srgb, var(--acento) 5%, var(--superficie)); border: 1px dashed color-mix(in srgb, var(--acento) 28%, transparent);
}
.correo-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.correo-chips > .icono { color: var(--acento); }
.correo-chips form { margin: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font: inherit; font-size: .8rem; font-weight: 700;
  background: var(--superficie); border: 1px solid var(--borde); color: var(--tinta); max-width: 100%;
}
.chip a { color: inherit; display: inline-flex; align-items: center; gap: 5px; }
.chip button { background: none; border: 0; padding: 0; cursor: pointer; color: var(--tinta-suave); display: grid; }
.chip button:hover { color: var(--peligro); }
.chip-expediente { border-color: color-mix(in srgb, var(--acento) 40%, var(--borde)); }
.chip-sugerida { cursor: pointer; border-style: dashed; color: var(--tinta-suave); background: transparent; }
.chip-sugerida:hover { border-color: var(--acento); color: var(--acento); background: var(--superficie); }
label.chip { cursor: pointer; }
label.chip input { width: 15px; height: 15px; }
.correo-asociar { position: relative; margin: 0; }
.correo-asociar .campo-busqueda { position: relative; }
.correo-resultados { left: 0; right: 0; max-height: 300px; overflow-y: auto; }
.correo-resultados li { list-style: none; }
.correo-resultados button small { margin-left: auto; color: var(--tinta-tenue); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
.correo-adjuntos { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 12px; }
.correo-adjunto { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--borde); border-radius: 10px; color: var(--tinta); font-size: .82rem; font-weight: 600; text-decoration: none; max-width: 100%; }
.correo-adjunto:hover { background: var(--superficie-2); text-decoration: none; }
.correo-adjunto .insignia { font-size: .64rem; padding: 1px 6px; }
.correo-imagenes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 20px 8px; padding: 6px 10px; border-radius: 10px; background: var(--aviso-suave); font-size: .82rem; }
.correo-html { flex: 1; width: 100%; min-height: 460px; border: 0; border-top: 1px solid var(--borde-suave); background: #fff; }
.correo-texto { padding: 16px 20px 28px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .93rem; border-top: 1px solid var(--borde-suave); }
.correo-panel > .aviso { margin: 0 20px 10px; }
.correo-pagina { overflow: hidden; }
.correo-pagina .correo-html { min-height: 70vh; }
.correo-pagina .correo-volver { display: none !important; }
.redactar-copias > summary { cursor: pointer; }
@media (max-width: 1200px) {
  .correo { grid-template-columns: 190px minmax(260px, 330px) minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .correo { grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); }
  .correo-carpetas { display: none; }
  .correo-selector-carpeta { display: block; width: auto; margin: 10px 12px 0; }
}
@media (max-width: 720px) {
  .contenido-correo { padding: 0; }
  .contenido-correo > .avisos { margin: 10px 12px; }
  .correo { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - var(--alto-barra)); border: 0; border-radius: 0; box-shadow: none; }
  .correo[data-vista="lista"] .correo-lectura, .correo[data-vista="lectura"] .correo-lista { display: none; }
  .correo-lista { border-right: 0; }
  .correo-volver { display: inline-flex; }
  .correo-cabecera, .correo-texto { padding-left: 14px; padding-right: 14px; }
  .correo-asociaciones { margin-left: 14px; margin-right: 14px; }
  .correo-adjuntos { padding: 0 14px 12px; }
  .correo-de-fecha { display: none; }
}

/* ---------- Leyenda de la agenda ---------- */
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .82rem; color: var(--tinta-suave); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 10px; height: 10px; border-radius: 3px; background: var(--ev); }

/* ---------- FullCalendar ---------- */
.calendario { padding: 16px; }
.calendario .fc {
  --fc-border-color: var(--borde-suave); --fc-page-bg-color: var(--superficie); --fc-neutral-bg-color: var(--superficie-2);
  --fc-today-bg-color: color-mix(in srgb, var(--acento) 6%, transparent); --fc-now-indicator-color: var(--acento);
  --fc-button-bg-color: var(--superficie); --fc-button-border-color: var(--borde); --fc-button-text-color: var(--tinta);
  --fc-button-hover-bg-color: var(--superficie-2); --fc-button-hover-border-color: var(--borde);
  --fc-button-active-bg-color: var(--tinta); --fc-button-active-border-color: var(--tinta);
  --fc-list-event-hover-bg-color: var(--superficie-2); --fc-highlight-color: var(--acento-suave);
  --fc-non-business-color: color-mix(in srgb, var(--superficie-3) 75%, transparent);
  font-size: .88rem;
}
.calendario .fc .fc-toolbar { flex-wrap: wrap; gap: 10px; }
.calendario .fc .fc-toolbar-title { font-size: 1.15rem; font-weight: 700; text-transform: capitalize; }
.calendario .fc .fc-button { font-family: inherit; font-weight: 700; font-size: .82rem; border-radius: 9px; padding: .45em .8em; box-shadow: none !important; text-transform: capitalize; }
.calendario .fc .fc-button-primary:not(:disabled).fc-button-active, .calendario .fc .fc-button-primary:not(:disabled):active { color: var(--superficie); }
.calendario .fc .fc-col-header-cell-cushion, .calendario .fc .fc-daygrid-day-number { color: var(--tinta); text-decoration: none; font-weight: 700; }
.calendario .fc .fc-col-header-cell { text-transform: capitalize; }
.calendario .fc .fc-timegrid-slot-label-cushion { color: var(--tinta-suave); }
.calendario .fc a { text-decoration: none; }
.calendario .fc .fc-event { border-radius: 6px; padding: 1px 3px; font-weight: 600; cursor: pointer; }
.calendario .fc .fc-list-event-title a { color: var(--tinta); }
.calendario .fc .fc-list-day-cushion { background: var(--superficie-2); }
.ev-senalamiento { --ev: var(--ev-senalamiento); } .ev-cita { --ev: var(--ev-cita); } .ev-reunion { --ev: var(--ev-reunion); }
.ev-otro { --ev: var(--ev-otro); } .ev-plazo { --ev: var(--ev-plazo); } .ev-plazo-vencido { --ev: var(--ev-plazo-vencido); }
.ev-tarea { --ev: var(--ev-tarea); } .ev-hecho { --ev: var(--ev-hecho); }
.fc .fc-event[class*="ev-"] { --fc-event-bg-color: var(--ev); --fc-event-border-color: var(--ev); --fc-event-text-color: #fff; }
:root[data-theme="dark"] .fc .ev-senalamiento { --fc-event-text-color: #141414; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fc .ev-senalamiento { --fc-event-text-color: #141414; } }

/* ---------- Acceso (login) ---------- */
.acceso { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.acceso-marca {
  background: var(--lateral-fondo); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.acceso-marca::after {
  content: ""; position: absolute; width: 520px; height: 520px; right: -160px; bottom: -180px; border-radius: 999px;
  background: radial-gradient(circle, rgba(198,53,39,.55), rgba(198,53,39,0) 70%);
}
.acceso-marca .marca { padding: 0; }
.acceso-lema { position: relative; z-index: 1; max-width: 26ch; }
.acceso-lema h2 { font-size: 2rem; line-height: 1.2; }
.acceso-lema p { color: #BDBDBD; margin-top: 12px; }
.acceso-formulario { display: grid; place-items: center; padding: 32px 20px; }
.acceso-caja { width: 100%; max-width: 380px; }
.acceso-caja h1 { font-size: 1.5rem; }
.acceso-caja .subtitulo { margin-bottom: 24px; }
.acceso-caja form { display: flex; flex-direction: column; gap: 16px; }
.acceso-caja .boton { width: 100%; height: 46px; margin-top: 6px; }

/* ---------- Paneles laterales (móvil) ---------- */
.velo { display: none; }

/* ---------- Adaptación a pantallas ---------- */
@media (max-width: 1280px) {
  /* La columna de agenda baja debajo del resumen, en dos columnas mientras quepa. */
  .inicio { grid-template-columns: minmax(0, 1fr); }
  .inicio-lateral { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
}
@media (max-width: 1100px) {
  .contenido { padding: 24px 22px 56px; }
  .barra { padding: 0 22px; }
}
@media (max-width: 960px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral {
    position: fixed; left: 0; top: 0; bottom: 0; width: min(290px, 86vw);
    transform: translateX(-100%); transition: transform .22s ease; box-shadow: none;
  }
  body.menu-abierto .lateral { transform: none; box-shadow: var(--sombra-flotante); }
  body.menu-abierto .velo { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(15,15,15,.45); }
  body.menu-abierto { overflow: hidden; }
  .barra .boton-menu, .barra .barra-marca { display: inline-flex; }
  .barra-marca img { width: 30px; height: 30px; border-radius: 999px; }
  .subida { grid-template-columns: 1fr 1fr; }
  .subida input[type=file] { grid-column: 1 / -1; }
  .acceso { grid-template-columns: 1fr; }
  .acceso-marca { padding: 28px 24px; min-height: auto; }
  .acceso-lema { display: none; }
}
@media (max-width: 720px) {
  body { font-size: 14.5px; }
  h1, .saludo h1 { font-size: 1.35rem; }
  .contenido { padding: 18px 14px 48px; }
  .barra { padding: 0 12px; gap: 8px; }
  .buscador-global input { height: 38px; }
  .ocultar-movil { display: none !important; }
  .chip-icono { width: 38px; height: 38px; }
  .cabecera-pagina { margin-bottom: 16px; }
  .cabecera-pagina > .acciones { width: 100%; }
  .estadisticas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .estadistica { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; }
  .paneles { grid-template-columns: minmax(0, 1fr); }
  .inicio-lateral { padding: 10px; border-radius: 16px; grid-template-columns: minmax(0, 1fr); }
  /* En el móvil lo de hoy va justo después de las cifras: saludo, cifras, agenda y después el resto. */
  .inicio { gap: 18px; }
  .inicio-principal { display: contents; }
  .bienvenida { order: 1; }
  .inicio .estadisticas { order: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inicio .estadistica:last-child:nth-child(odd) { grid-column: span 2; }
  .inicio-lateral { order: 3; }
  .inicio .paneles { order: 4; }
  .bienvenida { padding: 18px; gap: 14px; }
  .bienvenida .avatar-grande { width: 52px; height: 52px; }
  .bienvenida-texto h1 { font-size: 1.25rem; }
  .bienvenida-acciones { margin-left: 0; width: 100%; }
  .bloque { padding: 16px; }
  .campos { grid-template-columns: minmax(0, 1fr); }
  .campo-casilla { padding-top: 0; }
  .subida { grid-template-columns: 1fr; }
  .barra-guardar .boton { flex: 1; }
  .barra-guardar .derecha { margin-left: 0; }
  .calendario { padding: 10px; }
  .calendario .fc .fc-toolbar { flex-direction: column; align-items: stretch; }
  .calendario .fc .fc-toolbar-chunk { display: flex; justify-content: center; }
  /* Tablas como tarjetas apiladas */
  .tabla-adaptable thead { display: none; }
  .tabla-adaptable, .tabla-adaptable tbody, .tabla-adaptable tr, .tabla-adaptable td { display: block; width: 100%; }
  .tabla-adaptable tr { padding: 12px 14px; border-bottom: 1px solid var(--borde-suave); }
  .tabla-adaptable tbody tr:last-child { border-bottom: 0; }
  .tabla-adaptable td { border: 0; padding: 3px 0; display: flex; gap: 12px; justify-content: space-between; align-items: baseline; text-align: right; }
  .tabla-adaptable td::before { content: attr(data-label); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-tenue); text-align: left; flex: none; }
  .tabla-adaptable td.principal-celda { display: block; text-align: left; font-size: 1rem; padding-bottom: 6px; }
  .tabla-adaptable td.principal-celda::before { display: none; }
  .tabla-adaptable td:empty, .tabla-adaptable td.vacia { display: none; }
  .tabla-adaptable td.accion-celda { width: 100%; justify-content: flex-end; padding-top: 8px; }
  .tabla-adaptable td.accion-celda::before { display: none; }
}

/* ---------- Impresión ---------- */
@media print {
  .lateral, .barra, .barra-guardar, .barra-filtros, .acciones, .pestanas, .boton-hecho { display: none !important; }
  .app { display: block; }
  .contenido { padding: 0; max-width: none; }
  .tarjeta { box-shadow: none; border-color: #ccc; }
  [data-panel] { display: block !important; }
}

/* Redactar: personas del expediente para añadir a Para / CC. */
.destinatarios { display: grid; gap: 6px; }
.destinatarios ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.destinatario { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--borde-suave); border-radius: 10px; background: var(--superficie-2); }
.destinatario-datos { display: grid; min-width: 0; }
.destinatario-datos small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.destinatario .acciones { flex: none; gap: 4px; }
.destinatario .hecho { opacity: .55; }
.tabla .casilla-celda { width: 36px; padding-right: 0; }
@media (max-width: 720px) { .tabla-adaptable tr:has(> .casilla-celda) { position: relative; padding-right: 44px; } .tabla-adaptable .casilla-celda { position: absolute; right: 12px; top: 12px; width: auto; padding: 0; } .tabla-adaptable thead .casilla-celda { display: none; } }
.texto-aviso, .subtitulo .dato.texto-aviso { color: var(--aviso); }

/* Ficha: tarjeta de protección de datos (entregado, firmado, justificante). */
.proteccion-pasos { list-style: none; margin: 0 0 4px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; counter-reset: paso; }
.proteccion-pasos li { counter-increment: paso; display: grid; gap: 2px; padding: 10px 12px 10px 42px; position: relative; border: 1px solid var(--borde-suave); border-radius: 10px; background: var(--superficie-2); }
.proteccion-pasos li::before { content: counter(paso); position: absolute; left: 12px; top: 11px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 700; background: var(--superficie-3); color: var(--tinta-suave); }
.proteccion-pasos li.hecho::before { content: "\2713"; background: var(--exito-suave); color: var(--exito); }
.proteccion-pasos .texto-suave { font-size: .8rem; }
.proteccion-registrar { margin-top: 14px; border-top: 1px solid var(--borde-suave); padding-top: 12px; }
.proteccion-registrar > summary { cursor: pointer; font-weight: 600; color: var(--acento); }
.proteccion-registrar form { margin-top: 10px; }
a.dato { color: inherit; text-decoration: none; }
a.dato:hover { text-decoration: underline; }
@media (max-width: 720px) { .proteccion-pasos { grid-template-columns: 1fr; } }

/* Agenda: calendario y, al lado, mini calendario (también destino al arrastrar) y leyenda. */
.agenda { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 16px; align-items: start; }
.agenda-lateral { display: grid; gap: 16px; position: sticky; top: 16px; }
.agenda .mini-dia { width: 100%; border: 0; background: none; font: inherit; font-weight: 600; font-size: .84rem; height: 32px; cursor: pointer; }
.agenda .mini-dia.en-vista:not(.hoy) { background: var(--acento-suave); }
.agenda .mini-dia.hoy { background: var(--acento); color: var(--acento-tinta); }
.agenda .mini-dia.destino { outline: 2px dashed var(--acento); outline-offset: -2px; background: var(--acento-suave); }
.mini-cal-ayuda { margin: 8px 0 0; font-size: .74rem; color: var(--tinta-suave); line-height: 1.35; }
.leyenda-tarjeta { padding: 12px 14px; }
.leyenda-tarjeta .leyenda { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 0; }
.calendario .fc .fc-event.fc-event-draggable { cursor: grab; }
.calendario .fc .fc-event-dragging { cursor: grabbing; }
@media (max-width: 1100px) { .agenda { grid-template-columns: 1fr; } .agenda-lateral { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }

/* Aviso flotante (p. ej. "movido… Deshacer"). */
.aviso-flotante { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 80; display: flex; align-items: center; gap: 12px;
  max-width: min(640px, calc(100vw - 32px)); padding: 12px 14px 12px 18px; border-radius: 12px; background: var(--tinta); color: var(--superficie);
  box-shadow: 0 10px 30px rgb(0 0 0 / .25); font-size: .9rem; }
.aviso-flotante[hidden] { display: none; }
.aviso-flotante.es-error { background: var(--peligro); color: #fff; }
.aviso-flotante .cerrar { background: none; border: 0; color: inherit; cursor: pointer; display: grid; opacity: .8; }

/* Selector de empresa (multiempresa) bajo la marca del menú lateral. */
.selector-empresa { display: grid; gap: 4px; margin: 0 12px 14px; padding: 10px 12px; border-radius: 12px; background: rgb(255 255 255 / .06); }
.selector-empresa label { display: flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / .55); }
.selector-empresa select { width: 100%; height: 34px; padding: 0 30px 0 10px; border-radius: 8px; border: 1px solid rgb(255 255 255 / .15);
  background-color: rgb(0 0 0 / .25); color: #fff; font: inherit; font-weight: 700; font-size: .8rem; text-overflow: ellipsis; }
.selector-empresa select option { background-color: var(--superficie); color: var(--tinta); }
.aviso-info { margin-bottom: 16px; }

/* Facturación */
.totales { display: grid; grid-template-columns: auto auto; justify-content: end; gap: 6px 28px; margin: 0; font-variant-numeric: tabular-nums; }
.totales dt { color: var(--tinta-suave); }
.totales dd { margin: 0; text-align: right; font-weight: 600; }
.totales .total { font-size: 1.05rem; font-weight: 800; color: var(--tinta); border-top: 1px solid var(--borde-suave); padding-top: 6px; }
.cobrar { display: grid; gap: 14px; border-top: 1px solid var(--borde-suave); }
.cobrar-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.cobrar-form .campo { min-width: 150px; }
.provisiones { display: grid; gap: 8px; }
.lista-simple { list-style: none; margin: 0; padding: 12px 18px 16px; display: grid; gap: 6px; }
.insignia-borrador, .insignia-proforma { background: var(--superficie-3); color: var(--tinta-suave); }
.insignia-emitida, .insignia-cobrada { background: var(--exito-suave); color: var(--exito); }
.insignia-pendiente, .insignia-cobrada-en-parte, .insignia-factura-rectificativa { background: var(--aviso-suave); color: var(--aviso); }
.insignia-anulada { background: var(--peligro-suave); color: var(--peligro); }
.insignia-facturada, .insignia-factura { background: var(--acento-suave); color: var(--acento); }
.concepto-linea { min-width: 220px; }
.resumen-facturacion { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.resumen-facturacion > div { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--borde-suave); border-radius: 12px; background: var(--superficie); }
.resumen-facturacion strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .resumen-facturacion { grid-template-columns: 1fr 1fr; } }
.bloque .tabla input[type="number"] { width: 92px; min-width: 70px; }
.bloque .tabla input[type="date"] { width: 150px; }
.provisiones .boton { justify-self: start; }

/* Presupuestos: estados y calculadora del baremo. */
.insignia-enviado { background: var(--info-suave); color: var(--info); }
.insignia-aceptado { background: var(--exito-suave); color: var(--exito); }
.insignia-rechazado { background: var(--peligro-suave); color: var(--peligro); }
.calculadora { margin-bottom: 18px; }
.calculadora [hidden] { display: none !important; }
.calculadora .bloque-titulo { display: flex; align-items: center; gap: 8px; }
.calculadora [data-c="fases"] { margin-top: 8px; }
.calc-ajustes summary { cursor: pointer; font-size: .84rem; font-weight: 700; }
.calc-ajustes .opciones-multiples { margin-top: 10px; max-height: 260px; overflow-y: auto; }
.calc-resultado {
  display: grid; grid-template-columns: minmax(160px, auto) 1fr auto; gap: 18px; align-items: start;
  margin-top: 18px; padding: 16px 18px; border-radius: 12px; background: var(--acento-suave);
}
.calc-importe { display: grid; gap: 2px; }
.calc-importe strong { font-size: 1.6rem; color: var(--acento); font-variant-numeric: tabular-nums; }
.calc-detalle { margin: 0; padding-left: 18px; font-size: .86rem; display: grid; gap: 3px; }
.calc-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 720px) { .calc-resultado { grid-template-columns: 1fr; } }
.fila-nueva td { background: var(--acento-suave); }
.calc-guardado { padding: 8px 18px 12px; }
.calc-guardado pre { margin: 4px 0 0; font: inherit; font-size: .84rem; white-space: pre-wrap; color: var(--tinta-suave); }
@media print { .calculadora .campos, .calc-acciones { display: none !important; } .calc-resultado { background: none; } }

/* Presupuestos: seguimiento comercial. */
.insignia-caducado { background: var(--superficie-3); color: var(--tinta-suave); }
.texto-aviso { color: var(--aviso); font-weight: 600; }
.anotar-seguimiento { display: grid; gap: 12px; justify-items: start; }
.anotar-seguimiento .campos { width: 100%; }
.historial-seguimiento { list-style: none; margin: 0; padding: 4px 18px 16px; display: grid; gap: 10px; }
.historial-seguimiento li { display: grid; gap: 2px; padding-left: 12px; border-left: 3px solid var(--borde); font-size: .9rem; }
.historial-seguimiento .seg-estado { border-left-color: var(--acento); }
.embudo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .embudo { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .embudo { grid-template-columns: 1fr; } }
.embudo-columna { min-width: 0; margin: 0 !important; }
.embudo-cabecera { display: grid; gap: 4px; padding: 14px 14px 12px; }
.embudo-cabecera h2 { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 1rem; }
.embudo-tarjeta {
  display: grid; gap: 3px; margin: 0 12px 10px; padding: 10px 12px; border: 1px solid var(--borde-suave);
  border-radius: 10px; color: inherit; text-decoration: none; font-size: .88rem; background: var(--superficie);
}
.embudo-tarjeta:hover { border-color: var(--acento); }
.embudo-tarjeta.es-aviso { border-color: var(--aviso); background: var(--aviso-suave); }
.embudo-pie { display: flex; justify-content: space-between; gap: 8px; color: var(--tinta-suave); font-size: .8rem; }
.resumen-facturacion .es-aviso { border-color: var(--aviso); background: var(--aviso-suave); }

/* Diagnóstico normativo (compliance). */
.pasos-diagnostico { display: flex; gap: 6px; list-style: none; margin: 0 0 14px; padding: 0; counter-reset: paso; }
.pasos-diagnostico li { flex: 1; font-size: .78rem; color: var(--tinta-suave); border-top: 4px solid var(--borde); padding-top: 6px; }
.diagnostico .tarjeta + .tarjeta { margin-top: 16px; }
.pregunta[hidden] { display: none !important; }
.filtros-diagnostico { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.categoria-diagnostico { margin-bottom: 22px; }
.categoria-diagnostico[hidden] { display: none; }
.categoria-titulo { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; margin: 0 0 10px; }
.categoria-titulo .siglas { width: 30px; height: 30px; border-radius: 50%; background: var(--acento); color: #fff; display: grid; place-items: center; font-size: .72rem; font-weight: 700; flex: none; }
.servicio-diagnostico { border: 1px solid var(--borde-suave); border-radius: 12px; background: var(--superficie); margin-bottom: 8px; }
.servicio-diagnostico[hidden] { display: none; }
.servicio-diagnostico.incluido { border-color: var(--acento); }
.servicio-diagnostico.no-aplica:not(.incluido) { opacity: .75; }
.servicio-fila { display: flex; gap: 12px; padding: 12px 14px; align-items: flex-start; }
.servicio-fila > input[type=checkbox] { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--acento); flex: none; }
.servicio-texto { flex: 1; min-width: 0; display: grid; gap: 4px; }
.servicio-texto summary { cursor: pointer; color: var(--acento); font-size: .8rem; font-weight: 600; }
.base-legal { display: grid; grid-template-columns: 130px 1fr; gap: 4px 12px; margin: 8px 0 0; font-size: .82rem; }
.base-legal dt { font-weight: 700; } .base-legal dd { margin: 0; color: var(--tinta-suave); overflow-wrap: anywhere; }
.servicio-importes { display: flex; gap: 8px; align-items: flex-end; flex: none; }
.servicio-importes label { display: grid; gap: 2px; }
.servicio-importes label[hidden] { display: none; }
.servicio-importes input[data-unidades] { width: 64px; text-align: center; }
.servicio-importes input[data-precio] { width: 110px; text-align: right; }
.servicio-importes .subtotal { width: 96px; text-align: right; padding-bottom: 8px; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .servicio-fila { flex-wrap: wrap; } .servicio-importes { width: 100%; justify-content: flex-end; } .base-legal { grid-template-columns: 1fr; } }
.insignia-obligatorio { background: var(--acento); color: #fff; }
.insignia-recomendado { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.insignia-opcional { background: transparent; color: var(--tinta-suave); box-shadow: inset 0 0 0 1.5px var(--borde); }
.barra-cuota { justify-content: space-between; }
.barra-cuota .cuota strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.datos-nuevo summary { cursor: pointer; font-weight: 600; margin-top: 14px; }
.documentos-compliance { margin-bottom: 18px; }
.doc-fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde-suave); flex-wrap: wrap; }
.doc-fila:last-of-type { border-bottom: 0; }
.doc-fila > div:first-child { display: grid; gap: 2px; }
.doc-botones { display: flex; gap: 6px; }
.doc-firmante { max-width: 420px; margin-bottom: 6px; }
.aviso-nif { color: var(--peligro, #b42318); }

/* Menú superior: empresa y usuario (antes en el menú lateral). */
.barra .selector-empresa { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 4px 0 10px; height: 38px; border-radius: 10px;
  background: var(--superficie-2); border: 1px solid var(--borde-suave); color: var(--tinta-suave); }
.barra .selector-empresa select { height: 34px; max-width: 220px; border: 0; background-color: transparent; color: var(--tinta); font-weight: 600; padding: 0 26px 0 2px; }
.barra .selector-empresa select option { background-color: var(--superficie); color: var(--tinta); }
.usuario-boton { display: inline-flex; align-items: center; gap: 8px; padding: 3px 8px 3px 3px; }
.usuario-boton .avatar { width: 30px; height: 30px; font-size: .72rem; }
.usuario-boton-nombre { font-weight: 600; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desplegable-derecha { right: 0; left: auto; min-width: 240px; }
.usuario-cabecera { display: flex; gap: 10px; align-items: center; padding: 8px 11px 10px; border-bottom: 1px solid var(--borde-suave); margin-bottom: 4px; }
.usuario-cabecera > span { display: grid; line-height: 1.3; min-width: 0; }
.menu-usuario form { margin: 0; }
.menu-usuario .desplegable-menu button { width: 100%; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; color: inherit; }
@media (max-width: 720px) { .barra .selector-empresa select { max-width: 120px; } }

/* Doble factor. */
.opciones-doble-factor { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.opcion-doble-factor { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 16px; border-radius: 12px; border: 1px solid var(--borde);
  background: var(--superficie); color: var(--tinta); font: inherit; cursor: pointer; }
.opcion-doble-factor:hover:not(:disabled) { border-color: var(--acento); }
.opcion-doble-factor:disabled { opacity: .55; cursor: not-allowed; }
.opcion-doble-factor > .icono { color: var(--acento); width: 22px; height: 22px; }
.alta-app { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.alta-app .qr { background: #fff; padding: 10px; border-radius: 12px; width: 200px; height: 200px; box-sizing: content-box; }
.clave-totp { font-size: 1.05rem; letter-spacing: .06em; overflow-wrap: anywhere; }
.lista-codigos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 14px 0; }
.lista-codigos code { display: block; padding: 8px 10px; border-radius: 8px; background: var(--superficie-2); font-size: 1rem; text-align: center; }
.lista-dispositivos { list-style: none; padding: 0; margin: 10px 0 0; }
.lista-dispositivos li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde-suave); }
.lista-dispositivos li > div { display: grid; gap: 2px; }
.lista-dispositivos form { margin: 0; }
.doble-factor-botones { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
@media print { .lateral, .barra, .miga, .codigos-recuperacion .boton { display: none !important; } }

/* Tareas y plazos de otros sin acceso: se ve que existen (y su fecha), no qué son. */
.emborronado { filter: blur(5px); user-select: none; color: var(--tinta-suave); }
.fila-oculta { cursor: default; }
.fila-oculta td { color: var(--tinta-suave); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.fila-desde-presupuesto { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.fila-desde-presupuesto select { flex: 1; min-width: 240px; }

/* Adjuntar arrastrando o pegando. */
[data-soltar].soltando { outline: 2px dashed var(--acento); outline-offset: 4px; border-radius: 12px; }
.lista-archivos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.lista-archivos li { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 8px; background: var(--superficie-2); }
.lista-archivos li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Varias cuentas de correo. */
.lista-cuentas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lista-cuentas li { display: flex; align-items: center; gap: 8px; }
.lista-cuentas li.actual a { font-weight: 700; }
.lista-cuentas a { display: inline-flex; align-items: center; gap: 6px; }
.correo-cuenta select { max-width: 100%; height: 30px; font-size: .8rem; padding: 0 24px 0 6px; }
form.correo-cuenta { display: flex; align-items: center; gap: 6px; margin: 0; }
.firma-imagen { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.firma-imagen img { max-width: 200px; max-height: 90px; background: #fff; padding: 6px; border-radius: 8px; border: 1px solid var(--borde-suave); }
.firma-imagen > div { flex: 1; min-width: 260px; display: grid; gap: 10px; }
.editor-zona blockquote { margin: 0 0 0 6px; padding-left: 10px; border-left: 2px solid var(--borde); color: var(--tinta-suave); }
.editor-zona img { max-width: 240px; max-height: 120px; }

/* Diálogo de «¿Guardar en borradores?». */
.dialogo { border: 1px solid var(--borde); border-radius: 16px; padding: 22px 24px; max-width: 480px; width: calc(100% - 32px);
  background: var(--superficie); color: var(--tinta); box-shadow: 0 20px 60px rgb(0 0 0 / .35); }
.dialogo::backdrop { background: rgb(0 0 0 / .45); }
.dialogo h2 { margin: 0 0 8px; font-size: 1.15rem; }
.dialogo p { margin: 0 0 18px; color: var(--tinta-suave); }
.dialogo-botones { display: flex; gap: 8px; flex-wrap: wrap; }

/* Documentos: carpetas y firma. */
.ruta-carpetas { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 18px; border-bottom: 1px solid var(--borde-suave); font-size: .9rem; }
.ruta-carpetas a { display: inline-flex; align-items: center; gap: 4px; }
.ruta-carpetas a[aria-current] { font-weight: 700; color: var(--tinta); }
.ruta-carpetas .ver-todos { margin-left: auto; font-size: .82rem; }
.ruta-carpetas .ver-todos.activo { font-weight: 700; }
.fila-carpeta, .fila-mover { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--borde-suave); }
.fila-carpeta input[type=text] { max-width: 280px; }
.fila-mover select { max-width: 320px; }
.fila-carpeta-doc { cursor: pointer; }
.formulario-desplegable { display: grid; gap: 8px; padding: 12px; min-width: 280px; }
.firma-electronica { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; color: var(--exito, #15803d); }
.firma-electronica.firma-no-valida { color: var(--peligro, #b42318); }
.lista-firmas { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 8px; }
.lista-firmas li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--superficie-2); }
.lista-firmas li.firma-ok > .icono { color: var(--exito, #15803d); }
.lista-firmas li.firma-mal > .icono { color: var(--peligro, #b42318); }
.lista-firmas li > div { display: grid; gap: 2px; }
.lista-documentos { list-style: none; padding: 0; margin: 0; }
.lista-documentos li { display: flex; align-items: center; gap: 10px; padding: 8px 18px; border-bottom: 1px solid var(--borde-suave); flex-wrap: wrap; }
.lista-documentos li > a { font-weight: 600; }
.lista-documentos li .acciones { margin-left: auto; display: flex; gap: 6px; }
.lista-documentos form { margin: 0; }
.acciones-firma { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--borde-suave); }
.acciones-firma > div, .acciones-firma > form { display: grid; gap: 8px; align-content: start; }
.acciones-firma .acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.acciones-firma form form, .acciones-firma .acciones form { margin: 0; }

/* Festivos: en el mini calendario del Inicio y de fondo en la agenda. */
.mini-dia.festivo { color: var(--acento); font-weight: 700; background: color-mix(in srgb, var(--acento) 10%, transparent); }
.fc .ev-festivo { background: color-mix(in srgb, #C63527 14%, transparent) !important; opacity: 1; }
.fc .ev-festivo .fc-event-title { color: #C63527; font-size: .72rem; font-weight: 600; font-style: normal; padding: 2px 4px; }

.buscador-ficha { position: absolute; right: 36px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; color: var(--acento); }
.buscador-caja:has(.buscador-ficha:not([hidden])) input { padding-right: 64px; }
.buscador-ficha:hover { background: var(--superficie-2); }
.buscador-ficha[hidden] { display: none; }

.fila-traspaso { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 8px; }
.fila-traspaso > .campo { flex: 1; min-width: 280px; }

/* Mi perfil: materias que lleva el abogado, en columnas. */
.materias { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 16px; }
.materia { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-weight: 500; }
.materia:hover { background: var(--superficie-2); }
.materia input { width: auto; margin: 0; accent-color: var(--acento); }
.materia:has(input:checked) { background: color-mix(in srgb, var(--acento) 9%, transparent); color: var(--tinta); font-weight: 700; }

/* ---------- Avisos (campanita) ---------- */
.campanita > summary { position: relative; }
.campanita-contador { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--acento); color: #fff; font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--fondo); }
.avisos-panel { width: min(420px, calc(100vw - 24px)); padding: 0; max-height: min(560px, 75vh); overflow-y: auto; }
.avisos-panel-cabecera, .avisos-panel-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; }
.avisos-panel-cabecera { border-bottom: 1px solid var(--borde); position: sticky; top: 0; background: var(--superficie); }
.avisos-panel-pie { border-top: 1px solid var(--borde); font-size: .85rem; }
.avisos-panel-lista { list-style: none; margin: 0; padding: 4px; }
.aviso-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 10px; }
.aviso-item:hover { background: var(--superficie-2); }
.aviso-item-icono { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px;
  background: var(--superficie-2); color: var(--tinta-suave); }
.aviso-item.urgente .aviso-item-icono { background: color-mix(in srgb, var(--acento) 14%, transparent); color: var(--acento); }
.aviso-item-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; }
.aviso-item-texto strong { font-size: .88rem; font-weight: 600; line-height: 1.3; }
.aviso-item-texto small { font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Dentro del desplegable, sin el estilo de sus enlaces y botones (centrados, a todo el ancho). */
.avisos-panel { overflow-x: hidden; }
.avisos-panel a.aviso-item-texto, .avisos-panel-lista a.aviso-item-texto {
  display: flex; flex-direction: column; align-items: flex-start; width: auto; padding: 0; font-weight: 400; }
.avisos-panel a.aviso-item-texto:hover { background: none; }
.avisos-panel a.aviso-item-texto small { align-self: stretch; }
.avisos-panel .aviso-item button { width: auto; padding: 6px; }
.avisos-panel .avisos-panel-pie button, .avisos-panel .avisos-panel-pie a { width: auto; padding: 6px 8px; }
.preferencias-avisos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 18px; }
.preferencia { display: flex; align-items: flex-start; gap: 10px; padding: 8px; border-radius: 10px; cursor: pointer; }
.preferencia:hover { background: var(--superficie-2); }
.preferencia input { width: auto; margin-top: 3px; accent-color: var(--acento); }
.preferencia span { display: flex; flex-direction: column; gap: 2px; }

/* ---------- Chat ---------- */
.chat { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; height: calc(100vh - 120px); min-height: 460px; }
.chat-lista, .chat-conversacion { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.chat-lista-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 14px 10px; border-bottom: 1px solid var(--borde); }
.chat-lista-cabecera h1 { margin: 0; font-size: 1.15rem; display: flex; align-items: center; gap: 8px; }
.chat-nueva { width: 300px; }
.chat-personas { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; margin-bottom: 8px; }
.chat-persona { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; cursor: pointer; font-weight: 500; }
.chat-persona:hover { background: var(--superficie-2); }
.chat-persona input { width: auto; margin: 0; accent-color: var(--acento); }
.chat-conversaciones { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.chat-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: inherit; text-decoration: none; }
.chat-item:hover { background: var(--superficie-2); }
.chat-item.activo { background: color-mix(in srgb, var(--acento) 10%, transparent); }
.chat-item-icono { width: 34px; height: 34px; flex: none; }
.chat-item-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.chat-item-texto strong { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item-texto small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.chat-item.sin-leer .chat-item-texto strong, .chat-item.sin-leer .chat-item-texto small { font-weight: 700; color: var(--tinta); }
.chat-item-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: .72rem; }
.chat-cabecera { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--borde); }
.chat-cabecera-texto { flex: 1; min-width: 0; }
.chat-cabecera-texto h2 { margin: 0; font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-volver { display: none; }
.chat-mensajes { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-sin-mensajes { margin: auto; }
.chat-mensaje { display: flex; align-items: flex-end; gap: 8px; max-width: min(640px, 85%); }
.chat-mensaje.propio { align-self: flex-end; }
.chat-burbuja { background: var(--superficie-2); border-radius: 14px 14px 14px 4px; padding: 8px 12px; min-width: 0; }
.chat-mensaje.propio .chat-burbuja { background: color-mix(in srgb, var(--acento) 13%, var(--superficie)); border-radius: 14px 14px 4px 14px; }
.chat-burbuja header { display: flex; gap: 8px; align-items: baseline; font-size: .78rem; margin-bottom: 2px; }
.chat-burbuja p { margin: 0; overflow-wrap: anywhere; line-height: 1.45; }
.chat-imagen img { display: block; max-width: 260px; max-height: 220px; border-radius: 8px; margin: 6px 0 2px; }
.chat-archivo { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .85rem; }
.chat-escribir { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--borde); }
.chat-escribir.soltando { outline: 2px dashed var(--acento); outline-offset: -4px; }
.chat-escribir .lista-archivos { display: none; }
.chat-texto { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.chat-texto textarea { resize: none; min-height: 40px; max-height: 160px; }
@media (max-width: 860px) {
  .chat { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 110px); }
  .chat.con-conversacion .chat-lista { display: none; }
  .chat:not(.con-conversacion) .chat-conversacion { display: none; }
  .chat-volver { display: inline-flex; }
  .chat-cabecera { flex-wrap: wrap; padding: 10px 12px; }
  .chat-cabecera-texto { flex: 1 1 calc(100% - 60px); }
  .chat-cabecera .acciones { width: 100%; }
}

/* Remesas: recibo devuelto y formulario para anotar la devolución. */
.recibo-devuelto { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.formulario-devolucion select, .formulario-devolucion input[type=date], .formulario-devolucion input[type=number] { width: 100%; }

/* Avisos: vías y tipos de cada usuario. */
.canales-avisos th, .canales-avisos td { text-align: center; vertical-align: middle; }
.canales-avisos th[scope=row], .canales-avisos thead tr:first-child th:first-child { text-align: left; }
.canales-avisos .via { border-bottom: 1px solid var(--borde); }
.canales-avisos .cuando { font-size: .72rem; font-weight: 600; text-transform: none; letter-spacing: 0; max-width: 140px; }
.canales-avisos .no-disponible { opacity: .6; }
.canales-avisos input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--acento); }
.aviso-tipo { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.notas-avisos { margin: 14px 0 0; padding-left: 18px; line-height: 1.6; }
.dialogo-devolucion { max-width: 520px; text-align: left; }
.dialogo-devolucion .avisar-devolucion { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; border: 1px solid var(--borde); border-radius: 10px; padding: 8px; }
.dialogo-devolucion .avisar-devolucion legend { font-weight: 700; font-size: .85rem; padding: 0 4px; }
.dialogo-devolucion .avisar-devolucion { overflow-x: hidden; }
.dialogo-devolucion .chat-persona { display: flex; justify-content: flex-start; text-align: left; width: 100%; }
.dialogo-devolucion .opcion { justify-content: flex-start; }
.canales-avisos .cuando { white-space: normal; min-width: 90px; }
.dialogo-devolucion input[type=checkbox] { width: auto; flex: none; margin: 0; }
.dialogo-devolucion .chat-persona, .dialogo-devolucion .opcion { gap: 10px; }
.canales-avisos { table-layout: fixed; width: 100%; }
.canales-avisos thead tr:first-child th:first-child { width: 24%; }
.canales-avisos th, .canales-avisos td { padding-left: 6px; padding-right: 6px; overflow-wrap: anywhere; }

/* Listados: filtro de fechas «desde / hasta» con atajos de periodo. */
.filtro-fechas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filtro-fechas select { width: auto; }
.filtro-fecha { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--tinta-suave); }
.filtro-fecha input { width: auto; }
.acceso-marca img.marca-logo { height: 52px; }

/* Listados: casilla de cada fila y barra de acciones con lo elegido (core/masivas.py). */
.tabla .col-elegir { width: 1%; padding: 0 0 0 14px !important; }
.tabla .col-elegir input { min-width: 0; width: 17px; height: 17px; margin: 0; display: block; accent-color: var(--acento); cursor: pointer; }
@media (max-width: 720px) {
  .tabla-adaptable tr:has(> .col-elegir) { position: relative; }
  body.seleccionando .tabla-adaptable tr:has(> .col-elegir) { padding-right: 44px; }
  .tabla-adaptable td.col-elegir { position: absolute; right: 12px; top: 14px; width: auto; padding: 0 !important; }
}
.form-masivo { position: sticky; bottom: 12px; z-index: 30; }
.barra-masiva { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 12px 0; padding: 10px 14px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--acento);
  box-shadow: var(--sombra-flotante); }
.barra-masiva[hidden] { display: none; }
.barra-masiva-cuenta { font-size: .9rem; }
.barra-masiva.con-todos .barra-masiva-cuenta strong { color: var(--acento); }
.barra-masiva-acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.dialogo-accion { max-width: 520px; text-align: left; }
.dialogo-accion p { margin-bottom: 12px; }

/* Correo: elegir varios y actuar con todos. */
.correo-barra-masiva { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 10px; border-bottom: 1px solid var(--borde); }
.correo-barra-acciones { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.correo-barra-acciones[hidden] { display: none; }
.correo-item { display: flex; align-items: stretch; }
.correo-item > a { flex: 1; min-width: 0; }
.correo-elegir, .correo-elegir-todos { display: flex; align-items: center; padding: 0 4px 0 10px; cursor: pointer; }
.correo-elegir input, .correo-elegir-todos input { width: 16px; height: 16px; accent-color: var(--acento); }
.lista-bloqueados { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lista-bloqueados li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--borde-suave); }

/* Las casillas de elegir varios solo se ven con «Seleccionar» pulsado. */
body:not(.seleccionando) .col-elegir,
body:not(.seleccionando) .correo-elegir,
body:not(.seleccionando) .correo-barra-masiva,
body:not(.seleccionando) .form-masivo { display: none; }
[data-modo-seleccion][aria-pressed="true"] { border-color: var(--acento); color: var(--acento); }
.correo-lista-cuenta { display: flex; align-items: center; gap: 8px; }

/* Remitente: la dirección completa siempre a la vista, y aviso si las respuestas van a otra. */
.correo-de-direccion { color: var(--tinta); font-weight: 600; }
.correo-suplantacion { margin: 0 16px 10px; }

/* Comisiones: cifras a la derecha en las tablas y la lista de condiciones. */
.tabla th.numero, .tabla td.numero { text-align: right; white-space: nowrap; }
.lista-condiciones { margin: 0 0 8px; padding-left: 18px; display: grid; gap: 3px; }

/* Columna «Nota» de actuaciones, tareas y citas: icono con el principio de la nota al pasar el ratón. */
.indicador-nota { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--acento);
  background: var(--acento-suave); cursor: help; }
.detalle-titulo .indicador-nota { display: inline-grid; width: 20px; height: 20px; margin-left: 6px; border-radius: 6px; vertical-align: -4px; }

/* ¿Registrar este WhatsApp? */
.dialogo-whatsapp { max-width: 520px; text-align: left; }
.dialogo-whatsapp h2 { display: flex; align-items: center; gap: 8px; }
.dialogo-whatsapp h2 .icono { color: #1DA851; }
.dialogo-whatsapp p { margin-bottom: 12px; }

/* Copia de ensayo en el servidor (GO_ENSAYO=1). */
.aviso-ensayo { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 16px; font-size: .86rem;
  background: #FDF0DA; color: #7A4A00; border-bottom: 1px solid #F3C06B; }

/* ---------- Citas online (reservas): página pública y pantallas del despacho ---------- */
.publica { min-height: 100vh; display: flex; flex-direction: column; background: var(--fondo); }
.publica-cabecera { background: #fff; border-bottom: 3px solid #C63527; box-shadow: 0 1px 8px rgba(0,0,0,.06); padding: 16px 20px; display: flex; justify-content: center; }
.publica-logo { height: 46px; width: auto; }
.publica-contenido { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 24px 16px 40px; }
.publica-tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; box-shadow: var(--sombra); padding: 26px 26px 22px; }
.publica-tarjeta h1 { margin: 6px 0 6px; }
.publica-pie { text-align: center; color: var(--tinta-tenue); font-size: .82rem; padding: 18px 16px 26px; }
.cita-pasos { list-style: none; counter-reset: paso; margin: 18px 0 0; padding: 0; display: grid; gap: 22px; }
.cita-pasos > li { counter-increment: paso; padding-left: 40px; position: relative; }
.cita-pasos > li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--acento-suave); color: var(--acento); font-weight: 700; font-size: .9rem; }
.cita-pasos h2 { font-size: 1.02rem; margin: 3px 0 10px; }
.cita-pasos select { width: 100%; }
.cita-modalidades { display: flex; gap: 10px; flex-wrap: wrap; }
.cita-opcion { cursor: pointer; }
.cita-preferencia { margin-top: 16px; }
.cita-preferencia h3 { font-size: .95rem; margin: 0 0 8px; }
.cita-preferencia .campo { margin-top: 10px; max-width: 420px; }
.cita-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.cita-opcion span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1.5px solid var(--borde); border-radius: 12px; font-weight: 600; }
.cita-opcion input:checked + span { border-color: var(--acento); background: var(--acento-suave); color: var(--acento); }
.cita-opcion input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
.huecos-dias, .huecos-horas { display: flex; gap: 8px; flex-wrap: wrap; }
.huecos-dias { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--borde); }
.huecos-dias:empty, .huecos-horas:empty { display: none; }
.hueco { padding: 8px 12px; border: 1.5px solid var(--borde); border-radius: 10px; background: var(--superficie); color: var(--tinta);
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; }
.hueco:hover { border-color: var(--acento); }
.hueco.activo { background: var(--acento); border-color: var(--acento); color: var(--acento-tinta); }
.huecos-elegida { margin: 10px 0 0; font-weight: 600; color: var(--exito); }
.cita-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cita-privacidad { margin: 14px 0 10px; font-size: .84rem; color: var(--tinta-suave); }
.cita-privacidad summary { cursor: pointer; font-weight: 600; }
.cita-privacidad p { margin: 8px 0 0; line-height: 1.5; }
.cita-casilla { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; font-size: .9rem; cursor: pointer; }
.cita-casilla input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--acento); flex: none; }
.cita-formulario > .boton { margin-top: 20px; }
.boton-grande { padding: 12px 22px; font-size: 1rem; }
.cita-resumen { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 16px 0; }
.cita-resumen dt { color: var(--tinta-suave); font-weight: 600; }
.cita-resumen dd { margin: 0; }
.cita-acciones { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.cita-cambiar > summary, .cita-rechazar > summary { list-style: none; display: inline-flex; }
.cita-cambiar[open] > form, .cita-rechazar[open] > form { margin-top: 14px; display: grid; gap: 12px; }
.cita-ficha { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.cita-asunto { white-space: normal; line-height: 1.55; }
.pestanas-filtro { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
@media (max-width: 860px) { .cita-ficha { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .publica-tarjeta { padding: 20px 16px; } .cita-pasos > li { padding-left: 0; } .cita-pasos > li::before { position: static; display: inline-grid; margin-bottom: 6px; } }

/* ---------- Portal del cliente (templates/portal) ---------- */
.portal-cabecera { justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.portal-cabecera:not(:has(.portal-menu)) { justify-content: center; }
.portal-marca { display: inline-flex; }
.portal-menu { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.portal-menu form { margin: 0; }
.portal-menu a, .portal-menu button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; color: var(--tinta); font: inherit; font-weight: 600; text-decoration: none; background: none; border: 0; cursor: pointer; }
.portal-menu a:hover, .portal-menu button:hover { background: var(--superficie-2); }
.portal-menu a[aria-current="page"] { background: var(--acento-suave); color: var(--acento); }
.portal-contenido { display: grid; gap: 16px; align-content: start; }
.portal-contenido .publica-tarjeta h2 { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; margin: 0 0 12px; }
.portal-titulo { margin: 4px 0 0; }
.portal-estrecha { max-width: 440px; width: 100%; margin: 0 auto; }
.portal-pie-formulario { margin-top: 14px; text-align: center; }
.portal-aviso { text-decoration: none; }
.portal-migas { margin: 0; }
.portal-migas a { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.portal-lista { list-style: none; margin: 0; padding: 0; }
.portal-lista > li + li { border-top: 1px solid var(--borde-suave); }
.portal-fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 4px; color: inherit; text-decoration: none; }
a.portal-fila:hover { background: var(--superficie-2); border-radius: 10px; }
.portal-fila > span:first-child { display: grid; gap: 2px; min-width: 0; }
.portal-fila-fin { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.portal-citas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.portal-cita { display: flex; gap: 12px; align-items: flex-start; }
.portal-fecha { display: grid; place-items: center; min-width: 48px; padding: 6px 4px; border-radius: 10px; background: var(--acento-suave); color: var(--acento); font-size: .75rem; text-transform: uppercase; line-height: 1.1; }
.portal-fecha strong { font-size: 1.25rem; }
.portal-historial { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--acento-suave); display: grid; gap: 10px; }
.portal-historial li { display: grid; gap: 2px; position: relative; }
.portal-historial li::before { content: ""; position: absolute; left: -20px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--acento); }
.portal-mensajes { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.portal-mensajes li { padding: 10px 14px; border-radius: 14px; max-width: 85%; background: var(--superficie-2); }
.portal-mensajes li.del-cliente { justify-self: end; background: var(--acento-suave); }
.portal-mensajes li.sin-leer { box-shadow: inset 3px 0 0 var(--acento); }
.portal-mensaje-cabecera { margin-bottom: 4px; }
.portal-escribir { display: grid; gap: 8px; }
.portal-escribir label { font-weight: 600; }
.portal-escribir .boton { justify-self: start; }
.portal-cabecera-tarjeta { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.portal-permisos { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0; }
.portal-dar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.texto-compartido { color: var(--exito); }
.boton-activo { background: var(--exito-suave); color: var(--exito); border-color: transparent; }
@media (max-width: 560px) {
  .portal-menu span { display: none; }
  .portal-fila { flex-direction: column; align-items: stretch; }
  .portal-fila-fin { justify-content: flex-start; }
  .portal-mensajes li { max-width: 100%; }
}
.portal-estrecha form.campos { margin-top: 14px; }
.portal-estrecha .campo { max-width: none; width: 100%; }
.portal-estrecha .boton-grande { width: 100%; justify-content: center; }
.opcion.opcion-pequena { padding: 4px 10px; gap: 6px; font-size: .82rem; white-space: nowrap; }
.opcion.opcion-pequena input[type=checkbox] { width: 15px; height: 15px; min-width: 0; }

/* ---------- Base normativa (templates/normativa) ---------- */
.filtros-normativa { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.filtros-normativa .pestanas-filtro { margin: 0; }
.filtros-normativa select { width: auto; min-width: 200px; }
.lista-novedades { list-style: none; margin: 0; padding: 0; }
.novedad { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-bottom: 1px solid var(--borde-suave); }
.novedad > input[type=checkbox] { margin-top: 4px; }
.novedad-cuerpo { flex: 1; min-width: 0; display: grid; gap: 4px; }
.novedad-cabecera { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .82rem; }
.novedad-titulo { font-weight: 700; color: var(--tinta); text-decoration: none; }
.novedad-titulo:hover { color: var(--acento); }
.novedad-extracto, .novedad-preceptos, .novedad-notas { margin: 0; font-size: .86rem; color: var(--tinta-suave); }
.novedad-notas { color: var(--tinta); }
.novedad-acciones { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; flex: none; }
.novedad-relevante { box-shadow: inset 3px 0 0 var(--acento); }
.insignia-fuente { background: var(--superficie-2); color: var(--tinta); }
.texto-norma { line-height: 1.6; }
.diferencias del { background: #fde2df; color: #8a1f14; text-decoration: line-through; }
.diferencias ins { background: #dff3e5; color: #1e5c37; text-decoration: none; }
.paginacion { display: flex; gap: 12px; align-items: center; justify-content: center; }
@media (max-width: 720px) { .novedad { flex-wrap: wrap; } .novedad-acciones { width: 100%; } }