/* Egasof - estilos. Pensado para lectura cómoda: letra grande, alto contraste, botones grandes. */
:root {
  --azul: #12304f; --azul-claro: #e0f3f1; --azul-medio: #1d4370; --marca: #19A7A0;
  --texto: #1a1a1a; --gris: #5a5a5a; --borde: #c8d0d8; --fondo: #f4f6f8; --blanco: #fff;
  --superficie: #fff; --superficie-2: #f7fbff; --linea: #eef3fa; --th-texto: #12304f; --total: #f3f3f3; --enlace: #0d6b75;
  --verde: #1e7b34; --rojo: #b3261e; --amarillo: #e3f4f2;
  --radio: 8px;
}
* { box-sizing: border-box; }
html { font-size: 18px; }
body { margin: 0; font-family: "Segoe UI", Roboto, Arial, sans-serif; color: var(--texto); background: var(--fondo); line-height: 1.45; }
a { color: var(--enlace); }
a:focus, button:focus, input:focus, select:focus, textarea:focus { outline: 3px solid #19a7a0; outline-offset: 2px; }

/* Barra superior */
.barra { background: var(--azul); border-bottom: 5px solid var(--marca); color: #fff; display: flex; align-items: center; gap: 1rem; padding: .5rem 1.25rem; flex-wrap: wrap; }
.barra .marca { font-weight: 700; font-size: 1.25rem; color: #fff; text-decoration: none; }
.barra .empresa { background: rgba(255,255,255,.15); padding: .25rem .75rem; border-radius: 99px; color: #fff; text-decoration: none; }
.barra nav { display: flex; gap: .25rem; flex-wrap: wrap; flex: 1; }
.barra nav a { color: #fff; text-decoration: none; padding: .4rem .75rem; border-radius: var(--radio); }
.barra nav a:hover, .barra nav a.activo { background: rgba(255,255,255,.2); }
.barra .usuario { display: flex; gap: .5rem; align-items: center; font-size: .9rem; }
.barra .usuario button { background: none; border: 1px solid rgba(255,255,255,.5); color: #fff; padding: .25rem .6rem; border-radius: var(--radio); cursor: pointer; font-size: .9rem; }
kbd { background: #fff; color: var(--azul); border-radius: 4px; padding: 0 .3rem; font-size: .75rem; font-weight: 700; margin-right: .2rem; }

main { max-width: 1400px; margin: 0 auto; padding: 1.25rem; }
h1 { font-size: 1.6rem; margin: .25rem 0 1rem; color: var(--azul); }
h2 { font-size: 1.25rem; color: var(--azul); margin: 1.5rem 0 .5rem; }

/* Tarjetas del inicio */
.menu-grande { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.menu-grande a { display: block; background: var(--superficie); border: 2px solid var(--borde); border-radius: 12px; padding: 1.25rem; text-decoration: none; color: var(--texto); }
.menu-grande a:hover, .menu-grande a:focus { border-color: var(--marca); background: var(--azul-claro); }
.menu-grande .t { font-size: 1.25rem; font-weight: 700; color: var(--azul); display: block; }
.menu-grande .d { color: var(--gris); font-size: .9rem; }
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.indicador { background: var(--superficie); border-radius: 12px; padding: 1rem 1.25rem; border-left: 6px solid var(--marca); }
.indicador .n { font-size: 1.6rem; font-weight: 700; }
.indicador .l { color: var(--gris); font-size: .9rem; }

/* Formularios y filtros */
.filtros { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; background: var(--superficie); padding: 1rem; border-radius: 12px; margin-bottom: 1rem; }
.filtros label { display: flex; flex-direction: column; font-size: .85rem; color: var(--gris); gap: .2rem; }
input, select, textarea { font: inherit; padding: .5rem .65rem; border: 2px solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--texto); }
input[type=search], input.buscar { min-width: 320px; font-size: 1.1rem; }
.btn { display: inline-block; font: inherit; padding: .55rem 1.1rem; border-radius: var(--radio); border: 2px solid var(--azul-medio); background: var(--azul-medio); color: #fff; text-decoration: none; cursor: pointer; font-weight: 600; }
.btn:hover { background: var(--azul); }
.btn.sec { background: var(--superficie); color: var(--azul-medio); }
.btn.sec:hover { background: var(--azul-claro); }
.acciones { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .9rem 1.25rem; background: var(--superficie); padding: 1.25rem; border-radius: 12px; }
.form-grid label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .2rem; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; }
.form-grid .ancho { grid-column: 1 / -1; }
.errorlist { color: var(--rojo); margin: .2rem 0; padding-left: 1rem; font-size: .85rem; }

/* Tablas */
.tabla-cont { background: var(--superficie); border-radius: 12px; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: .5rem .75rem; text-align: left; border-bottom: 1px solid #e3e7eb; vertical-align: top; }
th { background: var(--azul-claro); color: var(--th-texto); position: sticky; top: 0; font-size: .9rem; }
tbody tr:hover { background: var(--superficie-2); }
tbody tr.sel { background: var(--amarillo); }
td.n, th.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tr.total td { font-weight: 700; background: var(--total); border-top: 2px solid var(--marca); }
tr.saldo-ant td { font-style: italic; color: var(--gris); }
.neg { color: var(--rojo); }
.pos { color: var(--verde); }
.nivel-1 { font-weight: 700; } .nivel-2 { font-weight: 600; }

.ficha { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .5rem 1.5rem; background: var(--superficie); padding: 1rem 1.25rem; border-radius: 12px; margin-bottom: 1rem; }
.ficha div > span:first-child { display: block; font-size: .8rem; color: var(--gris); }
.saldo-grande { font-size: 1.5rem; font-weight: 700; }

.mensajes { list-style: none; padding: 0; }
.mensajes li { padding: .75rem 1rem; border-radius: var(--radio); margin-bottom: .5rem; background: #e6f4ea; border-left: 6px solid var(--verde); }
.mensajes li.error { background: #fdecea; border-color: var(--rojo); }
.aviso { background: var(--amarillo); padding: .6rem 1rem; border-radius: var(--radio); margin: .5rem 0; }
.paginacion { display: flex; gap: .5rem; align-items: center; justify-content: center; padding: 1rem; }
.chico { font-size: .85rem; color: var(--gris); }

/* Login */
.login { max-width: 420px; margin: 8vh auto; background: var(--superficie); padding: 2rem; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.login h1 { text-align: center; }
.login input { width: 100%; font-size: 1.15rem; margin-bottom: 1rem; }
.login .btn { width: 100%; font-size: 1.15rem; padding: .8rem; }

/* Impresión: solo el contenido */
@media print {
  html { font-size: 11pt; }
  .barra, .filtros, .acciones, .paginacion, .no-imprimir { display: none !important; }
  main { padding: 0; max-width: none; }
  body { background: #fff; }
  .tabla-cont, .ficha { border-radius: 0; }
  th { position: static; }
}

/* Logo en la barra (fondo blanco redondeado para que se vea sobre el azul) */
.barra .marca img { height: 44px; display: block; background: #fff; padding: 4px 8px; border-radius: 6px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.form-grid input[type=checkbox] { width: auto; transform: scale(1.3); }

/* Carga de comprobantes */
.caja { background: var(--superficie); border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.caja h2 { margin-top: 0; }
.grid-comp { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .8rem 1.1rem; align-items: end; }
.grid-comp label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .2rem; }
.grid-comp .ancho2 { grid-column: span 2; }
.grid-comp input:not([type=date]):not([style]), .grid-comp select { width: 100%; }
.fila-inputs { display: flex; gap: .4rem; align-items: center; }
input.grande { font-size: 1.15rem; width: 100%; }
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 1100px) { .dos-col { grid-template-columns: 1fr; } .grid-comp .ancho2 { grid-column: auto; } }
table.importes td { padding: .25rem .4rem; border: 0; }
table.importes input.m { width: 11rem; text-align: right; }
table.importes tr.total td { border-top: 2px solid var(--borde); padding-top: .6rem; font-weight: 700; }
table.imputacion input { width: 100%; }
table.imputacion input.monto { text-align: right; width: 10rem; }
input.m { text-align: right; }
.ac { position: relative; }
.ac-lista { display: none; position: absolute; z-index: 50; left: 0; right: 0; background: var(--superficie); border: 2px solid var(--marca);
  border-radius: 8px; max-height: 320px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.ac-item { padding: .45rem .7rem; cursor: pointer; }
.ac-item.sel, .ac-item:hover { background: var(--azul-claro); }
.ac-item.vacio { color: var(--gris); cursor: default; }
.chip { font: inherit; font-size: .85rem; background: var(--azul-claro); border: 1px solid var(--marca); border-radius: 99px; padding: .15rem .6rem; cursor: pointer; margin: .15rem; }
.ok { color: var(--verde); font-weight: 700; }
.barra-grabar { position: sticky; bottom: 0; background: var(--fondo); padding: .75rem 0; display: flex; gap: .75rem; flex-wrap: wrap; }
table.asiento td, table.asiento th { padding: .35rem .6rem; }

/* Menú desplegable tipo sistema viejo */
.menu-sup { display: flex; gap: .15rem; flex-wrap: wrap; flex: 1; }
.menu-sup > .m-item { position: relative; }
.menu-sup > .m-item > button { font: inherit; color: #fff; background: none; border: 0; padding: .45rem .8rem; border-radius: var(--radio); cursor: pointer; }
.menu-sup > .m-item > button:hover, .menu-sup > .m-item.abierto > button { background: rgba(255,255,255,.2); }
.m-desp { display: none; position: absolute; top: 100%; left: 0; z-index: 100; background: var(--superficie); min-width: 290px; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); padding: .4rem 0; border-top: 4px solid var(--marca); }
.m-item.abierto .m-desp { display: block; }
.m-desp a, .m-desp span { display: block; padding: .45rem 1rem; color: var(--texto); text-decoration: none; white-space: nowrap; }
.m-desp a:hover, .m-desp a.sel, .m-desp a:focus { background: var(--azul-claro); outline: none; }
.m-desp span.prox { color: #9a9a9a; }
.m-desp span.prox::after { content: " · próximamente"; font-size: .75rem; }
.m-desp .sep { border-top: 1px solid #e5e5e5; margin: .3rem 0; padding: 0; }
.m-desp .tit { font-size: .75rem; text-transform: uppercase; color: var(--gris); padding: .4rem 1rem .1rem; }
.barra .m-desp a, .barra .m-desp span { color: var(--texto); border-radius: 0; padding: .45rem 1rem; }
.barra .m-desp span.prox { color: #9a9a9a; }
.barra .m-desp a:hover, .barra .m-desp a:focus { background: var(--azul-claro); color: var(--texto); }
table.imputacion select { max-width: 15rem; }
table.imputacion input[type=date] { width: 10.5rem; }
.dos-col > .caja { min-width: 0; overflow-x: auto; }

/* ---- reportes contables (centros de costo, cuadros anuales, cierres) */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; padding: .8rem 1rem; margin-bottom: 1rem; }
.tarjeta label { display: block; margin: .4rem 0; }
.tarjeta input:not([type=hidden]) { display: block; }
tr.subtitulo td { background: var(--linea); padding-top: .5rem; }
table.cuadro td, table.cuadro th { white-space: nowrap; font-size: .85rem; padding: .25rem .4rem; }
details { margin: .6rem 0; } details summary { cursor: pointer; font-weight: 600; padding: .3rem 0; }
@media print { h2.salto { page-break-before: auto; } .filtros, .menu-sup, .barra { display: none !important; } }
ul.lista-opciones { list-style: none; padding: 0; margin: 0; }
ul.lista-opciones li { padding: .35rem .4rem; border-bottom: 1px solid #eef0f3; display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
ul.lista-opciones li.activo { background: var(--linea); font-weight: 600; }
pre.txt { font-size: .75rem; overflow-x: auto; background: var(--superficie-2); padding: .5rem; }
/* menú desplegable de varias columnas (como las pantallas de menú del sistema viejo) */
.m-desp.ancho { min-width: 560px; }
.m-item.abierto .m-desp.ancho { display: grid; grid-template-columns: 1fr 1fr; }
.m-item.abierto .m-desp.ancho.tres { grid-template-columns: 1fr 1fr 1fr; min-width: 860px; }
.m-desp.ancho .col { padding: .2rem 0; border-right: 1px solid #f0f0f0; }
.m-desp.ancho .col:last-child { border-right: 0; }
.menu-sup > .m-item:nth-child(4) .m-desp.ancho.tres { left: auto; right: auto; }
@media (max-width: 900px) { .m-item.abierto .m-desp.ancho, .m-item.abierto .m-desp.ancho.tres { grid-template-columns: 1fr; min-width: 300px; } }
.tarjeta h2 { margin-top: 0; } .tarjeta > p:last-child { margin-bottom: 0; }
.m-desp span.bloq { color: #9a9a9a; }
.checks ul { list-style: none; padding: 0; margin: .3rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .2rem .8rem; }
.checks label { font-weight: normal; display: flex; gap: .4rem; align-items: center; }
.checks > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .2rem .8rem; } .checks > div > div label { font-weight: normal; display: flex; gap: .4rem; align-items: center; }

/* ================= Temas (Mi apariencia) ================= */
html[data-tema="oscuro"] { --fondo: #16181c; --superficie: #22252b; --superficie-2: #2b2f36; --linea: #2a2f38; --texto: #e9e9e9;
  --gris: #a9b0b8; --borde: #3d424b; --azul-claro: #1d3a3a; --th-texto: #bfeee9; --total: #2b2f36; --amarillo: #1e4240; --enlace: #5fd3cb; color-scheme: dark; }
html[data-tema="oscuro"] .mensajes li { background: #1f3326; } html[data-tema="oscuro"] .mensajes li.error { background: #3a1f1f; }
html[data-tema="oscuro"] .barra .marca img { background: #fff; }
html[data-tema="contraste"] { --fondo: #ffffff; --superficie: #ffffff; --superficie-2: #fff3b0; --linea: #ffe58a; --texto: #000; --gris: #222;
  --borde: #000; --azul-claro: #ffd84d; --th-texto: #000; --total: #ffe58a; --enlace: #0033a0; --marca: #c98a00; }
html[data-tema="contraste"] input, html[data-tema="contraste"] select, html[data-tema="contraste"] textarea { border-width: 3px; }
html[data-tema="contraste"] a { text-decoration: underline; font-weight: 600; }
html[data-tema="contraste"] td, html[data-tema="contraste"] th { border-bottom: 1px solid #000; }
html[data-tema="calido"] { --fondo: #f6efe2; --superficie: #fffaf0; --superficie-2: #fbf1dc; --linea: #f3e3bf; --azul-claro: #f1dfb4;
  --borde: #d9c9a8; --total: #f3e7cc; --texto: #2a2216; }
html[data-tema="azul"] { --fondo: #eef3f9; --azul: #1f3b5c; --azul-medio: #2c5282; --azul-claro: #dbe8f6; --marca: #3b82c4; --enlace: #1f5fa3;
  --linea: #e3edf8; --superficie-2: #f2f7fd; --th-texto: #14304f; }
html.ancho-completo main { max-width: none; }

/* ================= Ruta (dónde estoy) y Volver ================= */
.ruta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .45rem 1.25rem; background: var(--superficie);
  border-bottom: 1px solid var(--borde); font-size: .9rem; }
.ruta .volver { font-weight: 700; text-decoration: none; padding: .2rem .7rem; border: 2px solid var(--azul-medio); border-radius: var(--radio);
  color: var(--texto); background: var(--superficie); cursor: pointer; font: inherit; }
.ruta .volver:hover { background: var(--azul-claro); }
.ruta ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; color: var(--gris); }
.ruta li + li::before { content: "›"; margin-right: .3rem; color: var(--gris); }
.ruta li a, .ruta li button { color: var(--enlace); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.ruta li.actual { color: var(--texto); font-weight: 700; }
@media print { .ruta { display: none !important; } }
html[data-tema="oscuro"] h1, html[data-tema="oscuro"] h2, html[data-tema="oscuro"] h3 { color: var(--texto); }
html[data-tema="oscuro"] .btn.sec { color: var(--texto); border-color: #6b717a; }
html[data-tema="oscuro"] .btn { border-color: #6b717a; }
html[data-tema="oscuro"] .aviso { color: var(--texto); }
html[data-tema="oscuro"] tr.saldo-ant td, html[data-tema="oscuro"] .chico { color: var(--gris); }
html[data-tema="oscuro"] .ac-item.sel, html[data-tema="oscuro"] tbody tr.sel { background: #3a3320; }
html[data-tema="oscuro"] .m-desp a, html[data-tema="oscuro"] .barra .m-desp a { color: var(--texto); }
html[data-tema="oscuro"] .m-desp a:hover, html[data-tema="oscuro"] .m-desp a:focus { background: #3a3320; color: var(--texto); }
html[data-tema="oscuro"] .menu-grande .t { color: var(--texto); } html[data-tema="oscuro"] .menu-grande a, html[data-tema="oscuro"] .tarjetas a { background: var(--superficie); color: var(--texto); }

/* ---- Ayuda de cada pantalla (panel lateral, F1) ---- */
.btn-ayuda { margin-left: auto; background: none; border: 2px solid var(--marca, #19A7A0); color: var(--texto); border-radius: 999px;
  padding: .15rem .8rem; font: inherit; font-weight: 700; cursor: pointer; }
.btn-ayuda kbd { font-size: .7em; opacity: .7; margin-left: .2rem; }
.btn-ayuda:hover { background: var(--marca, #19A7A0); color: #12304f; }
.panel-ayuda { position: fixed; top: 0; right: 0; height: 100vh; width: min(430px, 100vw); background: var(--superficie, #fff); color: var(--texto);
  box-shadow: -8px 0 24px rgba(0,0,0,.18); z-index: 60; display: flex; flex-direction: column; border-left: 4px solid var(--marca, #19A7A0); }
.panel-ayuda[hidden] { display: none; }
.pa-cab { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1.1rem; border-bottom: 1px solid var(--linea, #ddd); font-size: 1.1rem; }
.pa-cab button { background: none; border: 0; font-size: 1.3rem; cursor: pointer; color: var(--texto); }
.pa-cuerpo { padding: .4rem 1.1rem 1.5rem; overflow-y: auto; line-height: 1.45; }
.pa-cuerpo h4 { margin: 1.1rem 0 .4rem; font-size: .95rem; text-transform: uppercase; letter-spacing: .03em; color: var(--gris); }
.pa-cuerpo ol { padding-left: 1.2rem; margin: 0; } .pa-cuerpo li { margin: .3rem 0; }
.pa-cuerpo dt { font-weight: 700; margin-top: .55rem; } .pa-cuerpo dd { margin: .1rem 0 0 0; }
.pa-cuerpo .glosario dt { color: var(--enlace); }
.pa-pie { margin-top: 1.5rem; }
@media print { .panel-ayuda, .btn-ayuda { display: none !important; } }
/* revisión antes de grabar (qué falta) */
.revision { margin: 1rem 0 .5rem; padding: .7rem 1rem; border-radius: var(--radio, 8px); background: var(--superficie, #fff); border-left: 5px solid var(--linea, #ccc); }
.revision ul { margin: .3rem 0 0; padding-left: 1.2rem; } .revision li { margin: .15rem 0; }
.revision li.aviso-li { color: #8a5a00; } html[data-tema="oscuro"] .revision li.aviso-li { color: #f3c969; }
.revision.alerta { border-left-color: #b3261e; box-shadow: 0 0 0 3px rgba(179,38,30,.25); }
.revision a[data-ir] { font-size: .85em; margin-left: .3rem; }

/* ================= Todas las pantallas: PC, notebook, tablet y celular =================
   La letra no se achica (18px; en celular 17px). Lo que no entra se acomoda en una columna
   y las tablas anchas se deslizan de costado dentro de su recuadro. El zoom del navegador sigue andando. */
input, select, textarea, img, svg, video { max-width: 100%; }
.btn-menu { display: none; }
/* renglones de texto no tan largos en pantallas anchas (se leen mejor) */
main > p, .caja > p, .tarjeta > p, section > p, main > ul, section > ul, section > ol, .chico { max-width: 100ch; }
td, th { overflow-wrap: break-word; }
/* recuadro de importes: que los campos no se salgan de la caja */
table.importes input.m { width: 100%; max-width: 11rem; min-width: 6.5rem; }
table.importes td:nth-child(odd) { width: 1%; white-space: nowrap; }
@media (max-width: 1100px) {
  main { padding: 1rem; }
  .m-item.abierto .m-desp.ancho.tres { min-width: 560px; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  html { font-size: 17px; }
  main { padding: .75rem; }
  h1 { font-size: 1.35rem; } h2 { font-size: 1.15rem; }
  .barra { padding: .4rem .75rem; gap: .5rem; }
  .barra .marca img { height: 36px; }
  .btn-menu { display: inline-block; margin-left: auto; font: inherit; color: #fff; background: rgba(255,255,255,.15); border: 0;
    border-radius: var(--radio); padding: .4rem .8rem; cursor: pointer; }
  .barra .menu-sup { display: none; flex: 1 1 100%; order: 5; flex-direction: column; gap: 0; }
  body.menu-abierto .barra .menu-sup { display: flex; }
  .barra .usuario { order: 6; }
  .menu-sup > .m-item > button { width: 100%; text-align: left; padding: .6rem .8rem; }
  .menu-sup kbd { display: none; }
  .m-desp, .m-desp.ancho, .m-item.abierto .m-desp.ancho, .m-item.abierto .m-desp.ancho.tres {
    position: static; min-width: 0 !important; width: 100%; box-shadow: none; grid-template-columns: 1fr; left: 0 !important; }
  .m-desp a, .m-desp span { white-space: normal; }
  .barra .usuario { flex-basis: 100%; justify-content: flex-end; flex-wrap: wrap; }
  .ruta { padding: .35rem .75rem; } .btn-ayuda kbd { display: none; }
  .grid-comp, .form-grid { grid-template-columns: 1fr; }
  .grid-comp .ancho2 { grid-column: auto; }
  .form-grid, .caja, .filtros { padding: .8rem; }
  .filtros > label, .filtros > input, .filtros > select { flex: 1 1 100%; }
  .filtros input, .filtros select { width: 100%; }
  input[type=search], input.buscar { min-width: 0; width: 100%; }
  .acciones .btn, .filtros .btn { flex: 1 1 auto; text-align: center; }
  .barra-grabar { position: static; }
  .barra-grabar .btn { flex: 1 1 100%; text-align: center; }
  /* tablas sueltas (fuera de su recuadro): se deslizan de costado en vez de romper la pantalla */
  main > table, .caja > table:not(.importes), .tarjeta > table, section > table { display: block; overflow-x: auto; }
  th, td { padding: .4rem .5rem; }
  th { white-space: nowrap; }
  .tabla-cont td { min-width: 4.5rem; }
  /* importes: etiqueta y campo de a pares */
  table.importes, table.importes tbody, table.importes tfoot { display: block; }
  table.importes tr { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: .2rem .5rem; margin-bottom: .3rem; }
  table.importes td { width: auto !important; white-space: normal !important; }
  table.importes input.m { max-width: none; }
  .ficha, .indicadores, .menu-grande { grid-template-columns: 1fr; }
  .panel-ayuda { width: 100vw; }
  .m-desp.ancho .col { border-right: 0; }
}
@media (max-width: 420px) {
  .fila-inputs { flex-wrap: wrap; }
  .barra .empresa { font-size: .9rem; }
}
.revision-mini { align-self: center; font-weight: 600; text-decoration: none; max-width: 40ch; }
@media (max-width: 800px) { .revision-mini { flex: 1 1 100%; } }
.pie { text-align: center; color: var(--gris); font-size: .8rem; padding: 1.5rem 1rem 1rem; }
.menu-sup > .m-item > button.sin-empresa { background: var(--marca, #19A7A0); color: #12304f; font-weight: 700; }
.barra .usuario { flex-direction: column; align-items: flex-end; gap: .2rem; }
.barra .usr-fila { display: flex; gap: .5rem; align-items: center; }
.barra .reloj { font-variant-numeric: tabular-nums; font-size: .8rem; opacity: .85; white-space: nowrap; }
@media (max-width: 420px) { .barra .reloj { display: none; } }

/* versión de demostración */
.demo-aviso{background:#e0f3f1;color:#0b4a52;border-bottom:2px solid #19a7a0;padding:.45rem 1rem;text-align:center;font-size:.95em}
.demo-usuarios{margin-top:1.2rem;padding:.8rem 1rem;border:2px dashed #19a7a0;border-radius:8px;background:#f0faf9;color:#0b3a40}
.demo-usuarios table{width:100%;margin:.5rem 0}.demo-usuarios td{padding:.15rem .4rem}

/* código de verificación en el ingreso */
.codigo-ingreso{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;margin:.6rem 0 .2rem}.codigo-ingreso>span{width:100%;font-size:.95em}
.codigo-ingreso img{border-radius:8px;border:1px solid var(--borde)}.codigo-texto{font-family:monospace;font-size:1.6rem;letter-spacing:.3em;background:var(--azul-claro);padding:.2rem .7rem;border-radius:8px;user-select:none}