/* SP Contabilidad — estilos */
:root {
  --verde: #0f3d2e; --verde-2: #146c4d; --dorado: #b8862b; --fondo: #f3f5f8; --papel: #fff; --tinta: #1c2733; --suave: #66768a;
  --linea: #d9e0e8; --exito: #1f7a4d; --exito-f: #e2f4ea; --error: #a8322b; --error-f: #fbe6e3; --aviso: #8a5a00; --aviso-f: #fdf1d8;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 "Segoe UI", system-ui, sans-serif; color: var(--tinta); background: var(--fondo); }
a { color: var(--verde-2); }
.layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 100vh; }
.lateral { background: var(--verde); color: #dfe8f1; padding: 18px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; border-bottom: 1px solid rgba(255,255,255,.14); margin-bottom: 12px; }
.marca img { width: 42px; height: 42px; object-fit: contain; background: #fff; border-radius: 8px; padding: 2px; }
.marca strong { font-size: 14.5px; line-height: 1.25; color: #fff; }
.sucursal-activa { background: rgba(255,255,255,.08); border-radius: 8px; padding: 8px 10px; margin: 0 0 10px; font-size: 13px; }
.sucursal-activa a { color: #f2d9a0; }
.lateral h4 { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: #93b8a8; margin: 16px 8px 4px; }
.lateral a.enlace { display: block; padding: 7px 10px; color: #dfe8f1; text-decoration: none; border-radius: 6px; font-size: 14px; }
.lateral a.enlace:hover, .lateral a.enlace.activo { background: rgba(255,255,255,.13); color: #fff; }
.pie-lateral { margin-top: 18px; padding: 10px 8px 0; border-top: 1px solid rgba(255,255,255,.14); font-size: 13px; }
.pie-lateral form { margin: 6px 0 0; }
.marca-spsoft { display: flex; align-items: center; gap: 6px; margin-top: 12px; opacity: .55; font-size: 11px; }
.marca-spsoft img { width: 16px; height: 16px; object-fit: contain; }
.login-caja .marca-spsoft { justify-content: center; margin-top: 18px; }
.login-caja .marca-spsoft img { width: 16px; height: 16px; margin: 0; display: inline; }
.principal { padding: 22px 28px 60px; min-width: 0; }
.contenedor { max-width: 1100px; }
h1 { font-size: 24px; margin: 0 0 4px; color: var(--verde); }
h2 { font-size: 17px; margin: 22px 0 8px; color: var(--verde); }
.subtitulo, .ayuda { color: var(--suave); font-size: 13.5px; }
.encabezado { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; padding: 16px 18px; margin-bottom: 14px; }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
.dato { font-size: 26px; font-weight: 700; color: var(--verde); }
.dato.ingreso { color: var(--exito); }
.dato.egreso { color: var(--error); }
.mensaje { padding: 10px 14px; border-radius: 8px; margin-bottom: 10px; font-size: 14px; }
.mensaje-exito { background: var(--exito-f); border-left: 4px solid var(--exito); }
.mensaje-error { background: var(--error-f); border-left: 4px solid var(--error); }
table.tabla { width: 100%; border-collapse: collapse; background: var(--papel); border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; }
.tabla th, .tabla td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla th { background: #edf1f6; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla td.monto { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vacio { text-align: center; color: var(--suave); padding: 18px !important; }
.tabla-scroll { overflow-x: auto; }
.etiqueta { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: #e6edf5; color: var(--verde-2); margin: 0 4px 2px 0; }
.etiqueta.ok { background: var(--exito-f); color: var(--exito); }
.etiqueta.baja { background: #eceff3; color: var(--suave); text-decoration: line-through; }
.etiqueta.mal { background: #f7dedd; color: #a8322b; }
.etiqueta.dorada { background: #f6ead0; color: var(--aviso); }
button, .boton { font: inherit; cursor: pointer; border-radius: 7px; padding: 7px 14px; border: 1px solid var(--verde-2); background: var(--verde-2); color: #fff; text-decoration: none; display: inline-block; }
button.secundario, .boton.secundario { background: #fff; color: var(--verde-2); }
button.chico, .boton.chico { padding: 3px 9px; font-size: 13px; }
button.peligro { background: #fff; color: var(--error); border-color: var(--error); }
form.en-linea { display: inline; }
label { display: block; font-size: 13px; color: var(--suave); margin-bottom: 3px; }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=date], input[type=month], input[type=number], input[type=search], input[type=tel], select, textarea, input[type=file] {
  width: 100%; padding: 8px 10px; border: 1px solid #bcc7d3; border-radius: 6px; font: inherit; background: #fff; color: var(--tinta); }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--dorado); outline-offset: 1px; }
.rejilla-formulario { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; }
.rejilla-formulario .doble { grid-column: span 2; }
.rejilla-formulario .completa { grid-column: 1 / -1; }
.acciones-formulario { display: flex; gap: 10px; margin-top: 16px; }
.casilla { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tinta); }
.casilla input { width: auto; }
.grupo-privilegios { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linea); }
.grupo-privilegios:first-of-type { border-top: 0; margin-top: 8px; padding-top: 0; }
.grupo-privilegios h4 { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--suave); margin: 0 0 6px; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 12px; }
.filtros > div { min-width: 170px; }
.login-caja { max-width: 400px; margin: 9vh auto 0; background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; padding: 26px 26px 22px; }
.login-caja img { width: 84px; display: block; margin: 0 auto 8px; }
.login-caja h1 { text-align: center; }
.login-caja .subtitulo { text-align: center; margin-bottom: 16px; }
.login-caja button { width: 100%; margin-top: 12px; padding: 10px; }
.caja { padding: 12px 16px; border-radius: 8px; margin: 0 0 16px; border-left: 4px solid; }
.caja b:first-child { display: block; margin-bottom: 2px; }
.caja.nota { background: rgba(20, 108, 77, .10); border-color: #146c4d; }
.caja.aviso { background: rgba(201, 150, 43, .16); border-color: #c9962b; }
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .barra-movil { display: flex; }
  .lateral { display: none; position: static; height: auto; }
  .lateral.abierto { display: block; }
  .principal { padding: 14px; }
  .rejilla-formulario { grid-template-columns: 1fr 1fr; }
  button, .boton { min-height: 40px; }
  input:not([type]), input[type=text], input[type=email], input[type=password], input[type=date], input[type=month], input[type=number], input[type=search], input[type=tel], select, textarea { font-size: 16px; }
  .tabla th, .tabla td { padding: 8px; }
  .encabezado { flex-direction: column; }
}
@media (max-width: 560px) { .rejilla-formulario { grid-template-columns: 1fr; } .rejilla-formulario .doble { grid-column: auto; } }
.barra-movil { display: none; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 20; background: var(--verde); color: #fff; padding: 8px 14px; padding-top: max(8px, env(safe-area-inset-top)); }
@media (max-width: 900px) { .barra-movil { display: flex; } }
.barra-movil strong { flex: 1; font-size: 15px; }
.barra-movil button { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.3); }
[hidden] { display: none !important; }

/* Forma 3.2 y otros documentos oficiales */
.documento { border: 2px solid var(--tinta); }
.documento-cabecera { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; padding-bottom: 10px; border-bottom: 2px solid var(--tinta); margin-bottom: 10px; }
.documento-titulo { font-weight: 700; font-size: 14px; }
.documento-empresa { font-weight: 600; margin-top: 3px; }
.documento-logo { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--linea); border-radius: 6px; background: #fff; padding: 3px; }
.documento-iglesia { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; background: #f7f9fb; border: 1px solid var(--linea); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; font-size: 13.5px; }
.documento-mes { font-weight: 700; font-size: 18px; color: var(--verde); white-space: nowrap; }
.tabla-forma32 th:nth-child(3), .tabla-forma32 th:nth-child(6) { text-align: right; }
.documento-firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; text-align: center; margin-top: 28px; padding-top: 8px; font-size: 13.5px; }
.documento-linea { border-top: 1px solid var(--tinta); margin: 34px 10px 6px; }
.documento-firma-img { max-height: 46px; max-width: 100%; object-fit: contain; margin-bottom: 2px; }
.firma-preview { max-width: 220px; max-height: 100px; object-fit: contain; border: 1px solid var(--linea); border-radius: 8px; background: #fff; padding: 6px; display: block; margin-bottom: 10px; }
.logo-preview { width: 90px; height: 90px; object-fit: contain; border: 1px solid var(--linea); border-radius: 8px; background: #fff; padding: 4px; display: block; margin-bottom: 8px; }

/* Captura semanal — panel oscuro azul marino / dorado (a pedido explícito, distinto al verde del resto del sitio) */
:root { --navy: #0b1b34; --navy-2: #142a4d; --oro: #e0b64d; --oro-f: #fbead0; }
.panel-navy { background: var(--navy); color: #eef2f7; border-radius: 12px; padding: 14px 18px; margin-bottom: 12px; }
.panel-navy .oro { color: var(--oro); }
.panel-navy .filtros label { color: #b7c4d9; }
.panel-navy select, .panel-navy input { background: #fff; }
.barra-estado { border-radius: 8px; padding: 8px 14px; margin-bottom: 8px; font-weight: 600; font-size: 13.5px; }
.barra-estado.abierto { background: var(--exito); color: #fff; }
.barra-estado.cerrado { background: var(--error); color: #fff; }
.barra-estado.mixto { background: var(--aviso); color: #fff; }
.leyenda-cuentas { background: rgba(255,255,255,.08); border-radius: 8px; padding: 6px 10px; font-size: 12px; color: #cfd9e8; margin-top: 8px; }
.pildoras-semana { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.pildora { display: flex; flex-direction: column; gap: 2px; border-radius: 8px; padding: 7px 12px; min-width: 130px; text-decoration: none; font-size: 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #dfe8f5; }
.pildora strong { font-size: 13px; }
.pildora.vacia { opacity: .55; }
.pildora.activa { background: var(--oro); color: var(--navy); border-color: var(--oro); }
.pildora.activa strong { color: var(--navy); }
.totales-mes { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-top: 10px; }
.totales-mes > div { background: rgba(255,255,255,.06); border-radius: 8px; padding: 8px 10px; text-align: center; }
.totales-mes .monto-cuenta { font-size: 16px; font-weight: 700; color: #fff; }
.totales-mes .gran-total { background: var(--oro); color: var(--navy); }
.totales-mes .gran-total .monto-cuenta { color: var(--navy); }
.caja-nota-venta { background: var(--oro-f); border: 1px solid #e8cd8f; border-radius: 10px; padding: 12px 14px; }
.tabla-semanal thead th { background: var(--navy); color: #fff; }
.tabla-semanal tr.subtotal td { background: var(--oro-f); font-weight: 700; }

/* Balance y estado de resultados */
.rejilla-balance { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .rejilla-balance { grid-template-columns: 1fr; } }

/* Impresión: solo el documento, sin menú ni botones (ver .no-imprimir) */
@media print {
  .lateral, .barra-movil, .no-imprimir, .mensaje { display: none !important; }
  .layout { display: block; }
  .principal { padding: 0; }
  .contenedor { max-width: none; }
  .documento { border-color: #000; }
}

/* Ayuda y manuales (tecla F1) */
.tecla { display: inline-block; font: 600 11px/1 "Segoe UI", system-ui, sans-serif; padding: 3px 6px; border-radius: 5px; border: 1px solid rgba(0,0,0,.25); border-bottom-width: 2px; background: #fff; color: var(--tinta); vertical-align: 1px; }
.lateral .enlace-ayuda { margin-top: 14px; border: 1px dashed rgba(242,217,160,.45); color: #f2d9a0; }
.lateral .enlace-ayuda .tecla { float: right; margin-top: 2px; }
.boton-ayuda { position: fixed; right: 22px; bottom: 22px; z-index: 40; width: 46px; height: 46px; border-radius: 50%; padding: 0; font-size: 22px; font-weight: 700; line-height: 1;
  background: var(--verde); border-color: var(--verde); color: #fff; box-shadow: 0 6px 18px rgba(15,61,46,.35); }
.boton-ayuda:hover { background: var(--verde-2); }
body.con-ayuda .boton-ayuda { display: none; }
.panel-ayuda-fondo { position: fixed; inset: 0; z-index: 90; background: rgba(12,28,22,.28); }
.panel-ayuda { position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; width: min(520px, 100%); background: var(--papel); box-shadow: -12px 0 40px rgba(0,0,0,.22);
  display: flex; flex-direction: column; animation: entra-ayuda .18s ease-out; }
@keyframes entra-ayuda { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.panel-ayuda-cabeza { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--verde); color: #fff; }
.panel-ayuda-cabeza strong { flex: 1; font-size: 16px; }
.panel-ayuda-cabeza .boton, .panel-ayuda-cabeza button { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35); }
.panel-ayuda-cuerpo { flex: 1; overflow-y: auto; padding: 18px 22px 40px; }
.ayuda-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; align-items: start; }
.ayuda-indice-lateral { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; font-size: 14px; }
.ayuda-indice-lateral h4 { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); margin: 12px 0 4px; }
.ayuda-indice-lateral h4:first-child { margin-top: 0; }
.ayuda-indice-lateral a { display: block; padding: 4px 8px; border-radius: 6px; text-decoration: none; color: var(--tinta); }
.ayuda-indice-lateral a:hover { background: #eef3f0; }
.ayuda-indice-lateral a.activo { background: var(--verde); color: #fff; }
.ayuda-articulo { font-size: 15.5px; line-height: 1.6; max-width: 820px; }
.ayuda-articulo h2 { font-size: 19px; margin: 26px 0 8px; }
.ayuda-articulo h3 { font-size: 16px; margin: 18px 0 6px; color: var(--tinta); }
.ayuda-articulo p, .ayuda-articulo ul, .ayuda-articulo ol { margin: 0 0 12px; }
.ayuda-articulo ul, .ayuda-articulo ol { padding-left: 22px; }
.ayuda-articulo li { margin-bottom: 4px; }
.ayuda-articulo .resumen { font-size: 17px; color: var(--suave); margin-bottom: 16px; }
.ayuda-articulo ol.pasos { list-style: none; counter-reset: paso; padding-left: 0; }
.ayuda-articulo ol.pasos > li { counter-increment: paso; position: relative; padding: 2px 0 8px 42px; }
.ayuda-articulo ol.pasos > li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--verde); color: #fff;
  font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.ayuda-articulo figure { margin: 14px 0 18px; }
.ayuda-articulo figure img { display: block; max-width: 100%; height: auto; border: 1px solid var(--linea); border-radius: 10px; box-shadow: 0 4px 16px rgba(20,40,60,.08); }
.ayuda-articulo figcaption { font-size: 13px; color: var(--suave); margin-top: 6px; }
.ayuda-articulo dl { margin: 0 0 12px; }
.ayuda-articulo dt { font-weight: 700; color: var(--verde); }
.ayuda-articulo dd { margin: 0 0 8px 0; }
.ayuda-articulo .boton-muestra { display: inline-block; font-size: 13px; padding: 0 8px; border-radius: 5px; border: 1px solid var(--verde-2); color: var(--verde-2); background: #fff; white-space: nowrap; }
.ayuda-articulo .caja { margin: 12px 0 16px; }
.ayuda-pie { display: flex; justify-content: space-between; gap: 10px; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--linea); }
.ayuda-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 18px; }
.ayuda-tarjetas a { display: block; background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; padding: 12px 14px; text-decoration: none; color: var(--tinta); }
.ayuda-tarjetas a:hover { border-color: var(--verde-2); box-shadow: 0 4px 14px rgba(20,108,77,.12); }
.ayuda-tarjetas small { display: block; color: var(--suave); }
.manual-portada { text-align: center; padding: 60px 20px 40px; }
.manual-portada img { width: 90px; display: block; margin: 0 auto; }
.manual-portada h1 { font-size: 34px; margin-top: 14px; }
.manual-toc ol { columns: 2; column-gap: 40px; }
.manual-tema { margin-top: 34px; padding-top: 18px; border-top: 2px solid var(--verde); }
.manual-tema > .grupo { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dorado); font-weight: 700; }
.ayuda-video { margin: 4px 0 18px; }
.ayuda-video video { display: block; width: 100%; max-width: 720px; aspect-ratio: 16 / 9; background: #0f3d2e; border-radius: 10px; box-shadow: 0 4px 16px rgba(20,40,60,.12); }
.ayuda-video .ayuda { margin: 6px 0 0; }
.videoteca { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.videoteca-reproductor video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #0f3d2e; border-radius: 8px; }
.videoteca-datos { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
.videoteca-datos h2 { margin: 0 0 2px; }
.videoteca-datos p { margin: 0; }
.videoteca-lista { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 12px; }
.videoteca-lista h4 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--verde); margin: 14px 4px 6px; }
.videoteca-lista h4:first-child { margin-top: 2px; }
.videoteca-lista h4 small { text-transform: none; letter-spacing: 0; color: var(--suave); font-weight: 400; }
.video-item { display: flex; gap: 10px; align-items: center; padding: 6px; border-radius: 8px; text-decoration: none; color: var(--tinta); }
.video-item:hover { background: #eef3f0; }
.video-item.activo { background: var(--verde); color: #fff; }
.video-item.activo small { color: #d7e6df; }
.video-item img { width: 104px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; flex: none; background: #0f3d2e; }
.video-item strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.video-item small { display: block; font-size: 12px; color: var(--suave); margin-top: 2px; }
@media (max-width: 900px) {
  .videoteca { grid-template-columns: 1fr; }
  .videoteca-lista { position: static; max-height: none; }
  .ayuda-layout { grid-template-columns: 1fr; }
  .ayuda-indice-lateral { position: static; max-height: none; }
  .boton-ayuda { display: none; }
  .manual-toc ol { columns: 1; }
}
@media print {
  .boton-ayuda, .panel-ayuda, .panel-ayuda-fondo, .ayuda-indice-lateral, .ayuda-pie { display: none !important; }
  .ayuda-layout { display: block; }
  .manual-portada { page-break-after: always; min-height: 80vh; display: flex; flex-direction: column; justify-content: center; }
  .manual-portada, .manual-toc, .manual-tema { border: 0; box-shadow: none; padding-left: 0; padding-right: 0; }
  .manual-toc { page-break-after: always; }
  .manual-tema { page-break-before: always; border-top: 0; margin-top: 0; }
  .ayuda-articulo { max-width: none; font-size: 12pt; }
  .ayuda-articulo figure { page-break-inside: avoid; }
  .ayuda-articulo figure img { box-shadow: none; max-height: 11cm; width: auto; }
  a { color: inherit; text-decoration: none; }
}

/* Alertas del sistema (routes/alertas.py) */
.lateral .contador { float: right; min-width: 20px; padding: 0 6px; border-radius: 999px; background: #c0392b; color: #fff; font-size: 12px; font-weight: 700; text-align: center; }
.avisos-sistema h2 { margin-top: 0; }
.alerta { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; padding: 10px 14px; margin-bottom: 10px; border-radius: 8px; border-left: 5px solid; }
.alerta p { margin: 4px 0; font-size: 14px; }
.alerta small { color: var(--suave); }
.alerta .etiqueta { margin-right: 8px; }
.alerta-critico { background: #fbe4e2; border-color: #c0392b; }
.alerta-critico .etiqueta { background: #c0392b; color: #fff; }
.alerta-aviso { background: rgba(201, 150, 43, .14); border-color: #c9962b; }
.alerta-aviso .etiqueta { background: #c9962b; color: #fff; }
.alerta-info { background: #eef3f8; border-color: #7f97ad; }
@media (max-width: 560px) { .alerta { flex-direction: column; } }