/* Fuentes del propio portal (antes venian de Google Fonts). Son las mismas,
   variables (todos los pesos en un archivo) y solo con el alfabeto latino, que
   cubre el castellano. Licencia SIL Open Font License: ver fuentes/LEAME.txt.
   La direccion es relativa a este archivo: anda igual con el prefijo de cada
   estudio. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fuentes/inter-latin-v20.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;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(fuentes/jetbrains-mono-latin-v24.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;
}

/* ============================================================ tokens */
:root {
  /* Paleta portada de la maqueta del estudio (Stitch): superficies con tinte
     azul, el azul de la marca como accion y los estados en la familia de
     Material. Los nombres quedan en castellano, como el resto del codigo. */
  --fondo: #f8f9ff;
  --panel: #ffffff;
  --borde: #f1f5f9;          /* divisor entre filas */
  --borde-fuerte: #e2e8f0;   /* contorno de tarjetas y campos */

  --texto: #0b1c30;
  --texto-medio: #565e74;
  --suave: #737686;
  --cifra: #0b1c30;

  --accion: #004ac6;
  --accion-fuerte: #003ea8;
  --accion-viva: #2563eb;    /* la opcion abierta del menu */
  --marca-arco: #1e3a8a;     /* el arco de arriba del logo y "Conta" */
  --azul-suave: #e5eeff;     /* relleno de chips y hover */
  --azul-campo: #eff4ff;     /* campos y cabecera de tabla */
  --azul-borde: #dce9ff;
  --azul-chip: #dae2fd;
  --azul-chip-texto: #003ea8;

  --neutro-bg: #eff4ff;
  --neutro-texto: #434655;

  --ok: #006058;       --ok-bg: #d7f2ee;
  --peligro: #ba1a1a;  --peligro-bg: #ffdad6;
  --alerta: #b54708;   --alerta-bg: #fffaeb;
  --info: #004ac6;     --info-bg: #e5eeff;

  --radio: 10px;             /* tarjetas */
  --radio-sm: 8px;           /* botones y campos */
  --radio-pastilla: 999px;
  --sombra: 0 1px 2px rgba(11, 28, 48, .04);
  --sombra-alta: 0 1px 8px rgba(11, 28, 48, .06);

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fila-hover: #f7f9ff;
  --cabecera-tabla: #eff4ff;
  --nav-texto: #434655;
  --nav-activo-bg: #2563eb;
  --nav-activo-texto: #ffffff;
  --th-texto: #565e74;
  --deshabilitado: #98a2b3;
  --info-borde: #dce9ff;
  --ok-borde: #b7e4de;
  --peligro-borde: #ffcdc7;
  --seleccion: #dbe1ff;

  /* Los ocho del calendario: no decoran, identifican cual impuesto es cual. */
  --imp-0: #175cd3;  --imp-1: #b54708;  --imp-2: #067647;  --imp-3: #b42318;
  --imp-4: #5925dc;  --imp-5: #0e7090;  --imp-6: #c11574;  --imp-7: #475467;

  --lateral: 240px;
  --alto-barra: 60px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.sin-sesion { background: var(--fondo); min-height: 100vh; }

/* Sin color, un enlace no se distingue del texto por el tono: lo distingue la
   linea. Va siempre puesta pero tenue, y se oscurece al pasar por encima. */
a {
  color: var(--texto);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--borde-fuerte);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration-color: var(--accion); }

/* Lo que ya se ve como algo apretable no necesita la linea. Una tarjeta
   entera que es un enlace tampoco: subrayaba el rotulo del KPI. */
.marca, .nav a, .usuario a, .boton, .pestanas a, .adjuntos a, .chip-doc a,
.tag a, .boton-menu, .login-marca a, a.card, a.card * { text-decoration: none; }
.marca:hover, .nav a:hover, .usuario a:hover, .boton:hover, .pestanas a:hover,
.adjuntos a:hover, .chip-doc a:hover { text-decoration: none; }

::selection { background: var(--seleccion); }

:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ====================================================== armazon
   Barra lateral fija a la izquierda y barra de titulo arriba del contenido,
   como en la maqueta del estudio. La barra de arriba dice donde esta uno,
   busca clientes y ofrece el alta: son las tres cosas que se hacen desde
   cualquier pantalla. */
body:not(.sin-sesion) {
  display: grid;
  grid-template-columns: var(--lateral) minmax(0, 1fr);
  min-height: 100vh;
}

/* minmax(0, 1fr) y este min-width son lo que impide que una tabla ancha
   estire la columna y desborde la pantalla. */
.principal { min-width: 0; }

.lateral {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--panel);
  border-right: 1px solid var(--borde-fuerte);
}

.marca {
  display: flex; align-items: center; gap: 10px;
  height: var(--alto-barra); flex: none;
  padding: 0 14px;
  border-bottom: 1px solid var(--borde);
  color: var(--texto);
}
.marca:hover { text-decoration: none; }
.marca-icono { width: 34px; height: 34px; flex: none; }
/* El nombre en dos colores, como en el logo: Conta en marino, Portal en azul. */
.marca-conta { color: var(--marca-arco); }
.marca-portal { color: #2563eb; }
.marca-nombre { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.marca-nombre b { font-size: 15px; font-weight: 600; }
.marca-nombre em {
  font-style: normal; font-size: 11px; font-weight: 500; color: var(--suave);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 10px;
}

.nav-titulo {
  color: var(--suave);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 0 12px;
  margin: 16px 0 6px;
}
.nav-titulo:first-child { margin-top: 2px; }

.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--nav-texto);
  font-size: 13px;
  padding: 8px 12px;
  border-radius: var(--radio-sm);
  transition: background .15s, color .15s;
}
.nav a:hover { color: var(--texto); background: var(--azul-suave); text-decoration: none; }

.nav a.activo {
  color: var(--nav-activo-texto);
  background: var(--nav-activo-bg);
  font-weight: 500;
  box-shadow: var(--sombra);
}

/* El icono acompana, no compite: vive al 65% y sube al 100% en la opcion
   abierta. */
.ico { width: 18px; height: 18px; flex: none; opacity: .65; }
.nav a:hover .ico { opacity: .9; }
.nav a.activo .ico { opacity: 1; }

/* --- el pie del menu --- */
.lateral-pie {
  flex: none;
  padding: 10px;
  border-top: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tema-fila button, .salir-fila {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; box-shadow: none;
  color: var(--nav-texto); font-size: 13px; font-weight: 400;
  padding: 8px 12px; border-radius: var(--radio-sm);
  text-align: left; cursor: pointer;
}
.tema-fila button:hover, .salir-fila:hover {
  background: var(--azul-suave); color: var(--texto); text-decoration: none;
}
.salir-fila:hover { background: var(--peligro-bg); color: var(--peligro); }

.usuario-chip {
  display: flex; align-items: center; gap: 10px;
  margin-top: 6px; padding: 8px 10px;
  border-radius: var(--radio-sm);
  background: var(--azul-campo);
  color: var(--texto); min-width: 0;
}
.usuario-chip:hover { background: var(--azul-suave); text-decoration: none; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--azul-borde); color: var(--accion);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
  flex: none;
}
.usuario-datos { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.usuario-datos b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-datos em {
  font-style: normal; font-size: 11px; color: var(--suave);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- barra de arriba --- */
.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--alto-barra);
  padding: 0 22px;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde-fuerte);
}

.rastro { display: flex; align-items: center; gap: 7px; color: var(--texto-medio); font-size: 13px; }
.rastro a { color: var(--texto-medio); display: flex; }
.rastro a:hover { color: var(--accion); }
.rastro .ico { opacity: .8; }
.rastro-actual { color: var(--accion); font-weight: 500; }

.buscador {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
  width: min(340px, 40vw);
}
.buscador .ico {
  position: absolute; left: 10px; width: 16px; height: 16px;
  color: var(--suave); pointer-events: none;
}
.buscador input {
  height: 36px; min-height: 0;
  padding-left: 32px;
  background: var(--azul-campo);
  border-color: var(--azul-borde);
  font-size: 13px;
}
.barra .boton { flex: none; }
.barra .mas { font-size: 15px; line-height: 1; }

/* --- el menu en el celular --- */
.tapa-menu { display: none; }
.boton-menu { display: none; padding: 8px 6px 8px 0; cursor: pointer; }
.boton-menu span {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--texto); margin: 4px 0;
}

/* ============================================================ layout */
/* El mismo tope que el facturador: con diez columnas, la tabla de impuestos
   vivia apretada en un monitor donde sobraba lugar. */
.contenido { max-width: 1680px; margin: 22px auto 10px; padding: 0 22px; }
.pie { text-align: center; color: var(--suave); font-size: 13px; padding: 34px 0; }

h1 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 4px; }
/* Rotulo de seccion: chico, en mayusculas y con una linea que lo separa de lo
   que viene abajo. */
h2 {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--suave); margin: 28px 0 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--borde-fuerte);
}
h3 { font-size: .95rem; font-weight: 600; margin: 0 0 .5rem; }
.subtitulo { color: var(--texto-medio); margin: 0 0 18px; font-size: 13px; }

.card {
  background: var(--panel);
  /* Borde de 1px y sombra casi nula: la tarjeta se apoya en la pagina, no
     flota sobre ella. Sombras marcadas hacen flotar cada bloque y aplanan la
     jerarquia. */
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.card.sin-padding { padding: 0; overflow: hidden; }

.grid { display: grid; gap: 14px; margin-bottom: 20px; }
/* Dentro de una grilla el espaciado lo da el gap, no el margen de cada tarjeta. */
.grid .card { margin-bottom: 0; }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* ============================================================ kpi
   El rotulo arriba con el icono en su recuadro, la cifra grande abajo y, si
   hay, un renglon que explica que se esta contando. La guia de color al
   costado izquierdo es informacion: dice si eso que se mide esta bien o mal. */
.kpi { position: relative; padding: 14px 16px 14px 18px; overflow: hidden; }

.kpi .rotulo {
  display: block;
  color: var(--suave); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding-right: 34px;
}

.kpi .icono {
  position: absolute;
  right: 14px; top: 12px;
  width: 28px; height: 28px;
  padding: 5px;
  border-radius: var(--radio-sm);
  background: var(--azul-suave);
  color: var(--accion);
  pointer-events: none;
}
.kpi.alerta .icono { background: var(--alerta-bg); color: var(--alerta); }
.kpi.peligro .icono { background: var(--peligro-bg); color: var(--peligro); }

.kpi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: transparent;
}
/* La barra al costado es para una sola cosa: lo vencido. Si la lleva tambien
   lo que esta pendiente, el tablero entero queda en alerta y deja de avisar
   nada. Lo pendiente se distingue por el recuadro del icono. */
.kpi.peligro::before { background: var(--peligro); }

.kpi .valor {
  font-size: 26px; font-weight: 700; line-height: 1.15;
  color: var(--cifra); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin-top: 8px;
}
.kpi .valor.importe { font-size: 22px; color: var(--accion); }
.kpi.peligro .valor { color: var(--peligro); }
.kpi .detalle-kpi { margin-top: 4px; font-size: 12px; color: var(--texto-medio); }

/* Las tres tarjetas de importes: compactas, para no comerse la pantalla. */
.grid.cols-3 .card { padding: 12px 14px; }
.grid.cols-3 .kpi .valor.importe { font-size: 20px; }
.grid.cols-3 .kpi .rotulo { font-size: 10.5px; }
.grid.cols-3 .kpi .detalle-kpi { margin-top: 4px; font-size: 11.5px; }

/* ============================================================ tablas */
.tabla-wrap { overflow: auto; margin: 0 -20px -18px; padding: 0 0 2px; }
.card.sin-padding .tabla-wrap { margin: 0; }

/* La cabecera se queda a la vista mientras se recorre la tabla. El sticky va
   contra este contenedor y no contra la pagina, y por eso el contenedor
   necesita un tope de altura: sin el nunca se desplaza por dentro y el sticky
   no hace nada. */
.tabla-wrap { max-height: 74vh; }
.tabla-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel);
}

/* En la tabla ancha del cliente, el tilde y el nombre del impuesto quedan
   fijos a la izquierda mientras se corre en horizontal: un importe sin su
   rotulo a la vista no dice de que es. Solo en .anclada, donde la primera
   columna es el tilde de seleccion y la segunda el nombre. */
.anclada thead th:nth-child(-n+2),
.anclada tbody td:nth-child(-n+2) {
  position: sticky;
  background: var(--panel);
  z-index: 3;
}
.anclada thead th:first-child,
.anclada tbody td:first-child { left: 0; width: 44px; min-width: 44px; }
.anclada thead th:nth-child(2),
.anclada tbody td:nth-child(2) { left: 44px; }
.anclada thead th:nth-child(-n+2) { z-index: 4; }
.anclada tbody tr:hover td:nth-child(-n+2) { background: var(--fila-hover); }

/* ====================================================== cierre de mes
   Los filtros van en una tira debajo del titulo de la seccion: cada uno es una
   pregunta del cierre y lleva cuantos quedan. */
.filtros-cierre {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 18px 12px;
  border-bottom: 1px solid var(--borde);
}
.filtros-cierre .tag { margin-left: 4px; }
.enlace-quieto { color: inherit; }

/* Las acciones que se repiten en cada fila viven en segundo plano y suben al
   pasar por encima. Cinco controles por fila, por cien filas, son quinientos
   objetos peleando con los numeros. Solo donde hay puntero: en una pantalla
   tactil, esconderlas las vuelve inalcanzables. */
@media (hover: hover) and (pointer: fine) {
  .acciones-fila .boton,
  .acciones-fila button,
  .acciones-fila .apagable {
    opacity: .35;
    transition: opacity .12s;
  }
  tbody tr:hover .acciones-fila .boton,
  tbody tr:hover .acciones-fila button,
  tbody tr:hover .acciones-fila .apagable,
  .acciones-fila:focus-within .boton,
  .acciones-fila:focus-within button,
  .acciones-fila:focus-within .apagable { opacity: 1; }
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  color: var(--th-texto); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  background: var(--cabecera-tabla);
  border-bottom: 1px solid var(--borde-fuerte);
  padding: 9px 12px; text-align: left; white-space: nowrap;
}
tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--borde);
  text-align: left; vertical-align: middle;
  font-size: 13px;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--fila-hover); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Un CUIT y un periodo son codigos, no palabras: en monoespaciada se comparan
   de un vistazo entre una fila y la siguiente. */
.cuit, .col-periodo, .mono { font-family: var(--mono); font-size: .8rem; }
/* El importe es dato, no resultado: se lee en negro aunque la fila este en
   rojo. El color queda para la pastilla que dice por que. */
td.num { color: var(--cifra); }
.col-interes .interes-monto { color: var(--alerta); font-weight: 600; }

/* Fechas, periodos y campos de importe: numeros del mismo ancho, para que las
   columnas se lean de arriba abajo sin bailar. */
.tabla-impuestos .col-vence,
.tabla-impuestos .col-periodo,
.tabla-impuestos input[name="importe"],
.datos td { font-variant-numeric: tabular-nums; }
.vacio { color: var(--suave); padding: 26px 4px; text-align: center; font-size: 14px; }

/* ============================================================ etiquetas */
.tag {
  display: inline-block;
  padding: 2px 9px; border-radius: var(--radio-pastilla);
  font-size: 11px; font-weight: 600; line-height: 1.6;
  background: var(--neutro-bg); color: var(--neutro-texto);
  border: 1px solid transparent;
  white-space: nowrap;
}

.tag.ok, .tag.pagado, .tag.emitido, .tag.procesado, .tag.activo,
.tag.vep_emitido, .tag.cumplido, .tag.presentada {
  background: var(--ok-bg); color: var(--ok);
}
.tag.urgente, .tag.vep_solicitado, .tag.nuevo, .tag.pendiente {
  background: var(--alerta-bg); color: var(--alerta);
}
.tag.vencido, .tag.rechazado, .tag.inactivo, .tag.cancelado {
  background: var(--peligro-bg); color: var(--peligro);
}
.tag.proximo, .tag.leido {
  background: var(--info-bg); color: var(--info);
}
/* Un impuesto que todavia no vencio no es una alerta ni una buena noticia: es
   el estado normal, y va en la pastilla neutra. */
.tag.no_vencido { background: var(--neutro-bg); color: var(--neutro-texto); }
.tag.normal { background: var(--neutro-bg); color: var(--suave); }
.tag.emitido { background: var(--ok-bg); color: var(--ok); }

/* ============================================================ formularios */
label { display: block; font-size: 12.5px; font-weight: 600; color: var(--texto-medio); margin-bottom: 5px; }

input, select, textarea {
  width: 100%; min-height: 36px; padding: 7px 11px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
  font-family: var(--sans); font-size: 13px;
  background: var(--panel); color: var(--texto);
  transition: border-color .15s, box-shadow .15s;
}
input:hover, select:hover, textarea:hover { border-color: var(--borde-fuerte); }
/* El foco siempre visible, con el anillo azul del sistema. */
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--info);
  outline-offset: 1px;
  border-color: var(--borde-fuerte);
}
input[type="file"] { padding: 7px 10px; background: var(--fondo); cursor: pointer; }
input[type="checkbox"] { width: auto; }
textarea { min-height: 88px; resize: vertical; }
::placeholder { color: var(--suave); }

.campo { margin-bottom: 14px; }
.fila { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

button, .boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--accion); border-radius: var(--radio); cursor: pointer;
  background: var(--accion); color: #fff;
  font-family: var(--sans); font-size: 13px; font-weight: 600; line-height: 1.4;
  padding: 8px 16px;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
button:hover, .boton:hover {
  background: var(--accion-fuerte); border-color: var(--accion-fuerte);
  color: #fff; text-decoration: none;
}
button[disabled], .boton[disabled] {
  background: var(--deshabilitado); border-color: var(--deshabilitado); cursor: not-allowed;
}

/* El secundario no es un segundo color de accion: es el mismo negro, que
   aparece recien al pasar por encima. */
/* El secundario de la maqueta: relleno azul suave y letra azul. */
button.sec, .boton.sec {
  background: var(--azul-suave); color: var(--accion); border-color: transparent;
}
button.sec:hover, .boton.sec:hover {
  background: var(--azul-borde); color: var(--accion-fuerte); border-color: transparent;
}

button.mini, .boton.mini { padding: 4px 10px; font-size: 12px; font-weight: 600; }

/* Botones que borran para siempre: rojos, para que no se confundan con el
   resto en un descuido. */
button.riesgo, .boton.riesgo {
  background: var(--peligro); color: #fff; border-color: transparent;
}
button.riesgo:hover, .boton.riesgo:hover { filter: brightness(.92); color: #fff; }
.acordeon.riesgo > summary { color: var(--peligro); }

/* Accion que se repite en todas las filas: texto de color, sin fondo, y recien
   al pasar el mouse toma cuerpo. Veinte botones solidos en una tabla pesan mas
   de lo que ayudan. */
.boton.fantasma {
  background: transparent;
  color: var(--texto-medio);
  border: 1px solid transparent;
  box-shadow: none;
  font-weight: 600;
}
.boton.fantasma:hover {
  background: var(--neutro-bg);
  border-color: var(--neutro-bg);
  color: var(--texto);
  text-decoration: none;
}

code, .mono {
  font-family: var(--mono);
  font-size: .8rem; background: var(--neutro-bg); color: var(--texto);
  padding: 2px 6px; border-radius: 4px;
}

/* ============================================================ encabezados */
/* El titulo de cada pantalla vive en su tarjeta, con las acciones a la
   derecha: es el encabezado de la maqueta del estudio. */
.encabezado {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
}
.encabezado h1 { margin: 0; }
.encabezado .subtitulo { margin: 4px 0 0; }
.encabezado > div:first-child { min-width: 0; flex: 1 1 380px; }
/* Las acciones siempre a la derecha del titulo, aunque el texto sea largo. */
.encabezado > :not(:first-child) { flex: none; }

.barra-filtros {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap;
}
.barra-filtros form { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }

.boton.excel::before {
  content: "\2913";
  font-size: 15px; line-height: 1;
}

/* ============================================================ acordeon */
details.acordeon {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--panel);
  box-shadow: var(--sombra);
  padding: 14px 18px;
  margin-bottom: 18px;
}
details.acordeon > summary {
  cursor: pointer; font-weight: 650; color: var(--texto);
  list-style: none; display: flex; align-items: center; gap: 8px;
}
details.acordeon > summary::-webkit-details-marker { display: none; }
details.acordeon > summary::before {
  content: "+"; width: 20px; height: 20px; border-radius: 5px;
  background: var(--neutro-bg); color: var(--texto-medio);
  display: grid; place-items: center; font-size: 15px; font-weight: 700;
}
details.acordeon[open] > summary::before { content: "\2212"; }

/* El alta principal de la pantalla se lee como una accion, no como un texto
   mas: el signo va en solido y el titulo un punto mas grande. */
details.acordeon.principal > summary { font-size: 15.5px; }
details.acordeon.principal > summary::before {
  background: var(--accion); color: #fff;
  width: 24px; height: 24px; font-size: 17px;
}
details.acordeon.principal:hover { box-shadow: var(--sombra-alta); }
details.acordeon > div { padding-top: 16px; margin-top: 14px; border-top: 1px solid var(--borde); }

/* ============================================================ avisos */
.aviso {
  background: var(--info-bg); border: 1px solid var(--info-borde); color: var(--info);
  padding: 11px 15px; border-radius: var(--radio); margin-bottom: 18px;
  font-size: 14px;
}
.aviso.error { background: var(--peligro-bg); border-color: var(--peligro-borde); color: var(--peligro); }
.aviso.ok { background: var(--ok-bg); border-color: var(--ok-borde); color: var(--ok); }

/* ============================================================ login */
.login-wrap { max-width: 400px; margin: 9vh auto 0; }
.login-marca { text-align: center; margin-bottom: 24px; }
.login-marca .icono { display: block; width: 60px; height: 60px; margin: 0 auto 10px; }
.login-marca .nombre { font-size: 24px; font-weight: 700; letter-spacing: -.5px; }
.login-marca .lead { color: var(--suave); font-size: 14px; margin-top: 6px; }
.login-wrap .card { padding: 26px 26px 22px; border-color: var(--borde-fuerte); }
.login-wrap button { width: 100%; margin-top: 8px; padding: 11px; }
.login-pie { text-align: center; color: var(--suave); font-size: 13px; margin-top: 18px; }

/* ============================================================ hilos */
.hilo { padding: 16px 0; border-bottom: 1px solid var(--borde); }
.hilo:last-child { border-bottom: 0; padding-bottom: 0; }
.hilo-cab { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.hilo-fecha { color: var(--suave); font-size: 13px; display: flex; align-items: center; gap: 8px; }

.mensaje-hilo {
  border-left: 3px solid var(--borde-fuerte);
  background: var(--fondo);
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  padding: 9px 13px; margin: 10px 0; color: var(--texto-medio); font-size: 14px;
}

.adjuntos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.adjuntos a {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-pastilla); padding: .2rem .6rem; font-size: .78rem;
  color: var(--neutro-texto);
}
.adjuntos a::before { content: "\1F4CE"; font-size: 12px; }
.adjuntos a:hover { border-color: var(--texto-medio); color: var(--texto-medio); text-decoration: none; }

.acciones-usuario { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
.acciones-usuario:last-child { margin-bottom: 0; }
.mail { font-size: 13.5px; }

/* ============================================================ responsive */
@media (max-width: 1000px) {
  .pestanas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pestanas::-webkit-scrollbar { height: 0; }
}

/* De aca para abajo no hay lugar para la columna: el menu se guarda fuera de
   la pantalla y aparece con el boton de la barra de arriba. */
@media (max-width: 900px) {
  body:not(.sin-sesion) { grid-template-columns: minmax(0, 1fr); }

  .boton-menu { display: block; }
  .buscador { display: none; }
  .barra { padding: 0 14px; }

  .lateral {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 262px;
    height: auto;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform .18s ease;
    box-shadow: 0 0 40px rgba(11, 28, 48, .35);
  }
  .abrir-menu:checked ~ .lateral { transform: none; }

  .abrir-menu:checked ~ .tapa-menu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(11, 28, 48, .45);
  }

  .contenido { padding: 0 16px; margin-top: 18px; }
  h1 { font-size: 20px; }
  .kpi .valor { font-size: 24px; }
}

@media (max-width: 700px) {
  /* Recien cuando no entran de verdad se apilan. */
  .grid.cols-3 { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .card { padding: 15px 16px; }
  .tabla-wrap { margin: 0 -16px -15px; }
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .login-wrap { margin-top: 5vh; }
}


/* --------------------------------------- pestanas de la ficha, como botones
   En la maqueta cada pestana es una pastilla: la abierta va en azul solido y
   las demas en blanco con su contorno. */
.pestanas {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 16px 0 18px;
}

.pestanas a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
  background: var(--panel);
  color: var(--texto-medio);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.pestanas a:hover { background: var(--azul-campo); color: var(--texto); text-decoration: none; }

.pestanas a.activa {
  background: var(--accion);
  border-color: var(--accion);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--sombra);
}

.globo {
  font-size: 11px; font-weight: 600;
  padding: 1px 7px; border-radius: var(--radio-pastilla);
  background: var(--neutro-bg); color: var(--neutro-texto);
}
.pestanas a.activa .globo { background: rgba(255, 255, 255, .22); color: #fff; }

.globo.peligro { background: var(--peligro-bg); color: var(--peligro); }
.globo.alerta  { background: var(--alerta-bg); color: var(--alerta); }
.globo.nuevo   { background: var(--ok-bg); color: var(--ok); }

/* Tabla clave/valor de la ficha del cliente. */
.datos { width: 100%; border-collapse: collapse; }
.datos th {
  text-align: left;
  font-weight: 500;
  color: var(--suave);
  padding: 7px 14px 7px 0;
  white-space: nowrap;
  width: 1%;
}
.datos td { padding: 7px 0; }
/* Los datos que se cargan a mano se editan en el lugar: el campo ocupa la
   celda y se ve como el texto que reemplaza, no como un formulario aparte. */
.datos td input { padding: 5px 9px; font-size: 13.5px; }

/* La columna del CUIT no se parte en dos renglones. */
td.cuit {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--texto-medio);
}

/* Etiquetas debajo del nombre del cliente, en vez de columnas propias. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}
.chips:empty { display: none; }


/* ------------------------------------------------- calendario mensual */
.mes { margin-top: 4px; }

.mes-cabecera,
.mes-semana {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.mes-cabecera {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--suave);
}
.mes-cabecera div { padding: 4px 8px; }

.mes-semana { margin-bottom: 6px; }

.mes-dia {
  background: var(--panel);
  border: 1px solid var(--borde-fuerte);
  border-radius: 8px;
  min-height: 96px;
  padding: 6px 7px 8px;
  /* Sin overflow oculto: la lista de clientes se sale de la celda. */
  position: relative;
}

.mes-dia.vacio-dia { background: transparent; border-color: transparent; }

.mes-dia.hoy {
  background: var(--neutro-bg);
  border-color: var(--texto-medio);
  box-shadow: inset 0 0 0 1px var(--texto-medio);
}
.mes-dia.hoy .mes-numero { color: var(--texto); font-weight: 700; }

.mes-numero {
  font-weight: 600;
  font-size: 13px;
  color: var(--texto-medio);
  margin-bottom: 5px;
}

.mes-evento {
  display: flex;
  align-items: center;
  gap: 6px;
  border-left: 3px solid currentColor;
  border-radius: 4px;
  padding: 3px 6px;
  margin-bottom: 4px;
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}
.mes-evento:hover { filter: brightness(.97); text-decoration: none; }
.mes-evento-titulo { flex: 1 1 auto; min-width: 0; }


.mes-evento-titulo {
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  align-items: center;
}

/* El numero de clientes del dia. Iba con `background: currentColor` y
   `color: var(--panel)`: como currentColor toma el color del propio elemento,
   el fondo y la letra terminaban siendo los dos blancos y el numero no se
   veia. Ahora la pastilla es blanca y el numero toma el color del impuesto. */
.mes-cuenta {
  background: var(--panel);
  border-radius: 9px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
}

/* Los clientes aparecen al pasar por encima, y quedan fijos al hacer clic. */
/* --------------------------------------------- panel del dia
   Al hacer clic en un renglon del calendario, los clientes se abren en un
   panel a la derecha. Antes salian en un globo flotante que tapaba los dias de
   abajo. Se abre con :target -- o sea, con la direccion -- asi que no hace
   falta javascript y el boton Atras del navegador lo cierra. */
.panel-dia {
  position: fixed;
  top: 0;
  right: 0;
  /* El alto va escrito: con top y bottom en cero, adentro de esta pagina el
     panel quedaba del alto de su cabecera. dvh es para el celular, donde vh
     cuenta tambien lo que tapa la barra del navegador. */
  height: 100vh;
  height: 100dvh;
  width: min(380px, 92vw);
  z-index: 50;
  /* El panel cerrado esta corrido a la derecha, fuera de la pantalla: sin
     recortarlo, la pagina entera quedaba 380px mas ancha. */
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.panel-dia:target { visibility: visible; pointer-events: auto; }

.tapa-panel {
  position: fixed;
  inset: 0;
  background: rgba(11, 28, 48, .35);
  opacity: 0;
  transition: opacity .18s;
}
.panel-dia:target .tapa-panel { opacity: 1; }

.panel-dia-caja {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-left: 1px solid var(--borde-fuerte);
  box-shadow: -8px 0 32px rgba(11, 28, 48, .12);
  transform: translateX(100%);
  transition: transform .18s ease;
}
.panel-dia:target .panel-dia-caja { transform: none; }

.panel-dia-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--borde);
}
.panel-dia-fecha { color: var(--suave); font-size: 12px; margin-top: 6px; }
.cerrar-panel {
  color: var(--suave); font-size: 22px; line-height: 1;
  padding: 0 4px; text-decoration: none;
}
.cerrar-panel:hover { color: var(--texto); }

.panel-dia-lista { overflow-y: auto; padding: 8px; }

.panel-cliente {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radio-sm);
  color: var(--texto);
  text-decoration: none;
}
.panel-cliente:hover { background: var(--azul-campo); text-decoration: none; }
.panel-cliente-datos { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.panel-cliente-datos b { font-size: 13px; font-weight: 600; }
.panel-cliente-datos em {
  font-style: normal; font-size: 11.5px; color: var(--suave);
}

.mes-pagado { color: var(--ok); font-weight: 600; }

/* Un color por impuesto. Los mismos tonos sirven de fondo en el calendario y
   de etiqueta en la referencia de arriba. */
/* Los ocho colores del calendario son la excepcion a la escala de grises: no
   decoran, identifican. Con quince impuestos en la misma grilla, el color es
   lo unico que deja reconocer cual es cual de un vistazo. */
.imp-0 { color: var(--imp-0); }
.imp-1 { color: var(--imp-1); }
.imp-2 { color: var(--imp-2); }
.imp-3 { color: var(--imp-3); }
.imp-4 { color: var(--imp-4); }
.imp-5 { color: var(--imp-5); }
.imp-6 { color: var(--imp-6); }
.imp-7 { color: var(--imp-7); }
/* El fondo de cada uno sale de su propio color: un solo lugar para tocar y
   funciona igual en el tema claro que en el oscuro. */
[class*="imp-"] { background: color-mix(in srgb, currentColor 12%, transparent); }
.imp-8 { color: #9a3412; background: #fdece3; }
.imp-9 { color: #1f5aa8; background: #e2ecfb; }

@media (max-width: 900px) {
  .mes-cabecera { display: none; }
  .mes-semana { grid-template-columns: 1fr; }
  .mes-dia.vacio-dia { display: none; }
  .mes-dia { min-height: 0; }
}

/* Interes resarcitorio: el monto y, debajo, el detalle. */
.interes-monto { color: var(--alerta); font-weight: 600; }

.interes {
  font-size: 11.5px;
  color: var(--suave);
  margin-top: 2px;
  line-height: 1.4;
}
.interes strong { color: var(--texto); }


/* ---------------------------------------- tabla de impuestos del cliente
   Es la tabla mas cargada del portal: diez columnas, un campo editable y el
   interes. Se aprieta el alto y se evita que los textos cortos se partan en
   tres renglones; si no entra a lo ancho, la tabla se desplaza de costado. */
.tabla-impuestos td,
.tabla-impuestos th { padding: 7px 10px; }

.tabla-impuestos .col-impuesto,
.tabla-impuestos .col-periodo,
.tabla-impuestos .col-vence,
.tabla-impuestos .col-importe,
.tabla-impuestos .col-interes { white-space: nowrap; }

.tabla-impuestos .col-impuesto { font-weight: 600; }

/* La observacion no empuja el renglon: una linea y puntos suspensivos. */
.tabla-impuestos .observacion {
  font-weight: 400;
  color: var(--suave);
  font-size: 11.5px;
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabla-impuestos .interes { margin-top: 0; }
.tabla-impuestos input[name="importe"] { padding: 5px 8px; }
.tabla-impuestos .tag { white-space: nowrap; }

/* -------------------------------------------------- desglose por conceptos
   El F.931 vence una sola vez pero se paga por partes. El desglose vive dentro
   de la celda del importe: cerrado se ve el total, abierto los seis conceptos
   con su importe y su tilde de pagado. */
.desglose > summary {
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.desglose > summary::-webkit-details-marker { display: none; }

.desglose > summary::after {
  content: " \25be";
  color: var(--texto-medio);
}

.desglose[open] > summary::after { content: " \25b4"; }

.tabla-conceptos {
  margin-top: 8px;
  border-collapse: collapse;
  font-size: 12.5px;
  text-align: left;
}

.tabla-conceptos th,
.tabla-conceptos td {
  padding: 4px 8px 4px 0;
  border: 0;
  font-weight: 400;
  white-space: nowrap;
  background: none;
}

.tabla-conceptos th { color: var(--suave); }

.tabla-conceptos input[name="importe"] {
  width: 110px;
  text-align: right;
  padding: 4px 7px;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.tabla-conceptos label {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 12px;
  color: var(--suave);
  font-weight: 400;
}

.tabla-conceptos input[type="checkbox"] { width: auto; margin: 0; }

/* En el portal del cliente el desglose va en un renglon propio debajo del
   impuesto, con mas lugar: ahi pide el VEP de cada concepto. */
.fila-desglose > td {
  background: var(--fondo);
  padding: 10px 18px 14px;
}

.tabla-conceptos.ancha { width: 100%; font-size: 13px; }
.tabla-conceptos.ancha th,
.tabla-conceptos.ancha td { padding: 6px 10px 6px 0; }

/* ------------------------------------------------ tablas apiladas en celular
   En el telefono una tabla de seis columnas obliga a arrastrar de costado para
   leer una fila entera. Abajo de 700px cada fila se convierte en una tarjeta y
   cada celda pasa a ser "rotulo: valor", con el rotulo tomado del encabezado
   (data-titulo). Solo cambia como se ve: el HTML sigue siendo una tabla.
   Los selectores usan ">" a proposito, para no desarmar una tabla anidada
   adentro de una celda (el desglose por conceptos). */
@media (max-width: 700px) {
  .apilable > thead { display: none; }

  .apilable,
  .apilable > tbody,
  .apilable > tbody > tr,
  .apilable > tbody > tr > td { display: block; width: auto; }

  .apilable > tbody > tr {
    padding: 12px 0 14px;
    border-bottom: 1px solid var(--borde);
  }

  .apilable > tbody > tr:last-child { border-bottom: 0; }

  .apilable > tbody > tr > td {
    border: 0;
    padding: 3px 16px;
    text-align: left;
    white-space: normal;
  }

  /* La primera celda es el titulo de la tarjeta: va sola y mas grande. */
  .apilable > tbody > tr > td:first-child {
    font-size: 15.5px;
    font-weight: 600;
    padding-bottom: 6px;
  }

  .apilable > tbody > tr > td[data-titulo]:not(:empty)::before {
    content: attr(data-titulo) ": ";
    color: var(--suave);
    font-size: 12.5px;
    font-weight: 600;
  }

  /* Los botones de la ultima columna quedan comodos para el dedo. */
  .apilable > tbody > tr > td .boton.mini,
  .apilable > tbody > tr > td button.mini {
    padding: 8px 14px;
    font-size: 13px;
  }

  .apilable > tbody > tr > td form { display: inline-block; margin-top: 6px; }

  /* El desglose por conceptos no se apila: es angosto y se lee igual. */
  .apilable > tbody > tr.fila-desglose > td { padding: 8px 10px; }
  .tabla-conceptos.ancha { font-size: 12.5px; }
}

/* ------------------------------------------- adjuntar archivos sin romper la fila
   El formulario de adjuntar vivia dentro de la celda: al abrirlo estiraba el
   renglon a media pantalla y dejaba los campos de dos centimetros de ancho.
   Ahora la celda solo tiene el archivo ya subido y un boton, y el formulario se
   abre en un cuadro con lugar de sobra. */
.col-docs { min-width: 130px; }

.chip-doc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 190px;
  margin: 0 6px 4px 0;
  padding: 3px 4px 3px 9px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pastilla);
  background: var(--neutro-bg);
  font-size: 12px;
  vertical-align: middle;
}

.chip-doc a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--texto);
  font-weight: 500;
}

.chip-doc form { display: inline-flex; margin: 0; }

.chip-doc button {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--suave);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.chip-doc button:hover { background: var(--panel); color: var(--peligro); }

/* --- el cuadro --- */
.cuadro {
  width: min(560px, 92vw);
  padding: 26px 28px 22px;
  border: 0;
  border-radius: 14px;
  background: var(--panel);
  color: var(--texto);
  box-shadow: 0 24px 60px rgba(20, 22, 26, .30);
}

.cuadro::backdrop { background: rgba(20, 22, 26, .45); }

.cuadro .tilde {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 0 0 12px;
  font-weight: 400;
}

.cuadro .tilde input { width: auto; margin-top: 3px; }

.cuadro .tilde em {
  display: block;
  color: var(--suave);
  font-size: 12.5px;
  font-style: normal;
  line-height: 1.45;
}

.pie-cuadro {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
}

/* El atajo elegido en la carga de importes, marcado como una pestana. */
.boton.mini.activo {
  background: var(--accion);
  border-color: var(--accion);
  color: #fff;
}

.boton.mini.activo .tag { background: rgba(255, 255, 255, .18); color: #fff; }

/* ================================================== tema oscuro
   Sigue lo que tenga configurado el sistema operativo. Los valores son los del
   facturador, con un detalle que se pasa por alto: sobre fondo oscuro el negro
   desaparece, asi que la accion principal vuelve al azul. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #0b1220;
    --panel: #131b2b;
    --borde: #223047;
    --borde-fuerte: #2c3a52;

    --texto: #e2e8f0;
    --texto-medio: #97a3b6;
    --suave: #64748b;
    --cifra: #f2f4f7;

    --accion: #2563eb;
    --accion-fuerte: #1d4ed8;
    --neutro-bg: rgba(255, 255, 255, .07);
    --neutro-texto: #cbd5e1;

    --ok: #6ce9a6;       --ok-bg: rgba(108, 233, 166, .10);
    --peligro: #fda29b;  --peligro-bg: rgba(253, 162, 155, .10);
    --alerta: #fec84b;   --alerta-bg: rgba(254, 200, 75, .10);
    --info: #84caff;     --info-bg: rgba(132, 202, 255, .10);

    --sombra: 0 1px 2px rgba(0, 0, 0, .35);
    --sombra-alta: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);

    --fila-hover: rgba(255, 255, 255, .03);
    --cabecera-tabla: rgba(255, 255, 255, .03);
    --nav-texto: #97a3b6;
    --nav-activo-bg: rgba(255, 255, 255, .09);
    --nav-activo-texto: #f8fafc;
    --th-texto: #7b879b;
    --deshabilitado: #475467;
    --info-borde: transparent;
    --ok-borde: transparent;
    --peligro-borde: transparent;
    --seleccion: rgba(132, 202, 255, .25);

    --imp-0: #84caff;  --imp-1: #fec84b;  --imp-2: #6ce9a6;  --imp-3: #fda29b;
    --imp-4: #bdb4fe;  --imp-5: #67e3f9;  --imp-6: #faa7e0;  --imp-7: #cbd5e1;
  }

  /* La marca invierte: sobre la barra clara era un cuadrado negro, y sobre la
     oscura tiene que ser claro para seguir viendose. */
  :root:not([data-theme="light"]) { --marca-arco: #ffffff; }
  :root:not([data-theme="light"]) input[type="file"] { background: var(--neutro-bg); }
}


/* Lo mismo, cuando la persona lo elige a mano en vez de dejarlo al sistema.
   Los dos bloques tienen que decir lo mismo: si se toca uno, se toca el otro. */
:root[data-theme="dark"] {
    --fondo: #0b1220;
    --panel: #131b2b;
    --borde: #223047;
    --borde-fuerte: #2c3a52;

    --texto: #e2e8f0;
    --texto-medio: #97a3b6;
    --suave: #64748b;
    --cifra: #f2f4f7;

    --accion: #2563eb;
    --accion-fuerte: #1d4ed8;
    --neutro-bg: rgba(255, 255, 255, .07);
    --neutro-texto: #cbd5e1;

    --ok: #6ce9a6;       --ok-bg: rgba(108, 233, 166, .10);
    --peligro: #fda29b;  --peligro-bg: rgba(253, 162, 155, .10);
    --alerta: #fec84b;   --alerta-bg: rgba(254, 200, 75, .10);
    --info: #84caff;     --info-bg: rgba(132, 202, 255, .10);

    --sombra: 0 1px 2px rgba(0, 0, 0, .35);
    --sombra-alta: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);

    --fila-hover: rgba(255, 255, 255, .03);
    --nav-texto: #97a3b6;
    --nav-activo-bg: rgba(255, 255, 255, .09);
    --nav-activo-texto: #f8fafc;
    --th-texto: #7b879b;
    --deshabilitado: #475467;
    --info-borde: transparent;
    --ok-borde: transparent;
    --peligro-borde: transparent;
    --seleccion: rgba(132, 202, 255, .25);

    --imp-0: #84caff;  --imp-1: #fec84b;  --imp-2: #6ce9a6;  --imp-3: #fda29b;
    --imp-4: #bdb4fe;  --imp-5: #67e3f9;  --imp-6: #faa7e0;  --imp-7: #cbd5e1;
}

:root[data-theme="dark"] { --marca-arco: #ffffff; }
:root[data-theme="dark"] input[type="file"] { background: var(--neutro-bg); }

/* El boton del tema, abajo de todo en la barra lateral. */
.tema { display: contents; }
.tema button {
  background: none;
  border: 1px solid var(--borde-fuerte);
  color: var(--texto-medio);
  padding: .25rem .45rem;
  border-radius: var(--radio-pastilla);
  flex: none;
}
.tema button:hover { background: var(--accion); border-color: var(--accion); color: #fff; }
.tema .ico { width: 16px; height: 16px; opacity: .8; }


/* =============================================== identidad del cliente
   El encabezado de la ficha es lo primero que se mira al entrar: en vez de un
   titulo y un renglon de texto suelto, una tarjeta con las iniciales, el nombre
   y los datos que definen al cliente -- CUIT y condicion -- como pastillas. */
.identidad {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
}

.identidad .inicial {
  width: 52px; height: 52px; flex: none;
  border-radius: var(--radio);
  background: var(--neutro-bg);
  color: var(--texto);
  display: grid; place-items: center;
  font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em;
}

.identidad-datos { min-width: 0; flex: 1 1 auto; }
.identidad-datos h1 { font-size: 1.55rem; margin: 0 0 8px; }
.identidad-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.identidad-contacto { margin: 8px 0 0; font-size: .85rem; }
.identidad .boton { flex: none; }

/* El color del impuesto, del tamano de un punto: identifica sin gritar, y es
   el mismo que en el calendario del mes. */
.punto {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 3px;
  margin-right: 8px;
  background: currentColor;
  vertical-align: 1px;
}


/* ------------------------------------------ la fila de un cliente
   Iniciales, razon social y casilla en la misma celda: en la maqueta cada
   cliente se reconoce por su recuadro antes que por el texto. */
.celda-cliente { display: flex; align-items: flex-start; gap: 10px; }
.inicial-chica {
  width: 34px; height: 34px; flex: none;
  border-radius: var(--radio-sm);
  background: var(--azul-borde); color: var(--accion);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
}
.celda-cliente .mail { color: var(--suave); font-size: 11.5px; }
.tag.chip-azul { background: var(--azul-chip); color: var(--azul-chip-texto); }


/* ============================================ cabecera de seccion
   Cuatro tablas seguidas, todas iguales, se leen como una sola cosa larga.
   Cada una arranca ahora con su cabecera adentro de la tarjeta: un icono en su
   recuadro, el titulo, una linea que explica que hay ahi y el numero de filas.
   El color del icono es el unico distinto entre secciones y dice de que va:
   azul lo que solo informa, ambar lo que espera una respuesta del estudio,
   rojo lo que ya esta atrasado. */
.seccion {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--borde);
}

.seccion-icono {
  width: 32px; height: 32px; flex: none;
  padding: 7px;
  border-radius: var(--radio-sm);
  background: var(--neutro-bg);
  color: var(--texto-medio);
}
.seccion-icono .ico { width: 18px; height: 18px; opacity: 1; }
.seccion-icono.azul { background: var(--azul-suave); color: var(--accion); }
.seccion-icono.ambar { background: var(--alerta-bg); color: var(--alerta); }
.seccion-icono.verde { background: var(--ok-bg); color: var(--ok); }
.seccion-icono.rojo { background: var(--peligro-bg); color: var(--peligro); }

.seccion-titulo { flex: 1 1 auto; min-width: 0; }
/* El h2 de siempre, pero adentro de la tarjeta: sin la linea de abajo ni el
   margen que lo separaba del bloque anterior. */
.seccion-titulo h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--texto);
}
.seccion-titulo p { margin: 3px 0 0; font-size: 12px; color: var(--texto-medio); }

.seccion-cuenta {
  flex: none;
  background: var(--neutro-bg);
  color: var(--neutro-texto);
  border-radius: var(--radio-pastilla);
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
}
.seccion-cuenta.alerta { background: var(--alerta-bg); color: var(--alerta); }
.seccion-cuenta.peligro { background: var(--peligro-bg); color: var(--peligro); }

/* Aclaracion chica al lado del rotulo de un campo. */
.apunte { color: var(--suave); font-weight: 400; font-size: 11px; text-transform: none; }

/* El pie de una tabla recortada: el enlace al listado completo. */
.pie-tabla {
  display: flex;
  justify-content: flex-end;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--borde);
}

/* ======================================================= ficha del cliente
   Los datos a la izquierda y, apiladas a la derecha, las tarjetas de lo
   impositivo y de los honorarios: sin eso la tarjeta del perfil quedaba sola
   al lado de un formulario tres veces mas largo. */
.ficha-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}
.ficha-columnas > .card { margin: 0; }
.ficha-lado { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ficha-lado > .card { margin: 0; }
.ficha-lado .datos th { width: 34%; white-space: normal; }
@media (max-width: 1000px) {
  .ficha-columnas { grid-template-columns: 1fr; }
}

/* Terminos, privacidad y contrato: texto largo, para leer. */
.legal { max-width: 860px; margin: 24px auto; }
.legal-texto { line-height: 1.65; }
.legal-texto h1 { margin-top: 0; }
.legal-texto h2 { font-size: 17px; margin: 26px 0 8px; }
.legal-texto ul { padding-left: 22px; }
.legal-texto li { margin: 4px 0; }
.legal-texto .destacado { background: var(--fondo); border-left: 3px solid var(--borde); padding: 10px 14px; }

/* Impuestos del cliente: una tarjeta por vencimiento.
   Era una tabla de ocho columnas, con el F.931 abierto en una tabla adentro de
   otra: en pantalla chica se iba de ancho y el importe quedaba perdido entre
   los estados y los enlaces. */
.tabla-venc > tbody > tr > td { vertical-align: middle; }
@media (min-width: 761px) {
  .tabla-venc > tbody > tr > td { padding-top: 12px; padding-bottom: 12px; }
}
.tabla-venc > tbody > tr.con-desglose > td { border-bottom: 0; padding-bottom: 4px; }
.tabla-venc > tbody > tr.fila-desglose > td { padding-top: 0; }
.tabla-venc > tbody > tr.venc-vencido > td:first-child { box-shadow: inset 3px 0 0 var(--peligro); }
.tabla-venc .sin-corte { white-space: nowrap; }
.tabla-venc .tag { margin: 1px 0; }
.tabla-venc .apunte { display: block; max-width: 150px; margin-left: auto; }

.venc-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 15px;
}

.venc-linea { color: var(--suave); font-size: 13px; margin-top: 3px; }
.venc-papeles { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

.venc-importe {
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.venc-interes { color: var(--suave); font-size: 12.5px; }
.venc-total { color: var(--alerta); font-weight: 600; font-size: 13px; }
.venc-accion .apunte { white-space: normal; display: block; max-width: 150px; }

.venc-conceptos > summary {
  cursor: pointer;
  color: var(--texto-medio);
  font-size: 13px;
  padding: 6px 0 0;
}

.venc-conceptos .tabla-conceptos { width: 100%; }
.venc-conceptos .tabla-conceptos td { padding: 5px 10px 5px 0; }

@media (max-width: 760px) {
  .tabla-venc .apunte { max-width: none; margin-left: 0; }
  .tabla-venc .venc-importe { display: inline; font-size: 15px; }
  .tabla-venc > tbody > tr.con-desglose { border-bottom: 0; }
}

/* Adjuntar varios archivos: una fila por archivo, con su tipo. */
.fila-adjuntar {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(190px, 1.2fr) minmax(170px, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

.fila-adjuntar + .fila-adjuntar > .campo > label { display: none; }
.fila-adjuntar .campo { margin: 0; }

@media (max-width: 700px) {
  .fila-adjuntar { grid-template-columns: 1fr; }
  .fila-adjuntar + .fila-adjuntar > .campo > label { display: block; }
}

/* Tareas del equipo */
.lista-tareas { display: flex; flex-direction: column; }
.tarea { display: flex; gap: 14px; align-items: flex-start; padding: 12px 18px;
  border-bottom: 1px solid var(--borde); }
.tarea:last-child { border-bottom: 0; }
.tarea-texto { flex: 1; min-width: 0; }
.tarea-titulo { font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tarea-detalle { color: var(--texto-medio); font-size: 13px; margin-top: 4px; white-space: pre-line; }
.tarea-hecha .tarea-titulo { text-decoration: line-through; color: var(--suave); font-weight: 500; }
.tarea-atrasada { border-left: 3px solid var(--peligro); }
.texto-peligro { color: var(--peligro); font-weight: 600; }
.tilde-tarea { width: 22px; height: 22px; min-width: 22px; padding: 0; border-radius: 6px;
  background: transparent; border: 2px solid var(--borde-fuerte, #cbd5e1); color: var(--ok, #16a34a);
  font-size: 14px; line-height: 1; margin-top: 1px; box-shadow: none; }
.tarea-hecha .tilde-tarea { background: var(--ok-bg, #dcfce7); border-color: transparent; }
.tilde-tarea:hover:not(:disabled) { border-color: var(--primario, #2563eb); }
.nueva-tarea { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.nueva-tarea .campo { margin: 0; }

/* ============================================================ cargas masivas */
/* Una tarjeta por carga, con el boton siempre abajo: las cuatro se leen
   parejas aunque el texto de cada una sea de distinto largo. */
.grid.cargas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.cargas .card { display: flex; flex-direction: column; }
.cargas .card h2 { margin: 0 0 6px; }
.cargas .card form { margin-top: auto; }
.cargas .tildes { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 14px; }
.cargas .tildes label {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-weight: 500; font-size: 13.5px; color: var(--texto);
}
.cargas .tildes input { width: auto; margin: 0; }
.acciones-carga { display: flex; gap: 10px; flex-wrap: wrap; }

/* Factura suelta con varios conceptos */
.conceptos .fila { margin-bottom: 0; }
.total-conceptos {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; margin: 4px 0 14px; padding: 10px 0; border-top: 1px dashed var(--borde);
}
.elegir-receptor { display: flex; gap: 22px; flex-wrap: wrap; margin: 0 0 14px; }
.elegir-receptor label {
  display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; font-size: 14px;
}
.elegir-receptor input { width: auto; margin: 0; }
#form-nueva h2 { margin: 18px 0 10px; }

/* El atributo hidden gana siempre: .fila, .boton y otros ponen su propio
   display y, sin esto, lo escondido desde JavaScript seguia a la vista. */
[hidden] { display: none !important; }

/* Secciones dentro de una pestana (la Ficha del cliente): mas chicas que las
   pestanas de arriba, para que se lea que cuelgan de ellas. */
.lista-usuarios .usuario-acceso {
  display: grid; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--borde);
}
.lista-usuarios .acciones-usuario { display: flex; gap: 6px; flex-wrap: wrap; }
.subpestanas { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; }
.subpestanas a {
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--texto-medio); background: var(--neutro-bg); text-decoration: none;
}
.subpestanas a:hover { color: var(--texto); text-decoration: none; }
.subpestanas a.activa { background: var(--azul-campo); color: var(--accion); }

.rango-listado { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0 0 0 8px; }
.rango-listado input[type="date"] { width: auto; padding: 4px 8px; font-size: 13px; }
.bajar-listado {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--borde);
  font-size: 13px; color: var(--texto-medio);
}

/* Cobro de una factura desde el listado: un formulario chico en la celda. */
.celda-cobro { min-width: 150px; }
.celda-cobro .apunte { white-space: nowrap; }
/* Va al lado de PDF y Enviar; el formulario se abre debajo, dentro de la
   fila (flotando lo cortaba el scroll de la tabla en el ultimo renglon). */
details.cobro-rapido { display: inline; }
details.cobro-rapido[open] { display: block; }
details.cobro-rapido > summary { list-style: none; cursor: pointer; display: inline-flex; }
details.cobro-rapido > summary::-webkit-details-marker { display: none; }
details.cobro-rapido form {
  display: grid; gap: 6px; padding: 12px; width: 220px; margin: 8px 0 0 auto;
  text-align: left; border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--panel); box-shadow: var(--sombra);
}
details.cobro-rapido[open] > summary { opacity: 1; }
.acciones-factura { white-space: nowrap; }
details.cobro-rapido label { margin: 0; font-size: 12px; display: grid; gap: 3px; }
details.cobro-rapido input, details.cobro-rapido select { padding: 5px 8px; font-size: 13px; }
.enlace-mini {
  background: none; border: 0; padding: 0 0 0 4px; color: var(--texto-medio);
  font-size: 11.5px; text-decoration: underline; cursor: pointer; box-shadow: none;
}

/* Tablero Mensual como planilla */
.barra-tablero {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--borde);
}
.tabla-tablero .celda-importe { min-width: 170px; }
.tabla-tablero .importe-tablero { width: 130px; text-align: right; padding: 5px 8px; font-size: 13px; }
.tabla-tablero .concepto-tablero {
  display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin: 0 0 3px;
  font-weight: 400; font-size: 11.5px; color: var(--texto-medio);
}
.tabla-tablero tr.pagada { opacity: .65; }
.tabla-tablero .celda-ddjj { min-width: 120px; }
.tabla-tablero .celda-ddjj details.cobro-rapido form { margin-left: 0; }
.importe-tablero.ok-campo { border-color: var(--ok, #067647); }
.importe-tablero.error-campo { border-color: var(--peligro); background: var(--peligro-bg); }
.tabla-tablero .desglose > summary { justify-content: flex-end; }
.tabla-tablero .desglose[open] > summary { margin-bottom: 8px; }
.tabla-tablero .concepto-tablero span { white-space: nowrap; }

/* Honorarios para facturar: concepto e importe editable en un renglon */
.honorario-fila { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.honorario-fila > span, .honorario-fila input[name="concepto"] { flex: 1; min-width: 0; }
.honorario-fila .importe-tablero { width: 130px; flex: none; text-align: right; padding: 5px 8px; font-size: 13px; }

/* Puesta en marcha */
.paso-puesta { align-items: flex-start; border-bottom: 1px solid var(--borde); }
.paso-puesta:last-child { border-bottom: 0; }
.paso-puesta .seccion-icono { font-weight: 700; }
.paso-puesta h2 .tag { margin-left: 6px; vertical-align: middle; }
.pasos-arca { margin: 6px 0 8px 18px; padding: 0; font-size: 14px; line-height: 1.6; }
.pie-lote { flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: flex-start; }
.pie-lote label, .pie-lote .total-lote { white-space: nowrap; }
.pie-lote .total-lote { margin-left: auto; }

/* Pestana VEP del cliente: el archivo para ARCA, debajo de Enviar VEP */
.vep-archivo-fila { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--borde); }

/* Ficha del cliente, Impuestos: el impuesto abre su cuadro y todo se guarda solo */
.abrir-ob { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit;
  cursor: pointer; text-align: left; display: inline-flex; align-items: center; gap: 0; }
.col-impuesto .abrir-ob { font-weight: 600; }
.col-impuesto .abrir-ob:hover { color: var(--accion); text-decoration: underline; }
.enlace-importe { gap: 6px; font-variant-numeric: tabular-nums; }
.enlace-importe:hover { color: var(--accion); }
.importe-auto { width: 132px; text-align: right; padding: 5px 8px; font-size: 13px; }
.importe-auto.ok-campo { border-color: var(--ok, #067647); }
.importe-auto.error-campo, .texto-auto.error-campo { border-color: var(--peligro); background: var(--peligro-bg); }
.col-archivos { white-space: nowrap; }
.col-archivos > * { vertical-align: middle; }
.chip-archivos { gap: 5px; font-size: 12.5px; padding: 3px 9px; border-radius: 999px;
  background: var(--azul-suave); color: var(--accion); font-weight: 600; margin-right: 4px; }
.chip-archivos .ico { width: 14px; height: 14px; }
.chip-archivos:hover { filter: brightness(0.96); }
.col-archivos .abrir-adjuntar { min-width: 28px; padding: 2px 8px; }
.cuadro-ob { width: min(640px, calc(100vw - 32px)); }
.cuadro-ob-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.cuadro-ob-cabeza h3 { margin: 0; display: flex; align-items: center; }
.cuadro-ob-cabeza .subtitulo { margin: 4px 0 0; }
.cuadro-ob h4 { margin: 16px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); }
.cuadro-ob .tabla-conceptos .importe-auto { width: 140px; }
.cuadro-ob .tabla-conceptos tfoot th { padding-top: 8px; border-top: 1px solid var(--borde); }
.cuadro-ob textarea { width: 100%; resize: vertical; }
.lista-archivos { list-style: none; margin: 0; padding: 0; }
.lista-archivos li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--borde); }
.lista-archivos li:last-child { border-bottom: 0; }
.lista-archivos a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-archivos form { margin: 0; }
.cuadro-ob .pie-cuadro { align-items: center; }
.cuadro-ob .estado-ob { margin-right: auto; }

/* ------------------------------------------------ ficha del cliente en el celular */
@media (max-width: 700px) {
  /* La cabecera: el nombre ocupa todo el ancho y el boton va abajo. */
  .identidad { flex-wrap: wrap; }
  .identidad-datos { flex-basis: calc(100% - 80px); }
  .identidad-datos h1 { font-size: 1.3rem; overflow-wrap: anywhere; }
  .identidad .boton { margin-left: 0; }

  /* La tabla de impuestos pasa a tarjetas: sin columnas fijas, el tilde y el
     impuesto en el mismo renglon. */
  .apilable.anclada td, .apilable.anclada th { position: static; left: auto; }
  .tabla-impuestos.apilable > tbody > tr > td:first-child {
    display: inline-block; width: auto; padding: 0 4px 6px 16px; vertical-align: middle; }
  .tabla-impuestos.apilable > tbody > tr > td.col-impuesto {
    display: inline-block; font-size: 15px; padding: 0 16px 6px 0; vertical-align: middle;
    white-space: normal; }
  .tabla-impuestos.apilable > tbody > tr > td.num { text-align: left; }
  .tabla-impuestos.apilable .importe-auto { width: 150px; }

  /* "Con los tildados": los botones bajan de renglon en vez de salirse. */
  #lote { flex-wrap: wrap; margin-left: 0 !important; }
}

/* En el celular las tablas no llevan scroll propio: con las filas hechas
   tarjetas, una caja que se desplaza adentro de la pagina dejaba la ultima
   cortada a la mitad. Se lee bajando la pagina, como todo lo demas. */
@media (max-width: 700px) {
  .tabla-wrap { max-height: none; }
}

/* Inicio del cliente: los dos grupos de "Para pagar" */
.subtitulo-tabla { margin: 0; padding: 12px 18px 4px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }
.subtitulo-tabla.peligro { color: var(--peligro); }

/* Panel: lo que esta vacio, en un solo renglon */
.al-dia { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  padding: 12px 18px; color: var(--texto-medio); font-size: 13.5px; }
.al-dia span:not(.tag) + span:not(.tag)::before { content: "\00b7"; margin-right: 18px; color: var(--suave); }

/* Ficha: localidad, CP y provincia en un renglon (en el celular se apilan) */
.campos-localidad { display: grid; grid-template-columns: minmax(0, 2fr) minmax(60px, 0.7fr) minmax(0, 1.6fr); gap: 6px; }
.campos-localidad input { width: 100%; min-width: 0; }
@media (max-width: 520px) { .campos-localidad { grid-template-columns: 1fr; } }

/* Registro de estudios */
.registro-wrap { max-width: 520px; }
.direccion-portal { display: flex; align-items: center; gap: 0; border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-sm, 8px); background: var(--panel); overflow: hidden; }
.direccion-portal span { padding: 0 12px 0 1px; color: var(--suave); font-size: 14px; white-space: nowrap; }
.direccion-portal input { border: 0; box-shadow: none; padding-right: 1px; text-align: right; min-width: 0; }
.tilde-linea { display: flex; align-items: center; gap: 7px; font-weight: 400; margin: 0; }
.tilde-linea input { width: auto; margin: 0; }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Calendario: la marca de regimen de informacion de cada impuesto */
.regimen-informacion { padding: 10px 18px; border-bottom: 1px solid var(--borde); font-size: 13px; }

/* Tareas: tilde y botones, y la pagina de cada tarea con su historial */
.barra-tareas { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
  padding: 10px 18px; border-bottom: 1px solid var(--borde); }
.tarea > input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.tarea > .boton { flex: none; align-self: center; }
.tarea-titulo a { color: inherit; }
.tarea-titulo a:hover { color: var(--accion); text-decoration: underline; }
.tarea-ultima-nota { font-size: 12.5px; color: var(--texto-medio); margin-top: 4px; font-style: italic; }
.historial-tarea { list-style: none; margin: 0; padding: 0; }
.historial-tarea li { padding: 10px 18px; border-bottom: 1px solid var(--borde); }
.historial-tarea li:last-child { border-bottom: 0; }
.historial-tarea li.es-cambio .historial-texto { color: var(--suave); font-size: 12.5px; }
.historial-tarea li.es-nota { border-left: 3px solid var(--accion); }
.historial-cab { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.historial-texto { margin-top: 3px; white-space: pre-line; font-size: 14px; }
.tarea-pagina { align-items: start; }

/* Tareas en columnas */
.tabla-tareas td { vertical-align: top; }
.tabla-tareas .col-tarea { min-width: 220px; }
.tabla-tareas .tarea-titulo { font-weight: 600; margin-right: 6px; }
.tabla-tareas .tarea-titulo:hover { color: var(--accion); text-decoration: underline; }
.tabla-tareas .col-nota { max-width: 320px; }
.tabla-tareas .tarea-ultima-nota { margin-top: 0; }
.tabla-tareas tr.tarea-hecha .tarea-titulo { text-decoration: line-through; color: var(--suave); font-weight: 500; }
.tabla-tareas tr.tarea-atrasada > td:first-child { box-shadow: inset 3px 0 0 var(--peligro); }
.tabla-tareas input[type="checkbox"] { width: 17px; height: 17px; margin: 0; }
@media (max-width: 700px) {
  .tabla-tareas > tbody > tr > td:first-child { display: inline-block; padding-right: 6px; vertical-align: top; }
  .tabla-tareas > tbody > tr > td.col-tarea { display: inline-block; width: calc(100% - 60px); padding-left: 0; }
  .tabla-tareas > tbody > tr > td.num { text-align: left; }
  .tabla-tareas .col-nota { max-width: none; }
}

/* Ingreso unico: elegir el estudio */
.opciones-estudio { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; }
.opciones-estudio .boton { justify-content: center; }

/* Cerrar sesion es un boton (POST), con el aspecto del enlace de antes */
.form-salir { margin: 0; }
.form-salir .salir-fila { width: 100%; background: none; border: 0; box-shadow: none; text-align: left;
  font: inherit; color: inherit; cursor: pointer; display: flex; align-items: center; gap: 10px; }