/* Tema «Marino»: barra lateral oscura, contenido con fondo de color suave (celeste, verde agua o gris).
   Se carga después de estilos.css y lo ajusta. */
/* Ajustes comunes a los temas ejecutivos: menos color de relleno, más jerarquía por tipografía. */
html { font-size: 14.5px; }
:root { --fuente: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; --radio: 4px; }
body { font-feature-settings: "tnum" 1, "cv11" 1; }
h1 { font-size: 1.45rem; font-weight: 600; letter-spacing: -0.015em; }
h2 { font-size: 1.05rem; font-weight: 600; }
.btn { font-weight: 500; box-shadow: none; }
.hoja { border-color: var(--renglon); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
.libro th { font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--tinta-suave); border-bottom: 1px solid var(--renglon-fuerte); padding-top: 0.7rem; padding-bottom: 0.7rem; }
.libro td { border-bottom-color: var(--renglon); padding-top: 0.6rem; padding-bottom: 0.6rem; }
.libro tbody tr:hover td { background: var(--fila-hover); }
/* Estados: punto de color + texto, sin fondo lleno */
.estado { background: none !important; padding: 0; font-weight: 500; font-size: 0.86rem; color: var(--tinta) !important; }
.estado::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 50%;
  margin-right: 0.4rem; vertical-align: 0.08rem; background: var(--tinta-suave); }
.estado.APROBADO::before, .estado.ABIERTO::before, .estado.AL_DIA::before { background: var(--ok); }
.estado.BORRADOR::before, .estado.POR_VENCER::before { background: var(--aviso); }
.estado.ANULADO::before, .estado.VENCIDO::before { background: var(--rojo); }
.estado.VENCIDO { color: var(--rojo) !important; }
.estado.CERRADO::before, .estado.PAGADO::before { background: #A0A7B1; }
.estado.PUBLICADO::before { background: var(--acento); }
/* Menú: sin relleno verde; marca a la izquierda */
.menu a { padding: 0.38rem 0.6rem; border-radius: 0; border-left: 2px solid transparent; }
.menu a.activo { background: none; color: var(--acento); border-left-color: var(--acento); font-weight: 600; }
.grupo-menu > summary { font-size: 0.72rem; letter-spacing: 0.06em; }
.grupo-menu.actual > summary { color: var(--tinta); }
.empresa-activa .rol { background: none; border: 1px solid var(--renglon-fuerte); color: var(--tinta-suave); }
.ir-admin { border-color: var(--renglon-fuerte); color: var(--tinta); font-weight: 500; }
.ir-admin:hover { background: var(--papel); color: var(--tinta); }
.mensajes li { background: var(--hoja); border: 1px solid var(--renglon); border-left: 3px solid var(--acento); }
.aviso { background: var(--hoja); border: 1px solid var(--renglon); border-left: 3px solid var(--aviso); }
.ambiente-prueba { background: none; border-color: var(--renglon-fuerte); color: var(--tinta-suave); font-weight: 600; }
.cifras .dato { font-weight: 600; }
input:focus, select:focus { box-shadow: 0 0 0 3px var(--foco); }

/* Marino: barra lateral oscura, contenido claro, acento azul marino. */
:root {
  --papel: #F3F4F6; --hoja: #FFFFFF; --renglon: #E5E7EB; --renglon-fuerte: #D1D5DB;
  --tinta: #111827; --tinta-suave: #6B7280;
  --verde: #1E3A5F; --verde-hover: #152B47; --verde-claro: #EBF0F6; --acento: #1E3A5F;
  --rojo: #B42318; --rojo-claro: #FDF1F0; --ambar: #8A5A00; --ambar-claro: #FBF4E6;
  --ok: #2F855A; --aviso: #D69E2E; --fila-hover: #F9FAFB; --foco: #DCE5F0;
}
/* Barra lateral: todos sus colores salen de variables, así cada tema la cambia entera (ver temas.css) */
:root {
  --barra: #18212F; --barra-texto: #C7CEDA; --barra-fuerte: #FFFFFF; --barra-suave: #8794A8; --barra-linea: #2A3547;
  --barra-control: #3A475B; --barra-hover: #2C3B52; --barra-activo: #263349; --barra-marca: #8FB3DE; --barra-enlace: #A9C1E0;
  --admin-fondo: #2F7F73; --admin-hover: #276B61; --admin-texto: #FFFFFF;
  --fuente-titulo: var(--fuente); --fuente-num: var(--fuente);
  --acento-claro: #8FB3DE; --boton-oscuro: #2F5D8F;
}
.lateral { background: var(--barra); border-right: 1px solid var(--barra); color: var(--barra-texto); }
.lateral .empresa-activa { border-bottom-color: var(--barra-linea); }
.lateral .empresa-activa .nombre { color: var(--barra-fuerte); }
.lateral .empresa-activa .ruc { color: var(--barra-suave); }
.lateral .empresa-activa .rol { border-color: var(--barra-control); color: var(--barra-texto); }
.lateral .empresa-activa .cambiar, .lateral .usuario a, .lateral .usuario button { color: var(--barra-enlace); }
/* Administración: botón de color propio, distinto del resto del menú */
.lateral .ir-admin { display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--admin-fondo); border: 1px solid var(--admin-fondo); color: var(--admin-texto); font-weight: 600; }
.lateral .ir-admin:hover { background: var(--admin-hover); border-color: var(--admin-hover); color: var(--admin-texto); }
.lateral .menu a { color: var(--barra-texto); }
.lateral .menu a:hover { background: var(--barra-hover); color: var(--barra-fuerte); }
.lateral .menu a.activo { color: var(--barra-fuerte); border-left-color: var(--barra-marca); background: var(--barra-activo); }
.lateral .grupo-menu { border-bottom-color: var(--barra-linea); }
.lateral .grupo-menu > summary { color: var(--barra-suave); }
.lateral .grupo-menu > summary:hover { background: var(--barra-hover); color: var(--barra-fuerte); }
.lateral .grupo-menu.actual > summary { color: var(--barra-fuerte); }
.lateral .menu-controles button { border-color: var(--barra-control); color: var(--barra-texto); }
.lateral .menu-controles button:hover:not(:disabled) { color: var(--barra-fuerte); border-color: var(--barra-marca); }
.lateral .usuario { border-top-color: var(--barra-linea); color: var(--barra-suave); }
/* Tipografía de títulos y de importes, según el tema */
h1, h2, .tarjeta-ingreso h1 { font-family: var(--fuente-titulo); }
.libro td.num, .libro th.num, .cifras .dato, .planilla input.num, .panel td.num { font-family: var(--fuente-num); }

/* ---------- Fondo de la zona de trabajo (lo elige cada usuario; por defecto, verde agua) ---------- */
html[data-fondo="celeste"] {
  --papel: #DCE6F0; --hoja: #EDF3F9; --renglon: #DCE3EB; --renglon-fuerte: #C2CDD9; --fila-hover: #CFDDEB;
}
html:not([data-fondo]), html[data-fondo="agua"] {
  --papel: #D7E9E5; --hoja: #EBF4F1; --renglon: #D6E3DF; --renglon-fuerte: #BCCFC9; --fila-hover: #C9E0D9;
}
html[data-fondo="blanco"] {
  --papel: #F7F8FA; --hoja: #FFFFFF; --renglon: #E6E8EC; --renglon-fuerte: #D3D7DE; --fila-hover: #E9EEF5;
}
html[data-fondo="marfil"] {
  --papel: #EFEBE3; --hoja: #FBF9F5; --renglon: #E6E0D4; --renglon-fuerte: #D2C9B8; --fila-hover: #E9E1D1;
}
html[data-fondo="arena"] {
  --papel: #E9E4DA; --hoja: #F6F3ED; --renglon: #E2DCD0; --renglon-fuerte: #CFC6B6; --fila-hover: #E3DCCD;
}
html[data-fondo="gris"] {
  --papel: #E0E3E8; --hoja: #EFF1F4; --renglon: #DCDFE5; --renglon-fuerte: #C4C9D1; --fila-hover: #D7DBE2;
}
/* Los campos y botones quedan blancos para que se lean bien sobre el fondo de color */
input[type=text], input[type=date], input[type=month], input[type=password], input[type=search], input[type=email],
input[type=number], select, textarea, .btn { background-color: var(--campo, #FFFFFF); }
.btn.principal { background-color: var(--verde); }
.planilla td input, .planilla td select { background-color: transparent; }
.planilla td input:focus, .planilla td select:focus { background-color: var(--campo, #FFFFFF); }
.libro tr.cabecera-asiento td { background: var(--papel); }

/* Selector de fondo, al pie del menú */
.elegir-fondo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.6rem; font-size: 0.8rem; }
.elegir-fondo span { width: 100%; }
.elegir-fondo button { width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 2px solid var(--barra-control); cursor: pointer; padding: 0;
  background: var(--muestra); }
.elegir-fondo .separador { width: 1px; height: 1rem; background: var(--barra-control); margin: 0 0.15rem; }
.elegir-fondo button[aria-pressed="true"] { border-color: var(--barra-marca); box-shadow: 0 0 0 2px var(--barra), 0 0 0 3px var(--barra-marca); }

/* Pantalla de ingreso y de elegir empresa */
.pantalla-ingreso { background: var(--barra); }

/* El verde queda solo para «está bien» (el azul es el color de la marca) */
.panel .control.ok .punto, .panel .avance .barra > span { background: var(--ok); }
.panel tr.fila-ok td.empresa { border-left-color: var(--ok); }
.estado-suma.ok { color: var(--ok); }

/* Al pasar el puntero: que se note bien sobre qué fila, botón u opción se está */
.libro tbody tr:hover td, .panel tbody tr:hover td { background: var(--fila-hover); }
.libro tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--acento); }
.libro tbody tr.cabecera-asiento:hover td { background: var(--fila-hover); }
.btn:hover { background-color: var(--fila-hover); border-color: var(--tinta-suave); }
.btn.principal:hover { background-color: var(--verde-hover); }
.cifras > a:hover, .renglon-flujo > summary:hover { background: var(--fila-hover); }

/* ---------- Fondos oscuros: «Azul noche» y «Grafito» (tipo modo incógnito) ---------- */
html[data-fondo="noche"], html[data-fondo="grafito"] {
  color-scheme: dark;
  --tinta: #E3E8EF; --tinta-suave: #97A3B6;
  --verde: var(--acento-claro); --verde-hover: #FFFFFF; --verde-claro: #1E2D44; --acento: var(--acento-claro);
  --rojo: #F08A7E; --rojo-claro: #3A2020; --ambar: #E2B65A; --ambar-claro: #3A3018;
  --ok: #5DC093; --aviso: #E2B65A; --foco: #2B4466;
}
html[data-fondo="noche"] {
  --papel: #0F1724; --hoja: #16202F; --renglon: #243146; --renglon-fuerte: #33425A; --fila-hover: #22304A;
  --campo: #0C131E; --barra: #0A101A; --barra-linea: #1C2636; --barra-activo: #1A2436; --barra-hover: #222E42;
}
html[data-fondo="grafito"] {
  --papel: #1B1C1F; --hoja: #232428; --renglon: #303237; --renglon-fuerte: #3D4047; --fila-hover: #2F3238;
  --campo: #17181B; --barra: #111214; --barra-texto: #C9CBD0; --barra-suave: #8A8D94; --barra-linea: #24262A;
  --barra-control: #3A3D44; --barra-hover: #2A2C31; --barra-activo: #24262B; --barra-enlace: #B9C4D4;
}
html[data-fondo="noche"] .btn.principal, html[data-fondo="grafito"] .btn.principal {
  background-color: var(--boton-oscuro); border-color: var(--boton-oscuro); color: #FFFFFF; }
html[data-fondo="noche"] .btn.principal:hover, html[data-fondo="grafito"] .btn.principal:hover { filter: brightness(1.15); background-color: var(--boton-oscuro); }
html[data-fondo="noche"] .hoja, html[data-fondo="grafito"] .hoja { box-shadow: none; }
html[data-fondo="noche"] .pestanas a span, html[data-fondo="grafito"] .pestanas a span { background: var(--renglon); }
html[data-fondo="noche"] .cabecera-dnit .grupo-id, html[data-fondo="grafito"] .cabecera-dnit .grupo-id { background: var(--renglon); }
html[data-fondo="noche"] .cabecera-dnit .banda th, html[data-fondo="noche"] .cabecera-dnit .banda td,
html[data-fondo="grafito"] .cabecera-dnit .banda th, html[data-fondo="grafito"] .cabecera-dnit .banda td { border-color: #4A5568; }
html[data-fondo="noche"] .planilla ::placeholder, html[data-fondo="grafito"] .planilla ::placeholder,
html[data-fondo="noche"] ::placeholder, html[data-fondo="grafito"] ::placeholder { color: #6B778A; }
html[data-fondo="noche"] .btn.peligro, html[data-fondo="grafito"] .btn.peligro { border-color: #7A3B35; }
html[data-fondo="noche"] .panel .punto, html[data-fondo="grafito"] .panel .punto { background: #5A6678; }
html[data-fondo="noche"] .lateral, html[data-fondo="grafito"] .lateral { border-right-color: var(--renglon); }
/* En los fondos oscuros la barra es siempre oscura, aunque el tema la use clara */
html[data-fondo="noche"] .lateral, html[data-fondo="grafito"] .lateral { --barra-fuerte: #FFFFFF; }

/* ---------- Pantalla «Apariencia» ---------- */
.titulo-seccion { margin-bottom: 0.9rem; }
.temas-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
.tarjeta-tema { background: var(--hoja); border: 1px solid var(--renglon-fuerte); border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column; transition: box-shadow .15s, border-color .15s; }
.tarjeta-tema:hover { box-shadow: 0 6px 20px rgba(15, 23, 42, 0.10); }
.tarjeta-tema.elegida { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento); }
.tarjeta-tema-pie { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; justify-content: space-between; }
.tarjeta-tema-pie h3 { font-size: 1.05rem; margin-bottom: 0.25rem; }
.tarjeta-tema-pie p { margin: 0; color: var(--tinta-suave); font-size: 0.9rem; }
.tarjeta-tema-pie .detalle { font-size: 0.78rem; margin-top: 0.35rem; }
.tarjeta-tema-pie .btn { align-self: flex-start; }
.muestra-tema { display: grid; grid-template-columns: 30% 1fr; height: 170px; background: var(--m-fondo);
  font-family: var(--m-letra), system-ui, sans-serif; border-bottom: 1px solid var(--renglon); }
.m-barra { background: var(--m-barra); padding: 10px 8px; display: flex; flex-direction: column; gap: 7px;
  border-right: 1px solid rgba(0, 0, 0, .06); }
.m-barra .m-admin { height: 12px; border-radius: 3px; background: var(--m-admin); margin-bottom: 4px; }
.m-barra i { height: 6px; border-radius: 3px; background: currentColor; opacity: .28; width: 80%;
  color: color-mix(in srgb, var(--m-barra) 30%, #9AA3AF); }
.m-barra i.corto { width: 55%; }
.m-barra i.activo { opacity: 1; background: var(--m-marca); width: 90%; }
.m-cuerpo { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.m-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.m-titulo { font-family: var(--m-titulo), Georgia, serif; font-weight: 600; font-size: 14px; color: #1F2630; white-space: nowrap; }
.m-boton { background: var(--m-acento); color: #fff; font-size: 9px; padding: 3px 8px; border-radius: 4px; }
.m-hoja { background: rgba(255, 255, 255, .7); border-radius: 5px; padding: 7px 8px; display: flex; flex-direction: column; gap: 4px;
  border-top: 2px solid var(--m-marca); }
.m-cifras { display: flex; gap: 10px; margin-bottom: 3px; }
.m-cifras small { display: block; font-size: 8px; color: #6B7280; }
.m-cifras b { font-size: 11px; color: #1F2630; font-family: var(--m-titulo), var(--m-letra), sans-serif; }
.m-fila { display: flex; justify-content: space-between; font-size: 9px; color: #374151; border-top: 1px solid #E5E7EB; padding-top: 3px; }
.m-fila b { font-weight: 500; }
.fondos-grilla { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.opcion-fondo { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.9rem 0.5rem 0.5rem; border-radius: 99px;
  border: 1px solid var(--renglon-fuerte); background: var(--campo, #FFFFFF); color: var(--tinta); font: inherit; cursor: pointer; }
.opcion-fondo .muestra { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); }
.opcion-fondo:hover { border-color: var(--tinta-suave); }
.opcion-fondo[aria-pressed="true"] { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento); font-weight: 600; }

/* ---------- Ilustración (toma los colores del tema) ---------- */
.ilustracion { display: block; width: 100%; height: auto;
  --il-linea: var(--tinta-suave); --il-papel: var(--campo, #FFFFFF); --il-acento: var(--acento);
  --il-tenue: color-mix(in srgb, var(--acento) 9%, transparent); }
.ilustracion-oscura { --il-linea: var(--barra-texto); --il-papel: color-mix(in srgb, var(--barra) 80%, #FFFFFF 8%);
  --il-acento: var(--barra-marca); --il-tenue: rgba(255, 255, 255, 0.05); }

/* ---------- Pantalla de ingreso: panel de marca + formulario ---------- */
.pantalla-ingreso { background: var(--barra); }
.ingreso { width: 100%; max-width: 920px; display: grid; grid-template-columns: 1.15fr 1fr; border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6); background: var(--hoja); }
.ingreso-marca { background: color-mix(in srgb, var(--barra) 88%, #FFFFFF 12%); color: var(--barra-texto); padding: 2.25rem 2.25rem 2rem;
  display: flex; flex-direction: column; gap: 1.25rem; }
.ingreso-marca h2 { font-family: var(--fuente-titulo); color: var(--barra-fuerte); font-size: 1.7rem; font-weight: 600; margin: 0.2rem 0 0.4rem; }
.ingreso-marca p { margin: 0; color: var(--barra-texto); }
.ingreso-sello { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--barra-marca) !important; font-weight: 600; }
.ingreso-marca .ilustracion { max-width: 380px; margin: 0 auto; }
.ingreso-puntos { list-style: none; padding: 0; margin: auto 0 0; display: grid; gap: 0.4rem; font-size: 0.88rem; }
.ingreso-puntos li { display: flex; gap: 0.55rem; align-items: baseline; }
.ingreso-puntos li::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--barra-marca); flex: 0 0 auto;
  transform: translateY(-0.1rem); }
.ingreso .tarjeta-ingreso { max-width: none; border: 0; border-radius: 0; box-shadow: none; padding: 2.75rem 2.5rem;
  display: flex; flex-direction: column; justify-content: center; }
.ingreso .tarjeta-ingreso h1 { font-size: 1.6rem; }
@media (max-width: 760px) {
  .ingreso { grid-template-columns: 1fr; }
  .ingreso-marca { padding: 1.5rem; }
  .ingreso-marca .ilustracion, .ingreso-puntos { display: none; }
  .ingreso .tarjeta-ingreso { padding: 1.75rem 1.5rem; }
}

/* ---------- Bienvenida en el inicio ---------- */
.bienvenida { display: grid; grid-template-columns: 1fr minmax(220px, 300px); align-items: center; gap: 1.5rem;
  padding: 1.5rem 1.75rem; margin-bottom: 1.5rem; position: relative; overflow: hidden;
  background: linear-gradient(105deg, var(--hoja) 55%, color-mix(in srgb, var(--acento) 7%, var(--hoja))); }
.bienvenida .saludo { color: var(--tinta-suave); font-size: 0.9rem; margin: 0 0 0.25rem; }
.bienvenida h1 { margin-bottom: 0.3rem; }
.bienvenida .sub { color: var(--tinta-suave); margin: 0 0 1rem; }
.bienvenida .ilustracion { max-height: 170px; }
@media (max-width: 860px) { .bienvenida { grid-template-columns: 1fr; } .bienvenida .ilustracion { display: none; } }

/* ---------- Tablero con gráficos ---------- */
:root { --serie-ingresos: #2a78d6; --serie-gastos: #eb6834; }
html[data-fondo="noche"], html[data-fondo="grafito"] { --serie-ingresos: #3987e5; --serie-gastos: #d95926; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tablero-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.tablero-grilla .ancho { grid-column: 1 / -1; }
.hoja + .tablero-grilla { margin-top: 0; }
.grafico { padding: 1.1rem 1.25rem 1rem; min-width: 0; }
.grafico-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.grafico-cabeza .sub { margin: 0.2rem 0 0; color: var(--tinta-suave); font-size: 0.86rem; }
.grafico-acciones { display: flex; gap: 1rem; align-items: center; }
.leyenda { list-style: none; display: flex; gap: 1rem; margin: 0; padding: 0; font-size: 0.85rem; color: var(--tinta-suave); }
.leyenda li { display: flex; align-items: center; gap: 0.4rem; }
.leyenda i, .tooltip-grafico i { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 3px; }
i.serie-ingresos { background: var(--serie-ingresos); } i.serie-gastos { background: var(--serie-gastos); }
.grafico-area svg { display: block; overflow: visible; font-family: var(--fuente); }
.grafico-area .grilla { stroke: var(--renglon); stroke-width: 1; }
.grafico-area .eje-cero { stroke: var(--tinta-suave); stroke-width: 1; }
.grafico-area .eje-texto { fill: var(--tinta-suave); font-size: 11px; }
.grafico-area .eje-texto.fuerte { fill: var(--tinta); font-size: 12px; }
.grafico-area .etiqueta-dato { fill: var(--tinta); font-size: 12px; font-weight: 600; font-family: var(--fuente-num); }
.grafico-area path.serie-ingresos, .grafico-area rect.serie-ingresos { fill: var(--serie-ingresos); }
.grafico-area path.serie-gastos, .grafico-area rect.serie-gastos { fill: var(--serie-gastos); }
/* Antigüedad: el atraso es un estado, por eso usa los colores de aviso (y el texto del tramo lo dice) */
.grafico-area rect.tramo-1_30, .grafico-area rect.tramo-31_60 { fill: var(--aviso); }
.grafico-area rect.tramo-61_90, .grafico-area rect.tramo-mas_90 { fill: var(--rojo); }
.cifras-tablero { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cifras-tablero > a { border-bottom: 1px solid var(--renglon); }
.cifras-tablero > a:nth-child(3n) { border-right: 0; }
.cifras-tablero > a:nth-last-child(-n+3) { border-bottom: 0; }
@media (max-width: 860px) { .cifras-tablero { grid-template-columns: 1fr; } .cifras-tablero > a { border-bottom: 1px solid var(--renglon) !important; } }
.grafico-area .pista { fill: var(--renglon); opacity: 0.5; }
.grafico-area .linea { fill: none; stroke: var(--serie-ingresos); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico-area .punto { fill: var(--serie-ingresos); stroke: var(--hoja); stroke-width: 2; }
.grafico-area .guia { stroke: var(--tinta-suave); stroke-width: 1; stroke-dasharray: 3 3; }
.grafico-area .zona { fill: transparent; }
.grafico-area .zona:hover { fill: color-mix(in srgb, var(--tinta) 5%, transparent); }
.tooltip-grafico { position: fixed; z-index: 50; pointer-events: none; background: var(--campo, #FFFFFF); color: var(--tinta);
  border: 1px solid var(--renglon-fuerte); border-radius: 6px; padding: 0.5rem 0.7rem; font-size: 0.85rem;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.3); display: grid; gap: 0.2rem; font-variant-numeric: tabular-nums; }
.tooltip-grafico[hidden] { display: none; }
.tooltip-grafico span { display: flex; align-items: center; gap: 0.4rem; }
.tooltip-grafico .tot { border-top: 1px solid var(--renglon); padding-top: 0.2rem; margin-top: 0.1rem; font-weight: 600; }
@media (max-width: 960px) { .tablero-grilla { grid-template-columns: 1fr; } }
.tablero-grilla > .hoja { margin: 0; }

/* ---------- Fotografías del sistema ---------- */
.ingreso-marca.con-foto { position: relative; isolation: isolate; color: #DCE6F2;
  background: var(--barra) var(--foto) center / cover no-repeat; min-height: 520px; }
.ingreso-marca.con-foto::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--barra) 92%, transparent) 0%,
    color-mix(in srgb, var(--barra) 55%, transparent) 45%, color-mix(in srgb, var(--barra) 30%, transparent) 70%,
    color-mix(in srgb, var(--barra) 88%, transparent) 100%); }
.ingreso-marca.con-foto h2 { color: #FFFFFF; }
.ingreso-marca.con-foto p, .ingreso-marca.con-foto li { color: #DCE6F2; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
@media (max-width: 760px) { .ingreso-marca.con-foto { min-height: 0; } }

/* Bienvenida del inicio: imagen atenuada a la derecha, fundida con la hoja */
.bienvenida.hoja { grid-template-columns: 1fr; min-height: 170px;
  background: linear-gradient(90deg, var(--hoja) 38%, color-mix(in srgb, var(--hoja) 72%, transparent) 62%,
    color-mix(in srgb, var(--hoja) 35%, transparent) 100%), url("img/fondo_inicio.webp") right center / 62% auto no-repeat, var(--hoja); }
@media (max-width: 860px) { .bienvenida.hoja { background: var(--hoja); } }

/* Menú lateral: imagen muy atenuada al pie, fundida con el color de la barra */
.lateral { background: linear-gradient(180deg, var(--barra) 40%, color-mix(in srgb, var(--barra) 80%, transparent) 75%,
    color-mix(in srgb, var(--barra) 68%, transparent) 100%), url("img/fondo_menu.webp") center bottom / 100% auto no-repeat, var(--barra); }
html[data-tema="nordico"]:not([data-fondo="noche"]):not([data-fondo="grafito"]) .lateral { background: var(--barra); }

/* Pantalla de ingreso: fondo de página atenuado */
.pantalla-ingreso { background: linear-gradient(color-mix(in srgb, var(--barra) 86%, transparent), color-mix(in srgb, var(--barra) 92%, transparent)),
  url("img/fondo_ingreso.webp") center / cover no-repeat, var(--barra); }

/* ---------- Importar desde Excel ---------- */
.importar-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-bottom: 1.25rem; }
.importar-grilla > .hoja { margin: 0; }
.importar-tarjeta { position: relative; display: flex; flex-direction: column; gap: 0.6rem; }
.importar-tarjeta h2 { margin: 0; padding-left: 2.4rem; }
.importar-tarjeta > .sub { margin: 0 0 0.25rem; color: var(--tinta-suave); }
.importar-tarjeta form { display: grid; gap: 0.75rem; margin-top: auto; }
.importar-paso { position: absolute; top: 1.35rem; left: 1.5rem; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--acento); color: #fff; font-weight: 700; font-size: 0.85rem; }
.cifras-importar { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.cifras-importar > .hoja { margin: 0; padding: 0.9rem 1.1rem; display: grid; gap: 0.15rem; }
.cifras-importar span { color: var(--tinta-suave); font-size: 0.85rem; }
.cifras-importar strong { font-family: var(--fuente-num, inherit); font-size: 1.5rem; }
.cifras-importar small { color: var(--tinta-suave); font-family: var(--fuente-num, inherit); }
.cifras-importar .con-error strong { color: var(--rojo); }
.aviso.error { border-left-color: var(--rojo); }
@media (max-width: 900px) { .importar-grilla { grid-template-columns: 1fr; } }
td .ayuda, p.ayuda, small.ayuda { display: block; font-size: 0.82rem; color: var(--tinta-suave); margin-top: 0.2rem; }

/* ---------- Punteo de cuentas ---------- */
.punteo-resumen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin: 0.5rem 0 0.5rem; }
.punteo-resumen > div { border: 1px solid var(--renglon); border-radius: 8px; padding: 0.6rem 0.85rem; display: grid; gap: 0.1rem; }
.punteo-resumen span, .punteo-resumen small { color: var(--tinta-suave); font-size: 0.82rem; }
.punteo-resumen strong { font-size: 1.25rem; font-family: var(--fuente-num, inherit); }
.libro.punteo th.marca, .libro.punteo td.marca { width: 2.2rem; text-align: center; }
.libro.punteo tr.elegida td { background: color-mix(in srgb, var(--acento) 12%, transparent); }
.libro.punteo tr.punteada td { color: var(--tinta-suave); }
.sello-punteo { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 0.05rem 0.45rem; border-radius: 4px;
  color: var(--verde); background: var(--verde-claro); letter-spacing: 0.03em; }
button.enlace { background: none; border: 0; padding: 0 0 0 0.35rem; color: var(--tinta-suave); text-decoration: underline; cursor: pointer; font: inherit; font-size: 0.8rem; }
.barra-punteo { position: sticky; bottom: 0.75rem; margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.25rem;
  padding: 0.7rem 1rem; border-radius: 10px; background: var(--hoja); border: 1px solid var(--renglon-fuerte);
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.45); z-index: 5; }
.barra-punteo input[type=text] { flex: 1 1 180px; min-width: 140px; }
#p-dif-caja strong { color: var(--rojo); }
#p-dif-caja.cuadra strong { color: var(--verde); }
@media (max-width: 760px) { .punteo-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media print { .barra-punteo, .libro.punteo .marca { display: none; } }
.chip-numero { font: inherit; font-size: 0.82rem; margin: 0.15rem 0.25rem 0.15rem 0; padding: 0.1rem 0.55rem; border-radius: 99px;
  border: 1px solid var(--renglon-fuerte); background: var(--hoja); color: var(--tinta); cursor: pointer; }
.chip-numero:hover { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 10%, var(--hoja)); }
.lista-correos { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.35rem; font-size: 0.9rem; }
@media (max-width: 760px) { .form-correo .fila-campos { grid-template-columns: 1fr !important; } }

/* ---------- Nombre del estudio ---------- */
.estudio-marca { padding: 0.9rem 1.15rem 0.2rem; font-family: var(--fuente-titulo); font-size: 0.95rem; font-weight: 600;
  color: var(--barra-marca); letter-spacing: 0.01em; line-height: 1.25; }
.sello-estudio { margin: 0 0 0.35rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--acento); }
.alta-estudio section { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--renglon); }
.alta-estudio h2 { position: relative; display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.5rem; }
.alta-estudio h2 .importar-paso { position: static; }
.alta-estudio .sub { margin: 0 0 0.6rem; color: var(--tinta-suave); }
.alta-estudio .casilla { display: flex; gap: 0.5rem; align-items: center; margin: 0.25rem 0; }

/* ---------- Buscador del menú ---------- */
.buscador-menu { position: relative; display: flex; align-items: center; margin: 0.6rem 0.75rem 0.5rem; color: var(--barra-suave); }
.buscador-menu svg { position: absolute; left: 0.6rem; pointer-events: none; }
.buscador-menu input { width: 100%; padding: 0.45rem 3.4rem 0.45rem 2rem; border-radius: 8px; font: inherit; font-size: 0.88rem;
  background: color-mix(in srgb, var(--barra-fuerte) 7%, transparent); color: var(--barra-fuerte);
  border: 1px solid var(--barra-control); outline: none; }
.buscador-menu input::placeholder { color: var(--barra-suave); }
.buscador-menu input:focus { border-color: var(--barra-marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--barra-marca) 25%, transparent); }
.buscador-menu input::-webkit-search-cancel-button { display: none; }
.buscador-menu kbd { position: absolute; right: 0.5rem; font: inherit; font-size: 0.68rem; padding: 0.05rem 0.35rem; border-radius: 4px;
  border: 1px solid var(--barra-control); color: var(--barra-suave); pointer-events: none; }
.buscador-menu input:focus + kbd { display: none; }
.resultados-menu { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: 0.3rem; list-style: none;
  background: var(--hoja); border: 1px solid var(--renglon-fuerte); border-radius: 10px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.55);
  max-height: 60vh; overflow: auto; }
.resultados-menu li { display: flex; flex-direction: column; gap: 0.05rem; padding: 0.45rem 0.6rem; border-radius: 6px; cursor: pointer; color: var(--tinta); }
.resultados-menu li[aria-selected="true"] { background: color-mix(in srgb, var(--acento) 14%, var(--hoja)); }
.resultados-menu .r-texto { font-size: 0.9rem; }
.resultados-menu .r-grupo { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-suave); }
.resultados-menu mark { background: color-mix(in srgb, var(--acento) 28%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }
.resultados-menu .sin-resultados { color: var(--tinta-suave); font-size: 0.85rem; cursor: default; }
html[data-tema="nordico"]:not([data-fondo="noche"]):not([data-fondo="grafito"]) .buscador-menu input { color: var(--tinta); background: #fff; }
@media print { .buscador-menu { display: none; } }

/* ---------- Formulario 120 ---------- */
.f120-rubro { margin-bottom: 1rem; }
.f120-rubro th.inciso, .f120-rubro td.inciso { width: 5.5rem; text-align: center; }
.f120-rubro td.sin-casilla { background: color-mix(in srgb, var(--renglon) 45%, transparent); }
.f120-rubro td.distinta { background: color-mix(in srgb, var(--rojo) 12%, transparent); }
.n-casilla { display: inline-block; min-width: 2.1rem; margin-right: 0.35rem; padding: 0 0.3rem; border-radius: 4px; font-size: 0.7rem;
  color: var(--tinta-suave); border: 1px solid var(--renglon-fuerte); text-align: center; }
nav.cifras > div { display: flex; flex-direction: column; padding: 1.1rem 1.25rem; border-right: 1px solid var(--renglon); }
nav.cifras > div:last-child { border-right: 0; }
.usuario .enlaces { flex-wrap: wrap; gap: 0.25rem 0.9rem; }