/* ERP · formato del portal KAME pedido por Felipe (barra naranja degradada, menú lateral oscuro con
   secciones, tarjetas blancas con tablas), suavizado: esquinas redondeadas, sombras leves, más aire,
   nada que se desborde. Un solo tema claro, a propósito (herramienta interna). */
:root {
  --naranja-1: #f59a35;
  --naranja-2: #f27c62;
  --naranja: #f08a3c;
  --naranja-hover: #e2772a;
  --naranja-suave: #fff1e6;
  --lateral: #27323a;
  --lateral-activo: #334049;
  --lateral-texto: #dfe6ea;
  --lateral-suave: #93a3ad;
  --fondo: #f4f5f8;
  --tarjeta: #ffffff;
  --borde: #e8ebf0;
  --borde-fuerte: #d6dbe3;
  --texto: #1f2733;
  --suave: #6a7483;
  --ok: #23845a; --ok-suave: #e5f5ec;
  --alerta: #a8690f; --alerta-suave: #fdf3df;
  --error: #c2402f; --error-suave: #fcebe8;
  --info: #2f69a8; --info-suave: #e8f0fa;
  --gris-suave: #eef0f4;
  --empresa: #1f7a5c;
  --radio: 12px;
  --sombra: 0 1px 2px rgb(16 24 40 / .04), 0 2px 8px rgb(16 24 40 / .04);
  --fuente: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 14px/1.55 var(--fuente); -webkit-font-smoothing: antialiased; }
a { color: var(--info); text-decoration-thickness: 1px; text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { letter-spacing: -.01em; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.suave { color: var(--suave); }
.nw { white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Barra superior */
.barra {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; min-height: 60px;
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(90deg, var(--naranja-1), var(--naranja-2)); color: #fff;
  padding-right: max(18px, env(safe-area-inset-right, 0px));
  box-shadow: 0 2px 10px rgb(240 120 60 / .18);
}
.marca { width: 240px; display: flex; align-items: center; gap: 12px; padding-left: max(16px, env(safe-area-inset-left, 0px)); flex: none; }
.marca .logo { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.marca .logo img { border-radius: 9px; box-shadow: 0 0 0 2px rgb(255 255 255 / .55); }
.nombre-marca { font-size: 18px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.nombre-marca span { font-weight: 500; opacity: .95; }
.btn-menu { background: rgb(255 255 255 / .14); border: 0; color: #fff; cursor: pointer; padding: 7px; display: grid; border-radius: 10px; transition: background .15s; }
.btn-menu:hover { background: rgb(255 255 255 / .26); }
.btn-menu:focus-visible, .empresa-activa > button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.empresa-activa { position: relative; min-width: 0; }
.empresa-activa > button {
  display: flex; align-items: center; gap: 10px; background: rgb(255 255 255 / .18); border: 1px solid rgb(255 255 255 / .3);
  border-radius: 10px; padding: 5px 12px 5px 8px; color: #fff; cursor: pointer; text-align: left; max-width: 380px;
}
.empresa-activa > button > span:nth-child(2) { min-width: 0; }
.empresa-activa strong { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empresa-activa small { font-size: 11.5px; opacity: .92; white-space: nowrap; }
.empresa-activa .chip-color { width: 10px; height: 28px; border-radius: 5px; background: var(--empresa); box-shadow: 0 0 0 2px rgb(255 255 255 / .85); flex: none; }
.desplegable { position: absolute; top: calc(100% + 8px); left: 0; min-width: 320px; background: #fff; color: var(--texto); border-radius: var(--radio); box-shadow: 0 12px 32px rgb(16 24 40 / .16); padding: 6px; z-index: 30; }
.desplegable a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--texto); }
.desplegable a:hover, .desplegable a[aria-current] { background: var(--fondo); }
.desplegable .punto { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.desplegable hr { border: 0; border-top: 1px solid var(--borde); margin: 6px 0; }
.periodo-activo { display: flex; align-items: center; gap: 6px; }
.periodo-activo select { background: rgb(255 255 255 / .18); border: 1px solid rgb(255 255 255 / .3); border-radius: 10px; color: #fff; padding: 6px 8px; }
.periodo-activo select option { color: var(--texto); }
.estado-periodo { font-size: 11.5px; font-weight: 600; background: #fff; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.estado-periodo.abierto { color: var(--ok); }
.estado-periodo.cerrado { color: var(--error); }
.estado-periodo.falta { color: var(--alerta); }
.barra .espacio { flex: 1; }
.usuario { position: relative; }
.usuario > button { display: flex; align-items: center; gap: 8px; background: none; border: 0; color: #fff; cursor: pointer; font-size: 13px; padding: 4px; border-radius: 10px; }
.usuario > button:hover { background: rgb(255 255 255 / .14); }
.usuario .desplegable { left: auto; right: 0; min-width: 220px; }
.usuario .desplegable button { width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.usuario .desplegable button:hover { background: var(--fondo); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--naranja-2); display: grid; place-items: center; font-weight: 700; }

/* Estructura: el fondo oscuro del menú cubre toda la altura aunque la página sea larga */
.app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: calc(100% - 60px); background: linear-gradient(90deg, var(--lateral) 240px, var(--fondo) 240px); }
.lateral { background: var(--lateral); color: var(--lateral-texto); padding-block: 8px 24px; position: sticky; top: 60px; align-self: start; max-height: calc(100vh - 60px); overflow-y: auto; scrollbar-width: thin; }
.lateral h6 { margin: 16px 0 4px; padding: 0 20px; font-size: 11px; font-weight: 600; color: var(--lateral-suave); text-transform: uppercase; letter-spacing: .08em; }
.lateral a { display: flex; align-items: center; gap: 10px; margin: 1px 10px; padding: 7px 10px; color: var(--lateral-texto); text-decoration: none; font-size: 13.5px; border-radius: 8px; }
.lateral a:hover { background: var(--lateral-activo); }
.lateral a[aria-current="page"] { background: linear-gradient(90deg, rgb(245 154 53 / .28), rgb(245 154 53 / .08)); color: #fff; box-shadow: inset 3px 0 0 var(--naranja-1); }
.lateral a.futuro { color: var(--lateral-suave); }
.lateral a .etapa { margin-left: auto; white-space: nowrap; flex: none; font-size: 10px; border-radius: 999px; padding: 0 7px; background: rgb(255 255 255 / .07); color: var(--lateral-suave); }
.lateral svg { width: 17px; height: 17px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.contenido { padding-block: 24px 56px; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); min-width: 0; background: var(--fondo); box-shadow: inset 0 3px 0 var(--empresa); }
/* Contenido centrado: ancho cómodo en pantallas grandes, sin pegarse a la izquierda */
.contenido > * { max-width: 1360px; margin-inline: auto; }
.contenido.media > * { max-width: 1120px; }
.contenido.angosta > * { max-width: 880px; }
.contenido.media .form, .contenido.angosta .form { max-width: none; }

/* Encabezado de página */
.pagina-titulo { display: flex; align-items: flex-end; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 20px; }
.pagina-titulo > div:first-child { min-width: 0; flex: 1 1 320px; }
.pagina-titulo h1 { font-size: 22px; font-weight: 600; margin: 0; text-wrap: balance; }
.pagina-titulo .migas { font-size: 13px; color: var(--suave); margin-top: 3px; }
.pagina-titulo .migas a { color: var(--suave); }
.pagina-titulo .acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Tarjetas */
.rejilla { display: grid; gap: 20px; align-items: start; }
.rejilla.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla > .tarjeta { margin-top: 0 !important; }
.rejilla + .rejilla, .tarjeta + .tarjeta, .rejilla + .tarjeta, .tarjeta + .rejilla, .cifras + .tarjeta { margin-top: 20px; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); min-width: 0; overflow: hidden; }
.tarjeta > h2 { margin: 0; padding: 14px 18px; font-size: 15px; font-weight: 600; border-bottom: 1px solid var(--borde); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tarjeta > h2 .derecha { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--suave); }
.tarjeta .cuerpo { padding: 16px 18px; }
.tarjeta .pie { padding: 12px 18px; border-top: 1px solid var(--borde); font-size: 13px; color: var(--suave); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: #fbfbfd; }
.vacio { padding: 28px 22px; text-align: center; color: var(--suave); max-width: 560px; margin: 0 auto; }
.vacio strong { display: block; color: var(--texto); margin-bottom: 4px; font-weight: 600; }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 20px; }
.cifra { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 14px 18px; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--texto); text-decoration: none; position: relative; }
a.cifra { transition: box-shadow .15s, transform .15s, border-color .15s; }
a.cifra:hover { box-shadow: 0 10px 26px rgb(16 24 40 / .09); transform: translateY(-1px); border-color: var(--borde-fuerte); }
.cifra b { display: block; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; overflow-wrap: anywhere; }
.cifra span { color: var(--suave); font-size: 12.5px; }
.cifra > span:first-child { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.cifra small { color: var(--suave); font-size: 12.5px; }
.cifra.ok b { color: var(--ok); } .cifra.error b { color: var(--error); } .cifra.alerta b { color: var(--alerta); }

/* Tablas: nunca empujan la página; si son anchas se desplazan dentro de su tarjeta */
.tabla-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 14px; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: middle; }
th { font-weight: 600; font-size: 11.5px; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; background: #fbfbfd; }
th.num { text-align: right; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafbfd; }
tbody tr.fila-link { cursor: pointer; }
tbody tr.atenuada td { color: var(--suave); }
tbody tr.grupo td { font-weight: 600; background: #fbfbfd; }
tfoot td { font-weight: 600; background: #fbfbfd; border-top: 1px solid var(--borde-fuerte); border-bottom: 0; }
td .sub { display: block; font-size: 12px; color: var(--suave); }
td.glosa { min-width: 220px; }
td input, td select { width: 100%; border: 1px solid var(--borde-fuerte); border-radius: 8px; padding: 6px 8px; background: #fff; }
td input.num { text-align: right; }

/* Etiquetas */
.pildora { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; background: var(--gris-suave); color: var(--suave); white-space: nowrap; }
.pildora.ok { background: var(--ok-suave); color: var(--ok); }
.pildora.alerta { background: var(--alerta-suave); color: var(--alerta); }
.pildora.error { background: var(--error-suave); color: var(--error); }
.pildora.info { background: var(--info-suave); color: var(--info); }
.pildora.gris { background: var(--gris-suave); color: var(--suave); }
.pildora.oscura { background: #5f6b78; color: #fff; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--borde-fuerte); background: #fff; color: var(--texto); border-radius: 10px; padding: 8px 16px; font-weight: 500; font-size: 13.5px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s; }
.btn:hover { background: var(--fondo); }
.btn.primario { background: var(--naranja); border-color: var(--naranja); color: #fff; box-shadow: 0 1px 2px rgb(240 120 60 / .3); }
.btn.primario:hover { background: var(--naranja-hover); border-color: var(--naranja-hover); }
.btn.peligro { color: var(--error); border-color: #f0c9c2; }
.btn.peligro:hover { background: var(--error-suave); }
.btn.chico { padding: 5px 11px; font-size: 12.5px; border-radius: 8px; }
.btn.texto { border-color: transparent; background: none; color: var(--info); padding-inline: 6px; }
.btn:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--naranja); outline-offset: 2px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
summary.btn { list-style: none; }
summary.btn::-webkit-details-marker { display: none; }

/* Formularios */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--borde); background: #fbfbfd; }
.filtros input, .filtros select { border: 1px solid var(--borde-fuerte); border-radius: 10px; padding: 7px 10px; background: #fff; min-width: 0; }
.filtros select { max-width: 240px; }
.filtros input[type="search"] { flex: 1 1 220px; }
.filtros .total { margin-left: auto; color: var(--suave); font-size: 13px; }
.form { display: grid; gap: 16px; max-width: 820px; }
.form.ancho { max-width: none; }
.form .doble { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form .triple { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.campo { min-width: 0; }
.campo label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 5px; }
.campo input:not([type="checkbox"]):not([type="radio"]), .campo select, .campo textarea { width: 100%; border: 1px solid var(--borde-fuerte); border-radius: 10px; padding: 8px 11px; background: #fff; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--naranja); outline: none; box-shadow: 0 0 0 3px var(--naranja-suave); }
.campo .ayuda { font-size: 12.5px; color: var(--suave); margin-top: 4px; }
.campo .errorlist { list-style: none; margin: 4px 0 0; padding: 0; color: var(--error); font-size: 13px; }
.campo.con-error input, .campo.con-error select { border-color: var(--error); }
.campo.check label { display: flex; gap: 8px; align-items: center; font-weight: 500; }
.colores { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.colores label { display: flex; align-items: center; gap: 6px; font-weight: 400; border: 1px solid var(--borde); border-radius: 999px; padding: 3px 10px 3px 4px; cursor: pointer; }
.colores .muestra { width: 18px; height: 18px; border-radius: 50%; }
.botones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Mensajes */
.mensajes { display: grid; gap: 8px; margin-bottom: 18px; }
.mensaje { border-radius: 10px; padding: 10px 14px; border: 1px solid; }
.mensaje.success { background: var(--ok-suave); border-color: #c4e6d2; color: #1b5e3d; }
.mensaje.error { background: var(--error-suave); border-color: #f3cbc4; color: #8e2a20; }
.mensaje.warning { background: var(--alerta-suave); border-color: #f1dcab; color: #7a5212; }
.mensaje.info { background: var(--info-suave); border-color: #cadcf0; color: #1f4c74; }
.nota { border-radius: 10px; padding: 10px 14px; background: var(--info-suave); color: #1f4c74; font-size: 13px; }
.nota.alerta { background: var(--alerta-suave); color: #7a5212; }

/* Listas de verificación */
.lista-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lista-check li { display: flex; gap: 10px; align-items: flex-start; }
.lista-check .marca-check { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.marca-check.si { background: var(--ok-suave); color: var(--ok); }
.marca-check.no { background: var(--error-suave); color: var(--error); }

/* Trazabilidad y fichas */
.traza { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 18px; background: #fbfbfd; border-bottom: 1px solid var(--borde); font-size: 13px; }
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 20px; padding: 16px 18px; }
.datos > div { min-width: 0; overflow-wrap: anywhere; }
.datos span { display: block; font-size: 12px; color: var(--suave); }
.datos b { font-weight: 600; }
details.cambios summary { cursor: pointer; color: var(--info); font-size: 13px; }
details.cambios table { margin-top: 6px; font-size: 12.5px; }
details.cambios td { padding: 4px 8px; }
.emergente { position: absolute; right: 0; margin-top: 8px; padding: 16px; width: min(400px, 90vw); z-index: 15; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: 0 12px 32px rgb(16 24 40 / .16); text-align: left; }
details.con-emergente { position: relative; display: inline-block; }

/* Pasos (importación, remuneraciones) */
.pasos { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 18px; }
.pasos li { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--borde); font-size: 13px; }
.pasos li b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--gris-suave); font-size: 11.5px; }
.pasos li.hecho b { background: var(--ok-suave); color: var(--ok); }
.pasos li.actual { border-color: var(--naranja); }
.pasos li.actual b { background: var(--naranja); color: #fff; }

/* Página de acceso */
.acceso { min-height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, var(--naranja-1), var(--naranja-2)); padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
.acceso .tarjeta { width: min(420px, 100%); border-radius: 18px; box-shadow: 0 24px 60px rgb(120 50 10 / .22); }
.acceso .marca-acceso { text-align: center; color: var(--texto); padding: 32px 24px 4px; display: grid; justify-items: center; gap: 6px; }
.acceso .marca-acceso img { border-radius: 14px; }
.acceso .nombre-marca { font-size: 24px; }
.acceso .nombre-marca span { color: var(--naranja-hover); }
.acceso .marca-acceso small { display: block; font-size: 13px; font-weight: 500; color: var(--suave); }
.acceso .cuerpo { padding: 18px 28px 28px; }
.btn.ancho { width: 100%; justify-content: center; }
.enlace-suave { text-align: center; font-size: 13px; color: var(--suave); }

/* Selector de empresas */
.empresas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; align-items: stretch; }
.empresas > .tarjeta { margin-top: 0; }
.empresa-card { display: flex; flex-direction: column; text-decoration: none; color: var(--texto); border-top: 4px solid var(--c); transition: box-shadow .15s, transform .15s; }
.empresa-card > a { flex: 1; }
.empresa-card h2 { padding: 16px 20px 0; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 17px; }
.empresa-card:hover { box-shadow: 0 10px 28px rgb(16 24 40 / .10); transform: translateY(-1px); }

.pag { display: flex; gap: 8px; justify-content: flex-end; align-items: center; padding: 10px 18px; border-top: 1px solid var(--borde); }
.barra-progreso { height: 8px; border-radius: 4px; background: var(--gris-suave); overflow: hidden; }
.barra-progreso i { display: block; height: 100%; background: var(--ok); }

@media print {
  .barra, .lateral, .acciones, .filtros, .pag, .no-imprimir { display: none !important; }
  .app { display: block; background: none; }
  .contenido { padding: 0; box-shadow: none; }
  .tarjeta { box-shadow: none; border: 0; }
}
@media (max-width: 1100px) { .rejilla.tres { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 960px) {
  .app { grid-template-columns: minmax(0, 1fr); background: var(--fondo); }
  .lateral { position: fixed; top: 60px; left: 0; width: 260px; height: calc(100vh - 60px); max-height: none; z-index: 25; transform: translateX(-100%); transition: transform .2s; box-shadow: 8px 0 24px rgb(0 0 0 / .2); }
  .lateral.abierto { transform: none; }
  .marca { width: auto; }
  .rejilla.dos { grid-template-columns: minmax(0, 1fr); }
  .usuario > button span:first-child { display: none; }
  .form .triple { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .barra { flex-wrap: wrap; padding-block: 6px; padding-left: max(8px, env(safe-area-inset-left, 0px)); }
  .marca > span { display: none; }
  .empresa-activa > button { max-width: calc(100vw - 120px); }
  .form .doble { grid-template-columns: minmax(0, 1fr); }
  .contenido { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .lateral, .btn { transition: none; } }


/* Menú lateral contraíble en escritorio (botón hamburguesa; se recuerda en el navegador) */
@media (min-width: 961px) {
  .lateral { transition: opacity .15s; }
  body.menu-contraido .app { grid-template-columns: minmax(0, 1fr); background: var(--fondo); }
  body.menu-contraido .lateral { display: none; }
  body.menu-contraido .marca { width: auto; }
}

/* Ventana (dialog) para elegir empresa */
dialog.modal { border: 0; padding: 0; border-radius: 16px; width: min(560px, calc(100vw - 32px)); color: var(--texto); box-shadow: 0 24px 64px rgb(16 24 40 / .28); }
dialog.modal::backdrop { background: rgb(31 39 51 / .55); backdrop-filter: blur(2px); }
dialog.modal form { display: grid; gap: 14px; padding: 22px 24px 20px; }
.modal-cabeza { display: flex; gap: 12px; align-items: flex-start; }
.modal-cabeza img { border-radius: 9px; flex: none; }
.modal-cabeza > div { flex: 1; min-width: 0; }
.modal-cabeza h2 { margin: 0; font-size: 18px; font-weight: 600; }
.modal-cabeza p { margin: 2px 0 0; font-size: 13px; }
.modal-cerrar { background: none; border: 0; font-size: 24px; line-height: 1; color: var(--suave); cursor: pointer; padding: 2px 6px; border-radius: 8px; }
.modal-cerrar:hover { background: var(--fondo); }
.listbox { display: grid; gap: 6px; max-height: min(52vh, 420px); overflow-y: auto; padding: 2px; }
.opcion-empresa { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--borde-fuerte); border-radius: 12px; cursor: pointer; background: #fff; transition: border-color .12s, background .12s; position: relative; }
.opcion-empresa:hover { border-color: var(--naranja); background: #fffaf5; }
.opcion-empresa input { position: absolute; opacity: 0; pointer-events: none; }
.opcion-empresa .punto { width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--borde-fuerte); }
.opcion-empresa .texto { min-width: 0; line-height: 1.35; }
.opcion-empresa .texto small { display: block; color: var(--suave); font-size: 12.5px; overflow-wrap: anywhere; }
.opcion-empresa:has(input:checked) { border-color: var(--naranja); background: var(--naranja-suave); box-shadow: 0 0 0 1px var(--naranja); }
.opcion-empresa:has(input:checked) .texto b { color: #8a3d0e; }
.opcion-empresa:has(input:focus-visible) { outline: 2px solid var(--naranja); outline-offset: 2px; }
.buscar-empresa { width: 100%; border: 1px solid var(--borde-fuerte); border-radius: 10px; padding: 9px 12px; }
.modal-pie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.modal-pie .espacio { flex: 1; }
.modal-pie a { font-size: 13px; color: var(--suave); }
.telon-eleccion { min-height: 60vh; }


/* ---- UX amistosa (2026-10-29) ---- */
/* Campos sueltos (fuera de .form): mismo estilo que los formularios */
.contenido input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]), .contenido select, .contenido textarea {
  border: 1px solid var(--borde-fuerte); border-radius: 10px; padding: 7px 10px; background: #fff; min-height: 36px; max-width: 100%;
}
.contenido input:focus, .contenido select:focus, .contenido textarea:focus { border-color: var(--naranja); box-shadow: 0 0 0 3px rgb(240 138 60 / .15); outline: none; }
input[type=checkbox], input[type=radio] { accent-color: var(--naranja); width: 16px; height: 16px; vertical-align: -3px; }
input[type=file] { font-size: 13px; color: var(--suave); max-width: 100%; }
input[type=file]::file-selector-button { border: 1px solid var(--borde-fuerte); background: #fff; color: var(--texto); border-radius: 10px; padding: 7px 14px; margin-right: 10px; font: inherit; font-weight: 500; cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--fondo); }
.txt-ok { color: var(--ok); } .txt-error { color: var(--error); } .chico { font-size: 12.5px; }

/* Pestañas de sección: subrayado, no botones (así no se confunden con acciones) */
.pestanas { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--borde-fuerte); margin-bottom: 20px; }
.pestanas a { padding: 9px 14px; color: var(--suave); text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 8px 8px 0 0; white-space: nowrap; }
.pestanas a:hover { color: var(--texto); background: rgb(255 255 255 / .6); }
.pestanas a[aria-current="page"] { color: var(--naranja-hover); border-bottom-color: var(--naranja); font-weight: 600; }

/* Filtros: búsqueda ancha, el resto a su medida, Excel a la derecha */
.filtros .btn.texto { margin-left: auto; }
td.col-tercero { min-width: 220px; }

/* Listas de dos líneas (inicio, atajos) */
.lista-filas { list-style: none; margin: 0; padding: 0; }
.lista-filas li { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-top: 1px solid var(--borde); }
.lista-filas li:first-child { border-top: 0; }
.lista-filas li[data-href] { cursor: pointer; }
.lista-filas li:hover { background: #fafbfc; }
.lista-filas .principal { flex: 1; min-width: 0; }
.lista-filas .principal a { color: var(--texto); text-decoration: none; font-weight: 500; }
.lista-filas .principal a:hover { color: var(--info); text-decoration: underline; }
.lista-filas .principal small { display: block; color: var(--suave); font-size: 12.5px; margin-top: 1px; }

/* Meses del año */
.meses { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.mes { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 7px 4px; border-radius: 10px; font-size: 13px; font-weight: 600; text-decoration: none; border: 1px solid transparent; }
.mes i { font-style: normal; font-size: 10px; }
.mes.abierto { background: var(--ok-suave); color: var(--ok); }
.mes.cerrado { background: var(--gris-suave); color: var(--suave); }
.mes.actual { border-color: var(--naranja); box-shadow: 0 0 0 1px var(--naranja); }
.leyenda { margin: 12px 0 0; font-size: 12.5px; color: var(--suave); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.leyenda .mes { display: inline-flex; padding: 1px 8px; font-size: 11.5px; }

/* Tipos de movimiento */
.pildora.tipo-cobro, .pildora.tipo-ingreso { background: var(--ok-suave); color: var(--ok); }
.pildora.tipo-pago, .pildora.tipo-egreso { background: var(--error-suave); color: var(--error); }
.pildora.tipo-transferencia { background: var(--info-suave); color: var(--info); }

/* Pasos de un flujo (registrar cobro/pago) */
.pasos-linea { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 16px; flex-wrap: wrap; }
.pasos-linea li { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: #fff; border: 1px solid var(--borde); color: var(--suave); font-size: 13px; font-weight: 500; }
.pasos-linea b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--gris-suave); font-size: 12px; }
.pasos-linea li.actual { border-color: var(--naranja); color: var(--texto); }
.pasos-linea li.actual b { background: var(--naranja); color: #fff; }
.pasos-linea li.hecho b { background: var(--ok-suave); color: var(--ok); }
.elegir-tercero { display: grid; gap: 8px; max-width: 640px; }
.elegir-tercero label { font-weight: 600; font-size: 15px; }
.contenido .elegir-tercero select { min-height: 44px; font-size: 15px; }

/* Reportes en mosaico */
h2.seccion { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); font-weight: 600; margin: 26px 0 10px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
h2.seccion:first-of-type { margin-top: 4px; }
h2.seccion small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--alerta); }
.mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.ficha-reporte { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 16px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); color: var(--texto); text-decoration: none; transition: box-shadow .15s, transform .15s, border-color .15s; }
.ficha-reporte:hover { border-color: var(--naranja); box-shadow: 0 10px 26px rgb(16 24 40 / .08); transform: translateY(-1px); }
.ficha-reporte svg { grid-row: span 3; width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--naranja-suave); stroke: var(--naranja-hover); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ficha-reporte b { font-weight: 600; }
.ficha-reporte span { color: var(--suave); font-size: 13px; line-height: 1.4; }
.ficha-reporte small { font-size: 12.5px; color: var(--info); }
.ficha-reporte small span { color: var(--info); font-size: 12.5px; text-decoration: underline; cursor: pointer; }
@media (max-width: 640px) { .meses { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
tbody tr.grupo.nivel-0 td { background: #f1f3f7; border-top: 2px solid var(--borde-fuerte); font-size: 14.5px; }
tbody tr.grupo.nivel-1 td { background: #f7f8fa; }
.avance-conciliacion { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--suave); flex-wrap: wrap; }
.avance-conciliacion .barra-progreso { width: 220px; height: 10px; border-radius: 5px; }
.avance-conciliacion b { color: var(--texto); }
.sugerencia { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 10px; background: #fcfcfd; margin-bottom: 6px; }
.sugerencia span { min-width: 0; }
.btn-quitar { border: 0; background: none; color: var(--suave); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.btn-quitar:hover { background: var(--error-suave); color: var(--error); }
input.num, input.monto { text-align: right; font-variant-numeric: tabular-nums; }
/* Pasos con detalle (remuneraciones del mes): tarjetas parejas en una fila, sin partirse */
.pasos:has(li > span) { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.pasos:has(li > span) li { border-radius: 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; padding: 10px 12px; }
.pasos:has(li > span) li a { font-weight: 600; color: var(--texto); text-decoration: none; }
.pasos:has(li > span) li a:hover { color: var(--info); text-decoration: underline; }
.pasos:has(li > span) li span { grid-column: 2; font-size: 12px; line-height: 1.3; }
.pasos li.hecho { border-color: #c4e6d2; background: #f6fbf8; }
/* Exportar a Excel: botón secundario, no un enlace suelto */
.filtros .btn.texto { border: 1px solid var(--borde-fuerte); background: #fff; color: var(--texto); padding-inline: 14px; }
.filtros .btn.texto::before { content: "⇩"; color: var(--ok); font-weight: 700; }