/* Colores y tipografía de la marca ContIA (guía en docs/marca/MARCA.md): índigo #4338CA, tinta #12202E, lavanda #A5B4FC,
   gris #4A5562, hueso #F4F5F2; letra Plus Jakarta Sans con números tabulares */
:root{
  --bg:#F4F5F2; --surface:#FFFFFF; --sunk:#F4F5F2; --line:#E1E3DF; --line2:#C9CDD3;
  --fg:#12202E; --muted:#4A5562; --head:#12202E; --head2:#1D2E40; --head-line:#2E4157;
  --accent:#4338CA; --accent-dark:#3730A3; --accent-soft:#EEF0FF; --lavanda:#A5B4FC;
  --ok:#1F5E3A; --ok-bg:#E6F2EA; --warn:#7A4A00; --warn-bg:#FBEFD9; --bad:#8A2323; --bad-bg:#FBE6E1;
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.45 var(--sans)}
[hidden]{display:none!important}
button,input,select{font:inherit;color:inherit}
a{color:var(--accent)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Botones y campos */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border-radius:8px;border:1px solid var(--line2);background:var(--surface);font-weight:500;font-size:14px;cursor:pointer}
.btn:hover{border-color:var(--muted)}
a.btn{text-decoration:none;color:inherit}
.btn.primario{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.primario:hover{background:var(--accent-dark)}
.btn.suave{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-dark);font-weight:600}
.btn.peligro{color:var(--bad);border-color:#E3B8B8}
.btn.chico{min-height:34px;padding:0 10px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo>label,.campo>.et{font-size:12px;font-weight:600;color:var(--muted)}
.oblig{color:#9B2C2C}
.campo input,.campo select,.celda input,.celda select{min-height:44px;padding:0 12px;border-radius:8px;border:1px solid var(--line2);background:var(--surface);font-size:15px;width:100%}
.campo .fijo{min-height:44px;padding:0 12px;border-radius:8px;border:1px solid var(--line);background:var(--sunk);display:flex;align-items:center;font-weight:500}
.campo input[type=checkbox],.campo input[type=radio]{width:18px;height:18px;min-height:0;padding:0;flex:none}
.campo input[readonly]{background:var(--sunk);border-color:var(--line)}
/* Calendario en los campos de fecha (compras.js ponerCalendarios) */
.con-calendario{position:relative;display:block;min-width:0}
form.filtros .con-calendario{display:inline-block}
.con-calendario>input{padding-right:38px !important;min-width:150px}   /* dd/mm/aaaa completo + el botón del calendario (Jose, 21-oct-2026) */
.con-calendario{min-width:150px}
.fila>.campo:has(>.con-calendario){flex-basis:auto !important;flex-shrink:0 !important}
.btn-cal{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center;padding:0}
.btn-cal:hover{background:var(--sunk);color:var(--fg)}
.btn-cal svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.con-calendario>input:disabled+.btn-cal,.con-calendario>input[readonly]+.btn-cal{display:none}
.fila{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.fila>.campo{flex:1 1 160px}
/* Filtros de reportes como "chips" (al estilo Odoo, Jose 13-oct-2026): cada campo es una pastilla con su etiqueta y su control */
form.filtros{padding:12px 16px;gap:10px}
form.filtros .fila{gap:8px;align-items:center}
form.filtros .fila>.campo{flex:0 0 auto !important;width:auto !important;flex-direction:row;align-items:center;gap:8px;min-height:40px;padding:0 6px 0 12px;border:1px solid var(--line2);border-radius:8px;background:var(--surface)}
form.filtros .campo>label,form.filtros .campo>.et{white-space:nowrap;font-size:12px}
form.filtros .campo input,form.filtros .campo select{min-height:36px;border:0;background:transparent;padding:0 6px;width:auto;max-width:none;font-size:14px;font-weight:500}
form.filtros .campo input[type=date]{width:150px}
form.filtros .campo input[type=checkbox]{width:18px;height:18px;min-height:0}
form.filtros label.campo{padding-right:12px}
/* el botón del periodo dentro de su cuadro no lleva otro borde (Jose, 21-oct-2026: "si la primera la da, para qué tener dos") */
form.filtros .campo .periodo-btn{border:0;background:transparent;box-shadow:none;min-height:36px;padding:0 6px;font-size:14px;font-weight:500}
form.filtros .btn{min-height:40px}
.ayuda{font-size:12.5px;color:var(--muted);margin:0}
.ayuda b{font-family:var(--mono);color:var(--fg)}

/* Inicio de sesión */
.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login form{width:min(380px,100%);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:28px;display:flex;flex-direction:column;gap:16px}
.login h1{margin:0;font-size:22px}

/* Encabezado, módulos y cinta */
/* El encabezado (marca + barra de módulos) queda fijo al bajar (Jose, 13-oct-2026) */
header.app{background:var(--head);color:#E8E6E0;position:sticky;top:0;z-index:20}
.barra{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;padding:10px clamp(16px,3vw,32px)}
.marca{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;color:#fff;text-decoration:none}
/* Logo ContIA: mínimo 100 px de ancho (MARCA.md); el PNG ya trae su espacio libre alrededor */
.marca img{height:40px;width:auto;display:block}
.marca .lema{font-weight:500;font-size:12px;color:var(--lavanda);border-left:1px solid var(--head-line);padding-left:10px}
@media (max-width:600px){.marca .lema{display:none}}
.login .logo{width:180px;height:auto;display:block;margin:-8px 0 -4px -10px}
.login .lema{margin:-10px 0 0;color:var(--muted);font-size:13px}
h1,h2,.titulo h1{font-weight:800;letter-spacing:-.01em}
.barra .der{display:flex;flex-wrap:wrap;gap:10px;margin-left:auto;align-items:center;font-size:14px}
.pastilla{min-height:36px;padding:0 12px;border-radius:6px;border:1px solid var(--head-line);background:var(--head2);color:#fff;display:flex;align-items:center;font-weight:500}
.barra .btn{min-height:36px;background:transparent;color:#D5D9DF;border-color:var(--head-line)}
nav.modulos{overflow-x:auto}
nav.modulos div{display:flex;gap:2px;padding:0 clamp(16px,3vw,32px);min-width:max-content}
nav.modulos div[hidden]{display:none}
body.en-inicio nav.modulos{display:none}   /* Inicio: solo las aplicaciones; cada una enseña su menú al entrar */
nav.modulos button{min-height:44px;padding:0 16px;background:none;border:0;color:#D5D9DF;font-size:14px;cursor:pointer;border-radius:6px 6px 0 0}
nav.modulos button[aria-current="page"]{background:#fff;color:var(--fg);font-weight:700}
nav.modulos button[disabled]{opacity:.45;cursor:not-allowed}
.cinta{background:var(--surface);border-bottom:1px solid var(--line);overflow-x:auto}
.cinta>div{display:flex;padding:8px clamp(16px,3vw,32px) 4px;min-width:max-content}
.cinta .grupo{display:flex;flex-direction:column;gap:4px;padding:0 14px;border-right:1px solid var(--line)}
.cinta .grupo:last-child{border-right:0}
.cinta .grupo>div{display:flex;gap:2px}
.cinta .grupo>span{text-align:center;font-size:11px;color:var(--muted)}
.cinta button{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:76px;min-height:64px;padding:6px 8px;border:0;border-radius:6px;background:transparent;font-size:12px;font-weight:500;cursor:pointer}
.cinta button:hover{background:var(--sunk)}
.cinta button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-dark);font-weight:600}
.cinta button[disabled]{opacity:.45;cursor:not-allowed}
.cinta svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
/* Tablero de Contabilidad (al estilo Odoo): tarjetas con borde de color, acciones, cifras y barras por semana */
.tablero{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:16px}
.tcard{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--c);border-radius:10px;padding:16px 18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.tcard h2{margin:0;font-size:17px;color:var(--c)}
.tcard .tfila{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}
.tcard .tnums{display:grid;grid-template-columns:auto auto;gap:4px 16px;font-size:14px;margin-left:auto;text-align:right}
.tcard .tnums a{color:var(--accent-dark);text-decoration:none}
.tcard .tnums a:hover{text-decoration:underline}
.tcard .tnums .mal{color:var(--bad);font-weight:600}
/* (las columnas se llaman .tbar: .barra es la barra del encabezado de la app y les metía su relleno) */
.tcard .barras{display:flex;gap:6px;height:150px;border-top:1px solid var(--line);padding-top:8px}
.tcard .tbar{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.tcard .tpista{flex:1;width:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-height:0}
.tcard .tmonto{font-size:11px;color:var(--muted);white-space:nowrap}
.tcard .palo{width:70%;background:#9ED3CC;border-radius:3px 3px 0 0;min-height:2px}
.tcard .palo.mal{background:#C98FA3}
.tcard .tbar>span{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* Inicio: panel de módulos en mosaicos (como el panel de aplicaciones de Odoo) */
body.sin-cinta .cinta{display:none}
.mosaicos{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px}
.mosaico{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer;text-align:center;font:inherit;color:inherit}
.mosaico:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(0,0,0,.06)}
.mosaico[disabled]{opacity:.45;cursor:not-allowed}
.mosaico .icono{width:64px;height:64px;border-radius:16px;background:var(--c);display:flex;align-items:center;justify-content:center}
.mosaico .icono svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:1.8}
.mosaico b{font-size:14px}
.mosaico .sub{font-size:12px;color:var(--muted);font-family:inherit}
/* Pantallas anchas: módulos horizontales arriba y opciones del módulo en columna a la izquierda (Jose, 13-oct-2026) */
.cuerpo{display:flex;flex-direction:column}
@media (min-width:900px){
  .cuerpo{flex-direction:row;align-items:flex-start}
  .cinta{flex:0 0 232px;position:sticky;top:var(--alto-cab,98px);max-height:calc(100vh - var(--alto-cab,98px));overflow-y:auto;border-bottom:0;border-right:1px solid var(--line);min-height:calc(100vh - var(--alto-cab,98px))}
  .cinta>div{flex-direction:column;gap:16px;padding:14px 10px 24px;min-width:0}
  .cinta .grupo{flex-direction:column-reverse;gap:2px;padding:0;border-right:0}
  .cinta .grupo>div{flex-direction:column;gap:1px}
  .cinta .grupo>span{text-align:left;padding:0 10px 4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
  .cinta button{flex-direction:row;justify-content:flex-start;gap:10px;width:100%;min-width:0;min-height:36px;padding:6px 10px;font-size:13px;text-align:left}
  .cinta svg{width:18px;height:18px;flex:none}
  main{flex:1 1 auto;min-width:0;max-width:none;padding-top:22px}
}

/* Contenido */
main{width:100%;max-width:1280px;margin:0 auto;padding:28px clamp(16px,3vw,32px) 48px;display:flex;flex-direction:column;gap:20px}
.titulo{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between}
.titulo h1{margin:0;font-size:26px}
.ruta{font-size:13px;color:var(--muted)}
.acciones{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.aviso{padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;background:var(--warn-bg);color:var(--warn)}
.aviso.ok{background:var(--ok-bg);color:var(--ok)}
.aviso.bad{background:var(--bad-bg);color:var(--bad)}
.aviso.info{background:var(--accent-soft);color:var(--accent-dark)}
.columnas{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.col-principal{flex:3 1 640px;min-width:0;display:flex;flex-direction:column;gap:16px}
.col-lateral{flex:1 1 320px;max-width:100%;display:flex;flex-direction:column;gap:16px}
.tarjeta{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:20px;display:flex;flex-direction:column;gap:16px}
.tarjeta h2{margin:0;font-size:16px}
.tarjeta h3{margin:0;font-size:14px}
.cab{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.total-pagar{background:var(--head);color:#E8E6E0;border-radius:10px;padding:20px;display:flex;flex-direction:column;gap:6px}
.total-pagar .monto{font:600 26px var(--mono);color:#fff}
.total-pagar .det{font-size:12px;color:#A9B1BC}
/* Documentos de registro (Jose, 15-oct-2026: el panel de la derecha quitaba espacio): el resumen (total-pagar), sus tarjetas y los botones
   van en una franja arriba y el formulario usa todo el ancho, como la factura de Ventas, el expediente de importación y la obra */
/* Jose, 15-oct-2026 ("cámbialas también"): igual en las fichas de proveedor y cliente y en el recibo, que tenían columna de consulta */
.columnas:has(> .col-lateral){flex-direction:column;flex-wrap:nowrap;align-items:stretch}
.columnas:has(> .col-lateral) > .col-principal{flex:1 1 auto;width:100%}
.columnas:has(> .col-lateral) > .col-lateral{order:-1;flex:0 0 auto;flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:12px}
.columnas > .col-lateral > .total-pagar{flex:0 1 300px;padding:12px 16px;gap:2px}
.columnas > .col-lateral > .total-pagar .monto{font-size:20px}
.columnas:has(> .col-lateral) > .col-lateral > .tarjeta{flex:1 1 340px;padding:12px 16px;gap:8px;max-height:240px;overflow:auto}
.columnas:has(> .col-lateral) > .col-lateral > .acciones{flex:0 1 auto;align-self:center}

/* Tablas */
/* La tabla se desplaza dentro de su caja para que el encabezado quede fijo arriba al bajar */
.tabla{overflow:auto;max-height:max(320px, calc(100vh - var(--alto-cab,98px) - 180px));border:1px solid var(--line);border-radius:8px}
.tabla .tabla{max-height:none}
.tabla .tabla thead th{position:static}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
thead th{position:sticky;top:0;z-index:2;box-shadow:inset 0 -1px 0 var(--line)}
th{padding:10px 12px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);text-align:left;background:var(--sunk);white-space:nowrap}
td{padding:8px 12px;border-top:1px solid var(--line);vertical-align:top}
tr.total td{font-weight:700}
tbody tr.clic{cursor:pointer}
tbody tr.clic:hover{background:var(--accent-soft)}
tbody tr.clic td:first-child{color:var(--accent);font-weight:600}
tbody tr.clic:hover td:first-child{text-decoration:underline}
.ayuda-clic{margin-top:6px;font-size:12px}
/* Columnas fijas al desplazar de lado (Jose, 19-oct-2026): en las tablas más anchas que su caja, la primera columna
   (número) y, si son angostas, también la segunda (fecha) se quedan a la vista. Las marca fijarColumnas() en compras.js. */
.tabla.fijar1 tr > :first-child:not([colspan]),
.tabla.fijar2 tr > :first-child:not([colspan]){position:sticky;left:0;z-index:1;background-color:var(--surface)}
.tabla.fijar2 tr:has(> :first-child:not([colspan])) > :nth-child(2):not([colspan]){position:sticky;left:var(--fija1,0px);z-index:1;background-color:var(--surface)}
.tabla.fijar1 tr > :first-child:not([colspan]),
.tabla.fijar2 tr:has(> :first-child:not([colspan])) > :nth-child(2):not([colspan]){box-shadow:inset -1px 0 0 var(--line2)}
.tabla.fijar1 thead tr > th:first-child:not([colspan]),
.tabla.fijar2 thead tr > th:first-child:not([colspan]),
/* El título de la segunda columna fija lleva el mismo :has() que la regla de las celdas: si no, esa regla le ganaba (z-index 1)
   y los números de la lista se veían encima del encabezado al bajar (Jose, 22-oct-2026, Consulta de compras) */
.tabla.fijar2 thead tr:has(> :first-child:not([colspan])) > th:nth-child(2):not([colspan]){z-index:3;background-color:var(--sunk);box-shadow:inset 0 -1px 0 var(--line),inset -1px 0 0 var(--line2)}
.tabla.fijar2 thead tr > th:first-child:not([colspan]){box-shadow:inset 0 -1px 0 var(--line)}
.tabla.fijar2 tbody tr > td:first-child:not([colspan]){box-shadow:none}
tbody tr.clic:hover > td:is(:first-child,:nth-child(2)){background-image:linear-gradient(var(--accent-soft),var(--accent-soft))}
/* Celdas de una sola línea: el texto largo se corta con "…" y completo va en el title (Diario, Jose 19-oct-2026) */
td.nowrap{white-space:nowrap}
.una-linea{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(28vw,380px)}
.una-linea.corta{max-width:180px}
.una-linea.media{max-width:280px}
/* Fechas, números de documento, NCF y cuentas no se parten en dos líneas (Jose, 21-oct-2026); lo que va debajo (.sub) sí puede */
.tabla td.mono{white-space:nowrap}
.tabla td.mono .sub{white-space:normal}
.celda input,.celda select{min-height:38px;font-size:14px;padding:0 8px}
.celda input.num{text-align:right}
.sub{font:500 12px var(--mono);color:var(--muted);margin-top:4px}
.etiqueta{display:inline-block;padding:3px 8px;border-radius:10px;font-size:12px;font-weight:600;background:var(--accent-soft);color:var(--accent-dark);white-space:nowrap}
.etiqueta.Borrador{background:#ECEBE6;color:var(--muted)}
.etiqueta.Por\ revisar{background:var(--warn-bg);color:var(--warn)}
.etiqueta.Registrada{background:var(--ok-bg);color:var(--ok)}
.etiqueta.Anulada{background:var(--bad-bg);color:var(--bad)}
.etiqueta.alerta{background:var(--warn-bg);color:var(--warn);margin-top:4px}
tr.cta-grupo td{background:var(--sunk)}
/* Diario general: total de cada asiento (línea doble arriba de los montos, como en el libro) */
tr.subtotal td{border-top:1px solid var(--line2);padding-top:4px;padding-bottom:10px}
tr.subtotal td.num{border-top:3px double var(--line2)}
tr.muted td{color:var(--muted);background:var(--sunk)}
.tramo{display:inline-flex;flex-direction:column;align-items:flex-end;gap:2px;min-height:44px;padding:4px 8px;border:1px solid transparent;border-radius:8px;background:none;font:600 15px var(--mono);cursor:pointer;color:var(--fg)}
.tramo span{font:400 11px var(--sans);color:var(--muted)}
button.tramo:hover{border-color:var(--line2);background:var(--sunk)}
button.tramo[aria-expanded="true"]{border-color:var(--accent);background:var(--accent-soft)}
.tramo.vacio{color:var(--muted);font-weight:400;cursor:default}

/* Exportar */
.exportar{position:relative}
.exportar>summary{list-style:none}
.exportar>summary::-webkit-details-marker{display:none}
.exportar>summary::after{content:"▾";font-size:11px;color:var(--muted)}
.exportar .menu{position:fixed;z-index:50;min-width:190px;border:1px solid var(--line2);border-radius:8px;background:#fff;box-shadow:0 8px 24px rgba(28,36,48,.12);overflow:hidden}
.exportar .menu button{display:block;width:100%;min-height:44px;padding:0 14px;border:0;border-top:1px solid var(--line);background:#fff;text-align:left;cursor:pointer;font-size:14px}
.exportar .menu button:first-child{border-top:0}
.exportar .menu button:hover{background:var(--accent-soft)}
.exportar .menu button[disabled]{color:var(--muted);cursor:not-allowed;background:#fff}
/* Factura al estilo Odoo (Jose, 13-oct-2026): menú de acciones, barra de estados, pestañas y totales abajo */
.menu-acc .menu{position:absolute;right:0;top:calc(100% + 4px)}
.pasos{display:flex;list-style:none;margin:0;padding:0;border:1px solid var(--line2);border-radius:8px;overflow:hidden;font-size:13px}
.pasos li{padding:0 20px 0 26px;min-height:40px;display:flex;align-items:center;white-space:nowrap;color:var(--muted);background:var(--surface);position:relative}
.pasos li:first-child{padding-left:14px}
.pasos li+li::before{content:"";position:absolute;left:0;top:9px;width:20px;height:20px;border-top:1px solid var(--line2);border-right:1px solid var(--line2);transform:translateX(-50%) rotate(45deg);background:var(--surface);z-index:1}
.pasos li.actual+li::before{background:var(--accent-soft)}
.pasos li:not(.actual){z-index:0}
.pasos li.hecho{color:var(--fg)}
.pasos li.actual{background:var(--accent-soft);color:var(--accent-dark);font-weight:700}
.pestanas{display:flex;gap:2px;border-bottom:1px solid var(--line2);margin-bottom:-8px;flex-wrap:wrap}
.pestanas button{min-height:42px;padding:0 16px;border:1px solid transparent;border-bottom:0;border-radius:8px 8px 0 0;background:none;font-size:14px;cursor:pointer;color:var(--muted)}
.pestanas button[aria-selected="true"]{background:var(--surface);border-color:var(--line2);color:var(--fg);font-weight:600;margin-bottom:-1px;border-top:3px solid var(--accent)}
.totales{display:grid;grid-template-columns:auto auto;gap:6px 24px;margin-left:auto;font-size:14px;text-align:right;min-width:280px;border-top:1px solid var(--line);padding-top:10px}
.totales .fuerte{font-weight:700;font-size:16px}

/* Buscador de proveedor */
.buscador{position:relative}
.opciones{position:absolute;z-index:5;left:0;right:0;top:100%;margin-top:4px;border:1px solid var(--line2);border-radius:8px;background:#fff;box-shadow:0 8px 24px rgba(28,36,48,.12);overflow:hidden}
.opciones button{display:flex;justify-content:space-between;gap:12px;width:100%;padding:10px 12px;border:0;border-top:1px solid var(--line);background:#fff;text-align:left;cursor:pointer;font-size:14px}
.opciones button:first-child{border-top:0}
.opciones button:hover,.opciones button.activo{background:var(--accent-soft)}
.opciones .doc{font:500 12px var(--mono);color:var(--muted)}
.panel{border:1px dashed #9AA3AE;border-radius:10px;background:var(--sunk);padding:14px;display:flex;flex-direction:column;gap:12px}

/* Asiento, controles y mensajes */
.asiento{display:flex;flex-direction:column;gap:8px;font-size:13px}
.asiento div{display:flex;justify-content:space-between;gap:8px}
.asiento .cr{padding-left:14px}
.asiento .sep{border-top:1px solid var(--line);padding-top:8px}
.kv{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:13px}
.kv span:nth-child(odd){color:var(--muted)}
.controles{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13px}
.controles li{display:grid;grid-template-columns:14px 1fr;gap:8px;align-items:start}
.punto{width:10px;height:10px;border-radius:50%;margin-top:4px;background:var(--ok)}
.punto.warn{background:#C47A16}.punto.bad{background:#B3261E}
.mensaje{padding:12px 14px;border-radius:8px;font-size:14px}
.mensaje.ok{background:var(--ok-bg);color:var(--ok)}
.mensaje.bad{background:var(--bad-bg);color:var(--bad)}
.mensaje.info{background:var(--accent-soft);color:var(--accent-dark)}
.vacio{padding:28px;text-align:center;color:var(--muted)}
dialog{border:0;border-radius:12px;padding:0;max-width:min(480px,calc(100vw - 32px));box-shadow:0 20px 50px rgba(0,0,0,.25)}
dialog form{padding:22px;display:flex;flex-direction:column;gap:14px}
dialog h2{margin:0;font-size:18px}
dialog::backdrop{background:rgba(28,36,48,.45)}

/* Densidad compacta en escritorio (Jose, 14-oct-2026: "muchos espacios entre una y otra sección, se hace muy larga la entrada").
   En pantallas táctiles angostas se mantienen los 44 px; en escritorio, campos de 34 px y menos relleno entre secciones. */
td input,td select{min-height:32px;padding:0 8px;border-radius:6px;border:1px solid var(--line2);background:var(--surface);font-size:14px;font-family:inherit}
td input.num{text-align:right}
textarea{padding:8px 10px;border-radius:8px;border:1px solid var(--line2);background:var(--surface);font-size:14px;font-family:inherit;width:100%}
@media (min-width:900px){
  main{padding:16px clamp(16px,2vw,28px) 32px;gap:12px}
  .titulo{gap:10px}
  .titulo h1{font-size:22px}
  .tarjeta{padding:14px 16px;gap:10px;border-radius:8px}
  .tarjeta h2{font-size:15px}
  .fila{gap:10px}
  .campo{gap:3px}
  .campo>label,.campo>.et{font-size:11.5px}
  .campo input,.campo select,.celda input,.celda select,.campo .fijo{min-height:34px;padding:0 10px;font-size:14px;border-radius:6px}
  .btn{min-height:34px;padding:0 12px;border-radius:6px}
  .btn.chico{min-height:28px;padding:0 8px}
  .pestanas{margin-bottom:-4px}
  .pestanas button{min-height:34px;padding:0 12px}
  .mensaje{padding:8px 12px}
  th{padding:7px 10px}
  td{padding:5px 10px}
  /* Las listas con la letra de las etiquetas de estado: un poco más pequeña y con algo de peso (Jose, 22-oct-2026: "Registrada… más
     pequeña… estéticamente se ve mejor"); los títulos de columna, los totales y lo que va debajo (.sub) bajan en proporción */
  table{font-size:13px}
  td{font-weight:500}
  td .sub{font-size:11.5px;margin-top:2px}
  .totales{gap:4px 20px;padding-top:6px}
  .columnas{gap:12px}
  details>summary{padding:2px 0}
  /* Encabezado más bajo para dejar más espacio a las tablas (Jose, 19-oct-2026) */
  main{padding-top:12px;gap:10px}
  .ruta{font-size:12px}
  .titulo h1{font-size:20px;line-height:1.2}
  .titulo .acciones{gap:6px}
  .btn{min-height:32px;font-size:13.5px}
  /* Barras de filtros: una tarjeta-formulario de una sola fila lleva la etiqueta al lado del campo y menos relleno */
  form.tarjeta:has(> .fila:only-child){padding:8px 12px}
  form.tarjeta:has(> .fila:only-child) > .fila{align-items:center;gap:8px 14px}
  form.tarjeta:has(> .fila:only-child) > .fila > .campo{flex-direction:row;align-items:center;gap:8px}
  form.tarjeta:has(> .fila:only-child) > .fila > .campo > label{white-space:nowrap}
  form.tarjeta:has(> .fila:only-child) > .fila > .campo > :is(input, select, .con-calendario){flex:1 1 auto;min-width:0}
}
/* Contenedores de avisos vacíos no ocupan espacio entre secciones */
main>:empty,main>div:empty{display:none}
.titulo .pasos li{min-height:32px}

/* Bandeja de fotos (fotos.js) y pestaña Documento de la factura de compra */
.fotos-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.foto-tarjeta{border:1px solid var(--line);border-radius:10px;background:var(--surface);display:flex;flex-direction:column;overflow:hidden}
.foto-img{display:grid;place-items:center;height:200px;background:var(--sunk);overflow:hidden}
.foto-img img{width:100%;height:100%;object-fit:cover}
.foto-pdf{font-weight:700;font-size:22px;color:var(--muted)}
.foto-datos{padding:8px 10px;font-size:14px;display:flex;flex-direction:column;gap:2px}
.foto-tarjeta .acciones{padding:0 10px 10px;display:flex;flex-wrap:wrap;gap:6px}
.fotos-doc{display:flex;flex-wrap:wrap;gap:12px}
.fotos-doc img{max-width:min(100%,640px);max-height:560px;border:1px solid var(--line);border-radius:8px;display:block}
.fotos-doc figure{margin:0;display:flex;flex-direction:column;gap:6px}
.fotos-doc figcaption{display:flex;gap:10px;align-items:center;justify-content:space-between;font-size:12.5px}
/* Clip de documento adjunto (Jose, 21-oct-2026) */
svg.clip{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;margin-right:4px;flex:none}
.pestanas button svg.clip{width:14px;height:14px}
.foto-datos .qr-dato,#fb-lista .qr-dato{color:var(--accent-dark)}
#fb-lista .qr-aviso{color:var(--bad);font-weight:600}
#vista.buscando .tabla,#vista.buscando .vacio,#vista.buscando .tarjeta:not(form){opacity:.4;transition:opacity .15s}
.tabla tr.fila-sin-resultados td{padding:18px 12px;text-align:center;color:var(--muted);font-style:italic;background:var(--sunk)}
/* Selector de periodo como Odoo (Jose, 21-oct-2026): Mes / Trimestre / Año con ◂ ▸ y Fechas personalizadas */
/* Nivel de permiso (Administración › Roles y permisos): V R A P C con su nombre al pasar el puntero */
.nivel-chip{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 4px;border-radius:5px;background:var(--accent-soft);color:var(--accent-dark);font-size:11px;font-weight:700}
.periodo{position:relative;display:inline-block}
/* ◂ año ▸ (Cierre › Períodos): flechas pegadas al año, como el selector de periodo */
.anio-nav{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:8px;background:var(--surface)}
.anio-nav .btn{border:0;min-height:32px;padding:0 10px;color:var(--muted);background:transparent;font-size:16px}
.anio-nav .btn:disabled{opacity:.3}
.anio-nav-valor{padding:0 6px;font-weight:600;font-variant-numeric:tabular-nums}
.periodo-btn{gap:6px;font-weight:600;white-space:nowrap}
/* Menú compacto (Jose, 22-oct-2026: "estrecharse los márgenes verticales y horizontales para que no tome tanto espacio") */
.periodo-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:30;min-width:280px;background:var(--surface);border:1px solid var(--line2);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.14);padding:3px 0;font-size:13px}
.periodo-fila{display:grid;grid-template-columns:16px 76px 20px 1fr 20px;align-items:center;padding:0 6px}
.periodo-fila.activo{background:var(--sunk)}
.periodo-marca{color:var(--accent);font-weight:700}
.periodo-menu button{background:none;border:0;cursor:pointer;font:inherit;color:var(--fg);min-height:28px;padding:0 4px;text-align:left}
.periodo-fila.activo .periodo-nombre{font-weight:700}
.periodo-valor{text-align:center!important}
.periodo-flecha{color:var(--muted)!important;font-size:12px}
.periodo-flecha:disabled{opacity:.3;cursor:default!important}
.periodo-menu button:hover{color:var(--accent)}
.periodo-menu hr{border:0;border-top:1px solid var(--line);margin:3px 0}
.periodo-extra{display:block;width:100%;padding:0 10px!important}
.periodo-extra.activo{font-weight:700;background:var(--sunk)}
.periodo-rango{display:flex;gap:4px;align-items:center;padding:4px 8px 5px}
.periodo-rango input{min-height:28px!important;width:118px;font-size:13px!important;padding:0 6px!important;border-radius:6px}
.periodo-rango .con-calendario,.periodo-rango .con-calendario>input{min-width:118px;width:118px!important;flex:none}
.periodo-rango .con-calendario{display:inline-block}
.periodo-rango .con-calendario>input{padding-right:28px!important}
.periodo-rango .btn-cal{width:24px;height:24px;right:2px}
.periodo-rango .btn-cal svg{width:15px;height:15px}
.periodo-rango .btn{min-height:28px;padding:0 10px}
.periodo-rango input{min-height:36px;width:120px;border:1px solid var(--line2);border-radius:6px;padding:0 8px}
/* Documentos por pedir */
.dp-resumen{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.dp-chip{display:inline-flex;gap:8px;align-items:center;padding:6px 12px;border:1px solid var(--line2);border-radius:999px;background:var(--surface);text-decoration:none;color:var(--fg);font-size:13.5px}
.dp-chip b{background:var(--accent);color:#fff;border-radius:999px;padding:0 8px;font-size:12px}
input.guardado{border-color:var(--ok)!important;background:var(--ok-bg)!important}
.pendiente-motivo{font-size:12.5px;color:var(--warn);background:var(--warn-bg);border-radius:6px;padding:4px 8px;margin:4px 0}
.pendiente-motivo.grave{color:var(--bad);background:var(--bad-bg);font-weight:600}
/* Bandeja: "Subir fotos" plegable y barra de acciones fija al bajar (Jose, 21-oct-2026: "se pierde la parte de arriba") */
details.subir-fotos>summary{display:flex;gap:12px;align-items:baseline;cursor:pointer;list-style:none}
details.subir-fotos>summary::-webkit-details-marker{display:none}
details.subir-fotos>summary h2{margin:0}
details.subir-fotos>summary h2::before{content:'▸ ';color:var(--accent)}
details.subir-fotos[open]>summary h2::before{content:'▾ '}
details.subir-fotos[open]>summary .muted{display:none}
details.subir-fotos[open]>summary{margin-bottom:12px}
.masivo-fotos{position:sticky;top:var(--alto-cab,98px);z-index:6;box-shadow:0 2px 6px rgba(0,0,0,.06)}
/* Bandeja en lista con casillas (Jose, 21-oct-2026) */
.masivo-fotos{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--sunk)}
.masivo-fotos label{display:flex;gap:6px;align-items:center;font-size:14px}
.masivo-fotos select{min-height:34px;border-radius:6px;border:1px solid var(--line2);background:var(--surface);padding:0 8px}
a.foto-mini{display:block;width:56px;height:56px;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:var(--sunk)}
a.foto-mini img{width:100%;height:100%;object-fit:cover;display:block}
a.foto-mini .foto-pdf{display:grid;place-items:center;height:100%;font-size:12px;font-weight:700}
.cola-fotos{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;padding:10px 14px;border:1px solid var(--accent);border-radius:8px;background:var(--accent-soft);margin-bottom:12px}
.foto-datos .qr-aviso{color:var(--bad);font-weight:600}
td .clip-n{color:var(--accent);white-space:nowrap;font-size:12px;font-weight:600}

/* Carga masiva: tarjetas para escoger qué se carga (Jose, 19-oct-2026) */
.cm-tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px }
.cm-tipo { display: flex; flex-direction: column; gap: 4px; text-align: left; border: 1px solid var(--line); background: var(--surface); color: var(--fg); border-radius: 10px; padding: 12px 14px; cursor: pointer; text-decoration: none; font: inherit }
.cm-tipo span { color: var(--muted); font-size: 13px; line-height: 1.4 }
.cm-tipo:hover { border-color: var(--accent) }
.cm-tipo[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent) }
.cm-tipo .cm-ir { font-style: normal; font-size: 12px; font-weight: 600; color: var(--accent); margin-top: auto; padding-top: 4px }
.cm-destacado { box-shadow: 0 0 0 3px var(--accent); transition: box-shadow .4s ease }
@media (prefers-reduced-motion: reduce) { .cm-destacado { transition: none } }
/* Ordenar por columna (Jose, 19-oct-2026): flecha al pasar por el título; la de la columna ordenada se queda */
th.ordenable { cursor: pointer; user-select: none; white-space: nowrap }
th.ordenable::after { content: " ↕"; opacity: 0; font-size: 11px; transition: opacity .15s }
th.ordenable:hover::after { opacity: .55 }
th.ordenable[aria-sort="ascending"]::after { content: " ▲"; opacity: .9 }
th.ordenable[aria-sort="descending"]::after { content: " ▼"; opacity: .9 }
th.ordenable:hover { color: var(--accent) }
/* Escoger columnas (Jose, 19-oct-2026) */
.col-oculta { display: none !important }
th.con-columnas { padding-right: 30px !important; position: sticky }
/* Ancla del botón de columnas: hija de la caja que se desplaza, alto cero, pegada arriba a la izquierda y del ancho visible */
.cols-ancla { position: sticky; top: 0; left: 0; height: 0; z-index: 6 }
.cols-ancla .btn-columnas { top: 6px; transform: none; box-shadow: 0 0 0 3px var(--sunk) }
.btn-columnas { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; padding: 0; border: 1px solid var(--line2); border-radius: 6px; background: var(--surface); color: var(--muted); display: grid; place-items: center; cursor: pointer }
.btn-columnas:hover { color: var(--accent); border-color: var(--accent) }
.btn-columnas svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round }
.menu-columnas { position: fixed; z-index: 50; background: var(--surface); color: var(--fg); border: 1px solid var(--line2); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; min-width: 200px }
.menu-columnas label { display: flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; white-space: nowrap }
.menu-columnas input { width: 16px; height: 16px; accent-color: var(--accent) }
/* Abrir o cerrar cuentas de grupo en los estados (Jose, 20-oct-2026, como Odoo) */
.fila-oculta { display: none }
.tog-cta { border: 0; background: none; padding: 0; width: 18px; margin-right: 4px; color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1 }
.tog-cta:hover { color: var(--accent) }
.tog-vacio { display: inline-block; width: 22px }
td.negativo { color: var(--bad) }

/* Ayuda dentro del sistema (Jose, 20-oct-2026): panel al lado, F1 o botón Ayuda; Escape lo cierra */
#ayuda { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 100vw); z-index: 900; background: var(--surface); border-left: 1px solid var(--line2); box-shadow: -6px 0 24px rgba(0,0,0,.12); display: flex; flex-direction: column; color: var(--fg) }
#ayuda .ay-cab { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--head); color: #fff }
#ayuda .ay-cab .btn { background: transparent; color: #fff; border-color: var(--head-line) }
#ayuda #ay-q { margin: 10px 14px; padding: 8px 10px; border: 1px solid var(--line2); border-radius: 8px; background: var(--surface) }
#ayuda #ay-cuerpo { flex: 1; overflow: auto; padding: 0 14px 18px; font-size: 14px }
#ayuda h3 { margin: 6px 0 6px; font-size: 17px }
#ayuda h4 { margin: 14px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted) }
#ayuda ol { margin: 0; padding-left: 20px }
#ayuda li { margin: 0 0 6px }
#ayuda dl { margin: 0 }
#ayuda dt { font-weight: 600; margin-top: 6px }
#ayuda dd { margin: 0 0 2px; color: var(--muted) }
#ayuda .ay-err dt { color: var(--bad) }
#ayuda .ay-nota { color: var(--muted) }
#ayuda .ay-ver { display: flex; flex-wrap: wrap; gap: 6px }
#ayuda .ay-link { border: 1px solid var(--line2); background: var(--accent-soft); color: var(--accent-dark); border-radius: 999px; padding: 3px 10px; font-size: 13px; cursor: pointer }
#ayuda .ay-link:hover { border-color: var(--accent) }
#ayuda .ay-res { display: block; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 8px 10px; margin: 0 0 6px; cursor: pointer }
#ayuda .ay-res:hover { border-color: var(--accent); background: var(--accent-soft) }
#ayuda .ay-res span { display: block; color: var(--muted); font-size: 13px }
#ayuda .ay-todos { margin-top: 22px }
@media (min-width: 1200px) { body.con-ayuda #v-app { margin-right: 400px } }
/* Ayuda: secciones que se abren con un clic (Jose, 20-oct-2026: el panel era muy largo) */
#ayuda details summary{cursor:pointer;font-weight:600;margin:8px 0}
#ayuda details.ay-grupo{margin-left:6px}
#ayuda details.ay-mas summary{font-size:14px}
#ayuda .ay-link.ay-actual{font-weight:700}

/* Ayuda: aviso de la primera vez y enlace en pantallas vacías (Jose, 20-oct-2026) */
#ay-aviso{position:fixed;right:20px;bottom:20px;z-index:60;max-width:340px;background:var(--panel,#fff);color:var(--ink,#1f2328);border:1px solid var(--line,#d0d7de);border-left:4px solid var(--accent,#0f5c63);border-radius:10px;padding:12px 14px;box-shadow:0 8px 24px rgba(0,0,0,.18);font-size:14px}
#ay-aviso p{margin:0 0 10px}
#ay-aviso kbd{border:1px solid var(--line,#d0d7de);border-radius:4px;padding:0 4px;font-size:12px}
.ay-empezar{background:none;border:0;color:var(--accent,#0f5c63);text-decoration:underline;cursor:pointer;font:inherit;padding:0}

/* Ayuda: el error que se está explicando (desde '¿Cómo se resuelve?') */
#ayuda .ay-foco{background:var(--accent-soft,#e6f2f2);border-radius:4px;padding:2px 4px}
.mensaje .ay-resolver{margin-left:6px;font-weight:600}
#ayuda .ay-solucion{background:var(--accent-soft,#e6f2f2);border-left:4px solid var(--accent,#0f5c63);border-radius:6px;padding:8px 12px;margin:4px 0 12px}
#ayuda .ay-solucion p{margin:4px 0}

/* Botón que el usuario no puede usar por su rol (permisosBotones en compras.js) */
.sin-permiso { display: none !important; }

/* Botón de autorizaciones del encabezado: cuántas esperan respuesta */
#b-autorizaciones .contador { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--bad); color: var(--surface); font-size: 11px; line-height: 18px; text-align: center; }

/* Correo del encabezado: abre "Cambiar mi contraseña"; aviso de vencimiento cercano */
.enlace-usuario { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px }
.aviso-clave { color: var(--lavanda); font-weight: 600 }

/* Empresa del encabezado: botón que abre la lista de empresas del usuario (cambiar aquí o abrir en otra pestaña) */
button.pastilla { font: inherit; font-weight: 500; cursor: pointer }
button.pastilla:hover { border-color: var(--lavanda) }
.menu-empresas { position: fixed; z-index: 50; background: var(--surface); color: var(--fg); border: 1px solid var(--line2); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; max-height: 70vh; min-width: 280px; max-width: min(420px, calc(100vw - 16px)) }
.menu-empresas .me-lista { overflow-y: auto; display: flex; flex-direction: column; gap: 2px }
.menu-empresas .me-fila { display: flex; gap: 6px; align-items: center }
.menu-empresas .me-fila[hidden] { display: none }
.menu-empresas .me-nombre { flex: 1; text-align: left; background: none; border: 0; border-radius: 6px; padding: 6px 8px; font: inherit; font-weight: 600; color: var(--fg); cursor: pointer; display: flex; flex-direction: column }
.menu-empresas .me-nombre:hover { background: var(--accent-soft) }
.menu-empresas .me-nombre.actual { color: var(--accent); background: var(--accent-soft) }
.menu-empresas .me-nombre .sub { font-weight: 400 }

/* Aviso de cierre de la sesión por inactividad (a los 28 minutos sin usar el sistema) */
.aviso-inactividad { position: fixed; z-index: 100; left: 50%; top: 24px; transform: translateX(-50%); width: min(520px, calc(100vw - 32px)); background: var(--surface); color: var(--fg); border: 1px solid var(--line2); border-left: 4px solid var(--accent); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.2); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px }
.aviso-inactividad .btn { align-self: flex-start }

/* Escoger empresa al entrar (usuario con varias empresas) */
#vista .me-lista { display: flex; flex-direction: column; gap: 4px; max-width: 520px }
#vista .me-nombre { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font: inherit; font-weight: 600; color: var(--fg); cursor: pointer; display: flex; flex-direction: column }
#vista .me-nombre:hover { border-color: var(--accent); background: var(--accent-soft) }
#vista .me-nombre .sub { font-weight: 400 }

/* Factura de compra nueva: empezar por la foto o el PDF */
.empezar-foto { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 12px; margin: 0 0 12px; background: var(--accent-soft); border-radius: 8px; font-size: 13.5px }
.empezar-foto > span:first-child { flex: 1 1 320px }
.empezar-foto svg.clip { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; margin-right: 6px; vertical-align: -3px }
.empezar-foto .btn svg.clip { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; margin-right: 6px; vertical-align: -3px }

/* Bandeja de fotos: foto leída con IA, lista para revisar */
.pendiente-motivo.ia-leida { background: var(--ok-bg); color: var(--ok) }

/* Buscador rápido de las listas que no traen el suyo (filtroRapido) */
.filtro-rapido { display: flex; align-items: center; gap: 10px; margin: 0 0 8px }
.filtro-rapido input { flex: 0 1 460px; min-width: 200px }
.filtro-rapido .muted { font-size: 12.5px }

/* Barra del título con sus botones (Guardar, Registrar, Volver, Exportar…) fija arriba al bajar en todas las pantallas
   (Jose, 24-oct-2026: "al bajar con la barra lateral se pierde; Citrus repite lo mismo arriba y abajo, pero si se fija sería
   mucho mejor"). Queda pegada debajo del encabezado; --alto-titulo (medido en compras.js) corre lo que también se pega. */
@media (min-width: 700px) {
  #vista > .titulo { position: sticky; top: var(--alto-cab, 98px); z-index: 7; background: var(--bg); margin: -12px 0 0; padding: 12px 0 10px; box-shadow: 0 1px 0 var(--line) }
  .masivo-fotos { top: calc(var(--alto-cab, 98px) + var(--alto-titulo, 0px)) }
}

/* Buscador dentro de una barra de filtros: ocupa lo que sobra y nunca queda sin ancho (Jose, 24-oct-2026, Pagos procesados:
   "no trae el recuadro y no cabe"); el texto largo de la etiqueta pasa al campo (buscadoresCortos en compras.js) */
@media (min-width: 900px) {
  form.tarjeta:has(> .fila:only-child) > .fila > .campo:has(> input[type="search"]) { flex: 2 1 300px }
  form.tarjeta:has(> .fila:only-child) > .fila > .campo > input[type="search"] { min-width: 200px }
}
/* Calidad de fotos: problemas al subir y "Tomar de nuevo" */
.avisos-calidad ul { margin: 6px 0 4px 18px; padding: 0 }
.avisos-calidad li { margin: 3px 0 }
label.tomar-nuevo { cursor: pointer; margin-left: 6px }
.consejos-foto { margin: 2px 0 6px }
/* Empresa preferida: estrella en la lista de empresas y casilla al escoger */
.menu-empresas .me-pref { font-size: 15px; color: var(--muted) }
.menu-empresas .me-pref.activa { color: var(--accent) }
.me-siempre { display: flex; gap: 8px; align-items: center; margin: 10px 0 4px; font-size: 14px }
.me-siempre input { width: 18px; height: 18px; flex: none }
/* Documentos por pedir: cada sección se marca o desmarca */
label.dp-chip { cursor: pointer }
.dp-chip input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent) }
.dp-chip.apagada { opacity: .55; border-style: dashed }
.dp-chip.apagada b { background: var(--muted) }
.dp-chip.dp-todas { font-weight: 600; border-color: var(--accent) }
/* Aviso de documentos sin procesar en los informes financieros */
.aviso-pendientes ul { margin: 6px 0 6px 18px; padding: 0 }
.aviso-pendientes li { margin: 2px 0 }
/* IA como pago adicional: marca ✦ IA en botones y menú; sin IA en la empresa, los botones de IA no salen */
.ia-marca { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--lavanda); color: var(--accent-dark);
  font-size: 11px; font-weight: 700; line-height: 18px; letter-spacing: .02em; vertical-align: middle; white-space: nowrap }
.btn.primario .ia-marca { background: #fff; color: var(--accent) }
body:not(.con-ia) [data-ia-boton] { display: none !important }
/* La marca en el encabezado (empresa con IA), al lado del nombre de la empresa */
header.app .ia-encabezado { align-self: center; margin: 0 2px 0 0; font-size: 12px; line-height: 22px; padding: 0 9px; text-decoration: none }
/* Preguntar a la IA, dentro del panel de ayuda */
#ayuda .ay-pestanas { display: flex; gap: 6px; padding: 10px 14px 0 }
#ayuda .ay-pestanas button { flex: 1; padding: 7px 8px; border: 1px solid var(--line2); border-radius: 8px; background: var(--surface); color: var(--fg); cursor: pointer; font: inherit; font-size: 13.5px }
#ayuda .ay-pestanas button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); font-weight: 600 }
#ayuda #ay-q[hidden] { display: none }
#ayuda .ay-chat { display: flex; flex-direction: column; gap: 8px; padding-top: 10px }
#ayuda .ay-msj { padding: 8px 10px; border-radius: 10px; max-width: 92%; line-height: 1.45 }
#ayuda .ay-msj.usuario { align-self: flex-end; background: var(--accent); color: #fff }
#ayuda .ay-msj.ia { align-self: flex-start; background: var(--accent-soft); border: 1px solid var(--line2) }
#ayuda .ay-msj p { margin: 0 0 6px } #ayuda .ay-msj p:last-child { margin: 0 }
#ayuda .ay-msj ul { margin: 4px 0 6px 18px; padding: 0 }
#ayuda .ay-pensando { font-style: italic; color: var(--muted) }
#ayuda .ay-sugeridas { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 }
#ayuda .ay-sug { padding: 5px 10px; border: 1px solid var(--lavanda); border-radius: 999px; background: var(--surface); color: var(--accent-dark); cursor: pointer; font: inherit; font-size: 12.5px; text-align: left }
#ayuda .ay-sug:hover { background: var(--accent-soft) }
#ayuda .ay-form textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line2); border-radius: 8px; font: inherit; resize: vertical }
#ayuda .ay-form-acc { display: flex; gap: 6px; margin-top: 6px }

/* Asistente de arranque: tipos de empresa y casillas */
.opciones-tipo { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px }
.opcion-tipo { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line2); border-radius: 10px; background: var(--surface); cursor: pointer }
.opcion-tipo:has(input:checked) { border-color: var(--accent); background: var(--accent-soft) }
.opcion-tipo input { margin-top: 3px }
.opcion-tipo .sub { display: block; margin-top: 2px }
label.check { display: flex; gap: 8px; align-items: center; margin-top: 8px; cursor: pointer }

/* Estados financieros con notas: el documento en pantalla (al imprimir se abre aparte con su propio estilo) */
.ef-doc { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; color: var(--fg) }
.ef-doc .ef-pag { background: #fff; color: #12202E; border: 1px solid var(--line2); border-radius: 10px; padding: 28px 34px; max-width: 900px; box-shadow: 0 1px 3px rgba(0,0,0,.06) }
.ef-doc .ef-cab { text-align: center; margin-bottom: 14px }
.ef-doc .ef-razon { font-weight: 700; font-size: 15px } .ef-doc .ef-tit { font-weight: 700; font-size: 14px; color: #4338CA; margin-top: 2px } .ef-doc .ef-sub { font-size: 12px; color: #4A5562 }
.ef-doc .ef-t { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 6px 0 12px; font-variant-numeric: tabular-nums }
.ef-doc .ef-t th { text-align: left; border-bottom: 1px solid #12202E; padding: 4px 6px; font-weight: 600 }
.ef-doc .ef-t td { padding: 3px 6px } .ef-doc .ef-t .num { text-align: right; white-space: nowrap } .ef-doc .ef-t td:first-child { min-width: 200px }
.ef-doc .ef-nota { color: #4A5562; white-space: nowrap; font-size: 11.5px }
.ef-doc .ef-grupo td { font-weight: 700; padding-top: 10px } .ef-doc .ef-sgrupo td { font-weight: 600; padding-top: 8px }
.ef-doc .ef-sub-total td { border-top: 1px solid #A5B4FC; font-weight: 600 }
.ef-doc .ef-total td { border-top: 1px solid #12202E; font-weight: 700 } .ef-doc .ef-doble td.num { border-bottom: 3px double #12202E }
.ef-doc .ef-ita { font-style: italic; color: #4A5562 } .ef-doc .ef-form { color: #4A5562; font-size: 11.5px }
.ef-doc .ef-p { font-size: 13px; line-height: 1.55; text-align: justify; margin: 0 0 8px }
.ef-doc .ef-n { font-size: 14px; margin: 16px 0 6px } .ef-doc .ef-sn { font-size: 13px; margin: 10px 0 4px }
.ef-doc .ef-nt { width: 80% } .ef-doc .ef-pie { font-size: 11.5px; color: #4A5562; font-style: italic }
.ef-doc .ef-portada { text-align: center; padding-top: 70px; padding-bottom: 70px } .ef-doc .ef-razon-g { font-size: 24px; font-weight: 700 } .ef-doc .ef-tit-g { font-size: 19px; color: #4338CA; margin: 8px 0 }
.ef-doc .ef-port-med { margin-top: 40px; font-size: 13px; color: #4A5562; line-height: 1.8 } .ef-doc .ef-port-pie { margin-top: 60px; font-size: 12.5px; line-height: 1.6 }
.ef-doc .ef-firma { margin-top: 40px; font-size: 12.5px; line-height: 1.5 }
.ef-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px 14px; margin-top: 8px }
.ef-campos .ef-sec { grid-column: 1 / -1; font-size: 12px; letter-spacing: .04em; color: var(--muted); margin: 10px 0 0 }
details.tarjeta > summary { cursor: pointer }
.ef-doc .ef-firmas { display: flex; justify-content: space-around; gap: 30px; margin-top: 40px; font-size: 12px; text-align: center }
.ef-doc .ef-firma-col { width: 38% } .ef-doc .ef-linea { border-top: 1px solid #12202E; margin-bottom: 4px } .ef-doc .ef-rol { color: #4A5562; font-style: italic }

/* Manufactura: el nombre real de una materia prima nunca sale en papel (las químicas protegen sus fórmulas) */
@media print { .nombre-real, .solo-pantalla { display: none !important; } }

/* ¿Cómo me va? (nivel Emprendedor): las cifras arriba, las tareas debajo */
.cmv-cifras{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.cmv-cifra{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--fg);margin:0}
.cmv-cifra b{font-size:24px;font-variant-numeric:tabular-nums}
a.cmv-cifra[href]:hover{border-color:var(--accent)}
/* Nivel Emprendedor (dueño o vendedor, no el contador): en las facturas no salen las pestañas contables */
body.nivel-corto .pestanas [data-pestana="retenciones"], body.nivel-corto .pestanas [data-pestana="asiento"], body.nivel-corto .pestanas [data-pestana="dgii"]{display:none}
body.nivel-corto table.lineas-compra tr > :first-child:not([colspan]){display:none}

/* Celular (nivel Emprendedor, Jose 22-oct-2026: "botones del tamaño del dedo, pocos toques, solo lo indispensable"):
   ¿Cómo me va? con cifras en dos columnas y tareas grandes; en Vender, Cobrar y Foto de una factura el botón principal queda
   abajo al alcance del pulgar y las líneas de venta pasan a tarjetas. Letra de 16 px en los campos para que el celular no acerque. */
@media (max-width: 600px) {
  .cmv-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
  .cmv-cifra { padding: 12px }
  .cmv-cifra b { font-size: 18px; overflow-wrap: anywhere }
  body.en-inicio .mosaicos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
  body.en-inicio .mosaico { min-height: 84px; justify-content: center; padding: 14px 10px }
  body.en-inicio .mosaico b { font-size: 16px }
  body.en-inicio #vista input, body.en-inicio #vista select { font-size: 16px; min-height: 44px }
  body.en-inicio #vista .btn { min-height: 44px }
  #vista:has(#rv-facturar, #rc-registrar, #rq-guardar) { padding-bottom: 84px }
  #rv-facturar, #rc-registrar, #rq-guardar { position: fixed; left: 16px; right: 16px; bottom: 14px; z-index: 30; min-height: 52px; font-size: 17px; box-shadow: 0 4px 16px rgba(18,32,46,.25) }
  table.rapido-lineas, table.rapido-lineas tbody, table.rapido-lineas tr { display: block; min-width: 0 !important }
  table.rapido-lineas thead { display: none }
  table.rapido-lineas tr { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 6px 8px; padding: 10px 0; border-bottom: 1px solid var(--line) }
  table.rapido-lineas td { display: block; min-width: 0 !important; max-width: none !important; border: 0; padding: 0 }
  table.rapido-lineas td.rp-prod { grid-column: 1 / -1 }
  table.rapido-lineas td[data-l]::before { content: attr(data-l); display: block; font-size: 12px; color: var(--muted) }
}
/* Punto de equilibrio: tablas cortas de cifras (cómo sale y el simulador) */
.tabla-kv{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tabla-kv td{padding:6px 4px;border-bottom:1px solid var(--line)}
.tabla-kv td.num{text-align:right;white-space:nowrap}
/* Estado de resultados gerencial */
.eg-encabezado { text-align: center; margin: 4px 0 12px; line-height: 1.5; }
.tabla tr.eg-sub td { border-top: 1px solid var(--fg); font-weight: 600; }
.tabla tr.eg-titulo td { background: var(--accent-soft); color: var(--accent-dark); padding-top: 8px; }
.tabla tr.eg-sin td { color: var(--warn); font-style: italic; }
.tabla th.centro { text-align: center; }
/* Calendario fiscal: estado de cada obligación */
.ef-mal{color:var(--bad);font-weight:600}.ef-aviso{color:var(--warn);font-weight:600}.ef-bien{color:var(--ok);font-weight:600}

/* Mi cuenta ContIA (Administración › Empresa): datos en rejilla, interruptores de lo incluido y los adicionales */
.kv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 20px}
.kv-grid>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.cu-dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.cu-dos>.tarjeta{margin:0}
.cu-balance{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-weight:700}
.cu-balance b{font-size:20px;color:var(--fg);font-variant-numeric:tabular-nums}
.cu-ops{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.cu-op{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);min-width:0}
.cu-op.on{border-color:var(--accent);background:var(--accent-soft)}
.cu-op.apagado{opacity:.6}
.cu-contador{display:inline-flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.cu-contador .btn{border:0;border-radius:0;min-width:44px}
.cu-contador input{width:90px;text-align:center;border:0;border-inline:1px solid var(--line2);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--surface);color:var(--fg)}
.interruptor{position:relative;display:inline-block;width:44px;height:24px;flex:0 0 auto}
.interruptor input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.interruptor span{position:absolute;inset:0;border-radius:999px;background:var(--line2);transition:background .15s}
.interruptor span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s}
.interruptor input:checked+span{background:var(--accent)}
.interruptor input:checked+span::after{transform:translateX(20px)}
.interruptor input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.interruptor input:disabled{cursor:not-allowed}
body.en-despacho #h-ia{display:none}   /* el despacho está por encima de las empresas: sin la marca de IA de una empresa */