/* Colores del sistema. El modo oscuro (Configuración → Apariencia) solo cambia estos valores. */
:root {
  color-scheme: light;
  --fondo: #f5f6f8; --texto: #1d2329; --borde: #d6dae0; --acento: #1f5fae; --error: #b42318; --suave: #6b7480;
  --superficie: #fff; --superficie-2: #f7f8fa; --superficie-3: #fafbfc; --superficie-4: #f1f3f6; --campo: #fff; --linea: #eceef1; --borde-2: #d5d9de;
  --deshabilitado: #eef0f3; --deshabilitado-texto: #555; --apagado: #b5bcc4; --perilla: #c4cad1; --boton: #1f5fae;
  --azul-claro: #e8f1fb; --azul-suave: #f3f8fd; --azul-suave-2: #f3f8fe; --azul-suave-3: #f5f9fe; --azul-borde: #b9d3f0; --azul-borde-2: #c9dbf1;
  --verde: #1e8e3e; --verde-hover: #17733a; --verde-texto: #1e7b3c; --verde-claro: #e3f4e8; --verde-claro-2: #e6f4ea; --verde-borde: #b7dfc3; --verde-borde-2: #b8e0c4;
  --rojo-claro: #fbe9e7; --rojo-claro-2: #fdecea; --rojo-borde: #f0c2bc; --rojo-fuerte: #b42318;
  --amarillo-claro: #fff4d6; --amarillo-claro-2: #fff8e6; --amarillo-claro-3: #fdf3e1; --amarillo-borde: #f3dca2; --amarillo-borde-2: #f2d49b;
  --amarillo-texto: #8a5a00; --amarillo-texto-2: #b26a00; --amarillo-linea: #d99a00; --naranja-claro: #ffedd5; --naranja-texto: #c2410c;
}
/* Al imprimir se usan siempre los colores claros. */
@media screen {
  :root[data-tema="oscuro"] {
    color-scheme: dark;
    --fondo: #121519; --texto: #e3e6ea; --borde: #343b44; --acento: #8ab4f8; --error: #f28b82; --suave: #9aa3ae;
    --superficie: #1c2026; --superficie-2: #232830; --superficie-3: #20252c; --superficie-4: #262c34; --campo: #15181d; --linea: #2b3139; --borde-2: #3a424c;
    --deshabilitado: #22272e; --deshabilitado-texto: #8a939e; --apagado: #5b6470; --perilla: #4a535e; --boton: #2f6fc0;
    --azul-claro: #1f3249; --azul-suave: #1a2635; --azul-suave-2: #1a2635; --azul-suave-3: #1a2635; --azul-borde: #2f4c70; --azul-borde-2: #2f4c70;
    --verde: #6fcf8f; --verde-hover: #8ddca6; --verde-texto: #6fcf8f; --verde-claro: #183324; --verde-claro-2: #183324; --verde-borde: #2e5b3f; --verde-borde-2: #2e5b3f;
    --rojo-claro: #3a1f1d; --rojo-claro-2: #3a1f1d; --rojo-borde: #6b322b; --rojo-fuerte: #c5372a;
    --amarillo-claro: #33290f; --amarillo-claro-2: #33290f; --amarillo-claro-3: #33290f; --amarillo-borde: #6b5520; --amarillo-borde-2: #6b5520;
    --amarillo-texto: #f0c264; --amarillo-texto-2: #f0c264; --amarillo-linea: #c08a1a; --naranja-claro: #3a2414; --naranja-texto: #fdba74;
  }
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: var(--fondo); color: var(--texto); }
a { color: var(--acento); }
.barra { display: flex; align-items: center; gap: 24px; padding: 12px 24px; background: var(--superficie); border-bottom: 1px solid var(--borde); }
.barra nav { display: flex; align-items: center; gap: 16px; flex: 1; }
.barra nav a { text-decoration: none; }
.marca { font-weight: 700; text-decoration: none; color: var(--texto); }
/* Menú: Contabilidad agrupa sus secciones en un desplegable. */
.grupo { position: relative; }
.abrir-grupo { display: inline-flex; align-items: center; gap: 4px; padding: 0; background: none; color: var(--acento); border-radius: 0; }
.abrir-grupo svg.flecha { transition: transform .15s; }
.grupo.abierto .abrir-grupo svg.flecha { transform: rotate(180deg); }
.submenu { display: none; position: absolute; top: calc(100% + 14px); left: -14px; z-index: 30; min-width: 210px; padding: 6px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 10px 28px rgba(16, 24, 40, .14); }
.grupo.abierto .submenu { display: flex; flex-direction: column; }
.barra .submenu a { padding: 9px 12px; border-radius: 6px; color: var(--texto); white-space: nowrap; }
.barra .submenu a:hover { background: var(--azul-suave); color: var(--acento); }
/* Análisis va primero y en verde, para distinguirlo del resto. */
.barra .submenu a.verde { color: var(--verde); }
.barra .submenu a.verde:hover, .barra nav .submenu a.verde.actual { background: var(--verde-claro-2); color: var(--verde-hover); }
.salir { display: flex; align-items: center; gap: 12px; color: var(--suave); font-size: 14px; }
main { max-width: 1200px; margin: 0 auto; padding: 24px 16px; }
.encabezado { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
/* «Volver a…» arriba, a la derecha del título (en el celular, encima). */
.titulo-volver { display: flex; justify-content: space-between; align-items: center; gap: 4px 16px; width: 100%; }
.titulo-volver > .volver { white-space: nowrap; }
@media (max-width: 640px) { .titulo-volver { flex-direction: column-reverse; align-items: flex-start; } .titulo-volver > .volver { white-space: normal; } }
.tarjeta { display: block; background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; padding: 16px 20px; text-decoration: none; color: inherit; }
.tarjeta.angosta { max-width: 360px; margin: 64px auto; }
.tarjeta.apagada { color: var(--suave); }
.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: 14px; }
label.tilde { flex-direction: row; align-items: center; margin: 0; }
input, select, textarea { font: inherit; padding: 8px; border: 1px solid var(--borde); border-radius: 6px; background: var(--campo); color: var(--texto); }
input:disabled, select:disabled, textarea:disabled { background: var(--deshabilitado); color: var(--deshabilitado-texto); cursor: not-allowed; }
option { background: var(--campo); color: var(--texto); }
input[type=checkbox] { width: auto; }
button, .boton { font: inherit; padding: 8px 16px; border: 0; border-radius: 6px; background: var(--boton); color: #fff; cursor: pointer; text-decoration: none; }
.salir button { background: transparent; color: var(--acento); padding: 0; }
.formulario { background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; padding: 20px; max-width: 560px; }
.acciones { display: flex; gap: 16px; align-items: center; margin-top: 8px; }
.buscador { display: flex; gap: 12px; align-items: center; margin: 16px 0; }
.buscador input[type=search] { flex: 1; }
table { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--borde); }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borde); font-size: 14px; }
tr.inactivo { color: var(--suave); }
.datos { display: grid; grid-template-columns: 200px 1fr; gap: 8px 16px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; padding: 20px; }
.datos dt { color: var(--suave); }
.datos dd { margin: 0; }
.datos .logo-empresa { display: block; max-width: 100%; max-height: 48px; object-fit: contain; object-position: left center; }
.aviso { background: var(--azul-claro); border: 1px solid var(--azul-borde); padding: 10px 14px; border-radius: 6px; }
.error { color: var(--error); font-size: 13px; }
small, .registro { color: var(--suave); font-size: 13px; }
@media (max-width: 640px) { .barra { flex-wrap: wrap; } .datos { grid-template-columns: 1fr; } }
.formulario.ancho { max-width: none; }
.columnas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; }
.renglones input, .renglones select { width: 100%; }
.renglones td { vertical-align: top; }
.numero { text-align: right; }
.boton.secundario { background: var(--superficie); color: var(--acento); border: 1px solid var(--acento); }
.boton.peligro { background: var(--superficie); color: var(--error); border: 1px solid var(--error); }
.estado { font-size: 13px; font-weight: 400; padding: 2px 8px; border-radius: 10px; background: var(--linea); color: var(--suave); vertical-align: middle; }
.estado.aprobado { background: var(--verde-claro); color: var(--verde-texto); }
.estado.rechazado { background: var(--rojo-claro); color: var(--error); }
.estado.pendiente { background: var(--amarillo-claro); color: var(--amarillo-texto); }
.aviso.malo { background: var(--rojo-claro); border-color: var(--rojo-borde); }
.aviso.bueno { background: var(--verde-claro); border-color: var(--verde-borde); }
@media (max-width: 640px) { .renglones { display: block; overflow-x: auto; } }
[hidden] { display: none !important; }
.previsto { background: var(--azul-claro); border: 1px solid var(--azul-borde); padding: 10px 14px; border-radius: 6px; margin: 0 0 16px; }
.previsto:empty { display: none; }
label .boton { align-self: flex-start; margin-top: 4px; }
.campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: 14px; }
.campo > label { margin: 0; }
.varios-correos { display: flex; flex-direction: column; gap: 8px; }
.renglon-correo { display: flex; gap: 6px; align-items: center; }
.renglon-correo input { flex: 1; min-width: 0; }
.quitar-correo { flex: none; width: 36px; height: 36px; padding: 0; font-size: 22px; line-height: 1; background: transparent; color: var(--suave); border: 1px solid var(--borde); }
.quitar-correo:hover { color: var(--error); border-color: var(--error); }
.agregar-correo { align-self: flex-start; }
.renglones td.angosto input { width: 70px; }
label input[type=checkbox] { align-self: flex-start; }
.selector-mes { position: relative; display: flex; align-items: center; gap: 4px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; padding: 4px; }
.selector-mes .flecha { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; font-size: 20px; text-decoration: none; color: var(--acento); background: transparent; border: 0; padding: 0; cursor: pointer; }
.selector-mes .flecha:hover { background: var(--azul-claro); }
.mes-elegido { min-width: 170px; background: transparent; color: var(--texto); font-weight: 600; font-size: 15px; border: 0; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.mes-elegido:hover { background: var(--azul-claro); }
.panel-meses { position: absolute; top: calc(100% + 6px); right: 0; z-index: 10; width: 260px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); padding: 12px; }
.panel-anio { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.grilla-meses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.grilla-meses a { text-align: center; padding: 10px 0; border-radius: 6px; text-decoration: none; color: var(--texto); }
.grilla-meses a:hover { background: var(--azul-claro); }
.grilla-meses a.actual { background: var(--boton); color: #fff; }
.renglones td.con-sugerencias { position: relative; min-width: 220px; }
.sugerencias { position: absolute; left: 0; right: -240px; top: calc(100% - 4px); z-index: 20; background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); overflow: hidden; }
.sugerencia { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; cursor: pointer; }
.sugerencia small { color: var(--suave); }
.sugerencia.activa, .sugerencia:hover { background: var(--azul-claro); }
.renglones .subtotal { white-space: nowrap; padding-top: 14px; }
.renglones td.quitar { text-align: center; }
.boton-quitar { background: transparent; color: var(--suave); border: 0; font-size: 16px; padding: 8px; cursor: pointer; }
.boton-quitar:hover { color: var(--error); }
tr.renglon.quitado td { opacity: 0.4; text-decoration: line-through; }
tr.renglon.quitado .boton-quitar { opacity: 1; color: var(--error); text-decoration: none; }
/* Archivo con cruz para quitarlo (logo, imagen de la firma): la cruz va dentro del recuadro, a la derecha. */
.archivo-quitable { position: relative; display: block; }
.archivo-quitable input[type=file] { width: 100%; padding-right: 40px; }
.archivo-quitable .boton-quitar { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
#totales td, #totales th { border-bottom: 0; }
.renglones select { min-width: 84px; }
.en-linea { display: inline; margin: 0; }
.cobro { display: inline-block; white-space: nowrap; font-size: 13px; padding: 3px 10px; border-radius: 12px; background: var(--linea); color: var(--suave); border: 1px solid var(--borde-2); text-decoration: none; cursor: pointer; }
.cobro.vencida { background: var(--rojo-claro); color: var(--error); border-color: var(--rojo-borde); font-weight: 600; }
.cobro.cobrado { background: var(--verde-claro); color: var(--verde-texto); border-color: var(--verde-borde-2); }
span.cobro { cursor: default; }
.atraso { white-space: nowrap; color: var(--error); }
.te-deben { margin: 16px 0; }
.te-deben table { margin-top: 8px; background: var(--superficie); }
td.numero, .estado { white-space: nowrap; }
.encabezado .acciones { flex-wrap: wrap; gap: 8px; }
.encabezado .acciones .boton, .encabezado .acciones button { white-space: nowrap; }
.boton.chico { font-size: 14px; padding: 5px 12px; white-space: nowrap; }
.icono { vertical-align: -3px; margin-right: 6px; }
.obligatorio { color: var(--error); font-weight: 600; }
.campo-fecha { position: relative; display: block; }
.campo-fecha input[type=text] { width: 100%; box-sizing: border-box; padding-right: 40px; }
.icono-calendario { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: transparent; color: var(--acento); border: 0; padding: 6px; border-radius: 6px; cursor: pointer; line-height: 0; }
.icono-calendario:hover { background: var(--azul-claro); }
.panel-calendario { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 280px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); padding: 12px; font-size: 14px; }
.cal-cabeza { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-cabeza .flecha { width: 32px; height: 32px; border-radius: 6px; font-size: 20px; color: var(--acento); background: transparent; border: 0; padding: 0; cursor: pointer; }
.cal-cabeza .flecha:hover { background: var(--azul-claro); }
.cal-grilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-grilla span { font-size: 12px; color: var(--suave); padding: 4px 0; }
.cal-grilla .dia { background: transparent; color: var(--texto); border: 0; border-radius: 6px; padding: 7px 0; cursor: pointer; font-size: 14px; }
.cal-grilla .dia:hover { background: var(--azul-claro); }
.cal-grilla .dia.otro-mes { color: var(--apagado); }
.cal-grilla .dia.hoy { box-shadow: inset 0 0 0 1px var(--acento); }
.cal-grilla .dia.elegido { background: var(--boton); color: #fff; }
.renglones td.cantidad input { width: 80px; }
.renglones select[name$="unidad"] { min-width: 120px; }
.renglones input[name$="precio_unitario"] { min-width: 100px; }
.cal-titulo { background: transparent; color: var(--texto); font-weight: 600; font-size: 15px; border: 0; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.cal-titulo:hover { background: var(--azul-claro); }
.cal-cabeza strong { font-size: 15px; }
.cal-meses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cal-meses button { background: transparent; color: var(--texto); border: 0; padding: 12px 0; border-radius: 6px; cursor: pointer; font-size: 15px; }
.cal-meses button:hover { background: var(--azul-claro); }
.cal-meses button.actual { background: var(--boton); color: #fff; }
.campo-buscador { position: relative; display: block; }
.campo-buscador input[type=text] { width: 100%; box-sizing: border-box; }
/* Campo de una línea que crece con el texto (el alto lo pone la pantalla de factura). */
textarea.crece { display: block; width: 100%; box-sizing: border-box; resize: none; overflow-y: auto; line-height: 1.15; }
.campo-buscador .sugerencias { right: auto; min-width: 100%; width: max-content; max-width: 480px; top: calc(100% + 4px); max-height: 320px; overflow-y: auto; }
.sugerencia.vacia { color: var(--suave); cursor: default; }
.boton.verde { background: #1e8e3e; color: #fff; }
.boton.verde:hover { background: #17733a; }
.boton.rojo { background: var(--rojo-fuerte); color: #fff; }
.boton.rojo:hover { background: #8f1c13; }
td .boton.chico + .boton.chico { margin-left: 4px; }
.letra-grande { display: inline-block; min-width: 1.6em; padding: 0 8px; margin-left: 8px; border: 2px solid var(--acento); border-radius: 8px; color: var(--acento); text-align: center; vertical-align: middle; font-size: 0.9em; line-height: 1.4; }
td.sin-cortar { white-space: nowrap; }
.pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.pasos h2 { margin: 0 0 8px; font-size: 18px; }
.pasos .hecho h2::after { content: " ✓"; color: var(--verde); }
.pasos ol { padding-left: 20px; }
.pasos ol li, .pasos .servicios-arca li { margin-bottom: 6px; }
.pasos h3 { margin: 18px 0 6px; font-size: 16px; }
.pasos .servicios-arca { padding-left: 20px; margin: 4px 0 12px; }
button:disabled { opacity: .5; cursor: not-allowed; }
.clave-copias { font-family: ui-monospace, Consolas, monospace; font-size: 1.4em; letter-spacing: 1px; margin: 12px 0; }
details.tarjeta { margin: 16px 0; }
details.tarjeta summary { cursor: pointer; }
.tabla-ancha { overflow-x: auto; }
tr.fila-total th { background: var(--superficie-2); white-space: nowrap; }
.renglones td.extra input[type=file] { max-width: 220px; padding: 5px; }
.renglones input.aplicar { max-width: 160px; }
#resumen { margin: 16px 0; max-width: 560px; }
tr.pendiente[data-elegido] td { background: var(--azul-suave-2); }
.renglones select[name$="-tipo"] { min-width: 230px; }
.seccion { margin-top: 16px; }
.seccion h2 { margin-top: 0; }
.qr-dos-pasos { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.qr-dos-pasos svg { flex: none; border: 1px solid var(--borde); border-radius: 6px; }
.codigos-recuperacion { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 24px; font-family: ui-monospace, Consolas, monospace; font-size: 1.2em; }
@media print { .barra, .acciones { display: none; } }
button.enlace { background: transparent; color: var(--acento); padding: 0; text-decoration: underline; font-size: inherit; }
.renglones .solo-cheque:not([hidden]) { display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
.renglones .solo-terceros select { min-width: 260px; }
.renglones .importe-cheque { display: block; padding: 8px 0; font-weight: 600; white-space: nowrap; }
.renglones .importe-cheque[hidden] { display: none; }
.filtros { display: flex; gap: 4px; flex-wrap: wrap; margin: 16px 0 0; }
.filtros a { padding: 6px 14px; border-radius: 16px; text-decoration: none; color: var(--texto); background: var(--linea); }
.filtros a.actual { background: var(--boton); color: #fff; }
.filtros + .tabla-ancha { margin-top: 12px; }
.atraso-fuerte { color: var(--error); font-weight: 600; }
.deposito { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 16px 0; }
.deposito label { margin: 0; }
.deposito #campo-detalle { flex: 1; max-width: 420px; }
.conciliacion td { vertical-align: top; }
.propuesta ul { margin: 4px 0; padding-left: 18px; }
.propuesta small { display: block; margin-top: 4px; }
.botones-fila { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 150px; }
.botones-fila.en-linea { flex-wrap: nowrap; justify-content: flex-end; }
.botones-fila.en-linea .boton.chico { padding: 5px 9px; }
.botones-fila.en-linea .boton.chico + .boton.chico { margin-left: 0; }
.confirmar-todos { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 12px 0; }
h2.sin-margen { margin-top: 0; }
/* Inicio: lo que requiere atención (rojo) separado de las tareas pendientes (azul). */
.bloque { background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid var(--acento); border-radius: 8px; padding: 12px 18px; margin: 16px 0; }
.bloque.urgente { border-left-color: var(--error); }
.bloque h2 { font-size: 16px; margin: 0 0 4px; color: var(--acento); }
.bloque.urgente h2 { color: var(--error); }
.bloque .item { margin: 0; padding: 10px 0; border-top: 1px solid var(--borde); }
.bloque h2 + .item { border-top: 0; }
.bloque .te-deben { margin: 0; }
/* Avisos del inicio y de Cobranzas: tarjeta con ícono y cada aviso con su botón al costado. */
.bloque.avisos { border: 1px solid var(--borde); border-radius: 12px; padding: 4px 20px; box-shadow: 0 1px 3px rgba(16, 24, 40, .06); }
.bloque.avisos h2 { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 0 10px; font-size: 16px; color: var(--texto); }
.bloque.avisos h2::before { content: ""; flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--azul-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2M12 11h4M12 16h4M8 11h.01M8 16h.01'/%3E%3C/svg%3E") center / 18px no-repeat; }
.bloque.avisos.urgente h2::before { background-color: var(--rojo-claro-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b42318' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4M12 17h.01'/%3E%3C/svg%3E"); }
.bloque.avisos .item { padding: 14px 0; border-top: 1px solid var(--linea); }
.bloque.avisos p.item { display: flex; align-items: center; gap: 10px 16px; }
.bloque.avisos p.item > span { flex: 1; min-width: 0; line-height: 1.45; }
.sin-avisos { margin: 16px 0; padding: 20px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; color: var(--suave); text-align: center; }
.bloque.avisos ~ .sin-avisos { display: none; }
/* Aviso del sistema arriba de cada pantalla: mismo diseño que los avisos del inicio. */
.aviso-sistema { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; margin: 0 0 16px; padding: 12px 16px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 1px 3px rgba(16, 24, 40, .06); line-height: 1.45; }
.aviso-sistema::before { content: ""; width: 32px; height: 32px; border-radius: 8px; background: var(--rojo-claro-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b42318' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4M12 17h.01'/%3E%3C/svg%3E") center / 18px no-repeat; }
/* Estado de un servicio automático (la lectura de ARCA): una tarjeta con el ícono del estado, el texto y la acción. */
.estado-servicio { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 4px 14px; margin: 16px 0 20px; padding: 16px 18px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 1px 3px rgba(16, 24, 40, .06); line-height: 1.45; }
.estado-servicio-icono { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--azul-claro); color: var(--acento); }
.estado-servicio-icono .ic { width: 20px; height: 20px; }
.estado-servicio.mal .estado-servicio-icono { background: var(--rojo-claro-2); color: var(--error); }
.estado-servicio.bien .estado-servicio-icono { background: var(--verde-claro-2); color: var(--verde-texto); }
.estado-servicio.pausa .estado-servicio-icono { background: var(--superficie-4); color: var(--suave); }
.estado-servicio-texto { min-width: 0; }
.estado-servicio h2 { margin: 6px 0 4px; font-size: 16px; color: var(--texto); }
.estado-servicio-texto > p { margin: 0 0 4px; }
.estado-servicio-meta { color: var(--suave); font-size: 13px; }
.estado-servicio > form { margin: 0; align-self: center; }
.estado-servicio.bien { background: var(--verde-claro); border-color: var(--verde-borde); }
.estado-servicio.bien .estado-servicio-icono { background: var(--superficie); }
.estado-servicio-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-self: center; justify-content: flex-end; }
.estado-servicio-acciones form { margin: 0; }
.estado-servicio-detalle { margin-top: 10px; font-size: 13px; }
.estado-servicio-detalle h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--suave); }
.estado-servicio-detalle p { margin: 6px 0 0; overflow-wrap: anywhere; }
.estado-servicio-detalle > p:first-of-type { padding: 8px 10px; background: var(--superficie-2); border: 1px solid var(--linea); border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
@media (max-width: 640px) {
  .estado-servicio { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
  .estado-servicio > form, .estado-servicio-acciones { grid-column: 2; justify-self: start; justify-content: flex-start; margin-top: 6px; }
}
.bloque.avisos .accion, .aviso-sistema .accion { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 7px 10px 7px 14px; border: 1px solid var(--azul-borde-2); border-radius: 999px; background: var(--azul-suave-3); color: var(--acento); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.bloque.avisos .accion::after, .aviso-sistema .accion::after { content: ""; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5fae' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.bloque.avisos .accion:hover, .aviso-sistema .accion:hover { background: var(--azul-claro); border-color: var(--acento); }
.oracion { line-height: 2.6; margin: 12px 0 4px; }
.oracion input { width: 72px; padding: 4px 8px; line-height: normal; }
.correo { background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; padding: 20px; margin-top: 16px; line-height: 1.6; max-width: 760px; white-space: pre-wrap; }
.dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.dos-columnas .formulario { max-width: none; }
.dos-columnas textarea { width: 100%; box-sizing: border-box; }
.dos-columnas .correo { margin-top: 12px; max-width: none; }
.datos-correo { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
@media (max-width: 900px) { .dos-columnas { grid-template-columns: 1fr; } }
/* Compras */
table.importes { max-width: 480px; }
.importes-iva { max-width: 560px; margin-bottom: 12px; }
.importes-iva td:first-child { width: 90px; padding-top: 18px; }
.datos .deposito { margin: 8px 0 0; }
.zona-archivo { position: relative; border: 2px dashed var(--azul-borde); border-radius: 10px; background: var(--azul-suave); padding: 18px 20px 18px 64px; margin-bottom: 12px; min-height: 40px; transition: background 0.15s, border-color 0.15s; }
.zona-archivo::before { content: ""; position: absolute; left: 20px; top: 50%; width: 30px; height: 30px; transform: translateY(-50%); background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M12 18v-6M9 15l3-3 3 3'/%3E%3C/svg%3E"); }
.zona-archivo:hover, .zona-archivo.encima { background: var(--azul-claro); border-color: var(--acento); }
.zona-archivo input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.zona-archivo .error { font-size: 13px; }
.zona-celu { display: none; }
.lectura { background: var(--amarillo-claro-2); border: 1px solid var(--amarillo-borde); border-radius: 6px; padding: 10px 14px; margin-bottom: 16px; font-size: 14px; }
.lectura p { margin: 0 0 6px; }
.lectura p:last-child { margin-bottom: 0; }
.lectura .leido { color: var(--verde-texto); font-weight: 600; }
.lectura.solo-leido { background: var(--verde-claro); border-color: var(--verde-borde); }
.proveedor-nuevo { grid-column: 1 / -1; background: var(--azul-suave); border: 1px solid var(--azul-borde); border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; }
.proveedor-nuevo .en-fila { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin: 8px 0 4px; }
.proveedor-nuevo label { margin: 0; flex: 1 1 180px; }
.proveedor-nuevo small.error { color: var(--error); }
.nota-periodo { font-size: 14px; color: var(--suave); margin: 0 0 12px; }
.mas-campos { margin: 0 0 12px; font-size: 14px; }
.mas-campos button.enlace { text-align: left; }
.importes-iva input { width: 100%; box-sizing: border-box; min-width: 0; }
.total-compra { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: flex-end; justify-content: space-between; border-top: 1px solid var(--borde); padding-top: 12px; margin: 8px 0 12px; }
.total-compra .suma { font-size: 20px; padding-bottom: 12px; }
.total-compra label { margin-bottom: 4px; }
.total-factura { flex: 0 1 260px; }
#control-total { display: block; font-size: 13px; min-height: 18px; }
#control-total.coincide { color: var(--verde-texto); font-weight: 600; }
.filtros .cantidad { display: inline-block; min-width: 1.4em; margin-left: 4px; padding: 0 6px; border-radius: 10px; background: var(--superficie); color: var(--texto); font-size: 12px; font-weight: 600; text-align: center; }
.filtros a.con-vencidas .cantidad { background: var(--rojo-fuerte); color: #fff; }
.a-pagar { margin: 12px 0 0; font-size: 15px; }
.estado.para-revisar { background: var(--amarillo-claro); color: var(--amarillo-texto); }
.estado.precios-sin { background: var(--azul-claro); color: var(--acento); }
/* El pedido al que lleva «Ver pedido», marcado en la lista. */
tr:target, tr:target > td { background: var(--verde-claro); }
.mensaje-cliente { white-space: normal; overflow-wrap: anywhere; }
.estado.sin-facturar { background: var(--naranja-claro); color: var(--naranja-texto); }
.bloque.revisar-factura { border-left-color: var(--amarillo-linea); }
/* Bancos y caja sin la cuenta bancaria cargada: solo se explica cómo habilitarlo. */
/* Cuadro con ícono, con el mismo diseño que los avisos de Inicio. */
.tarjeta-aviso { display: flex; gap: 16px; align-items: flex-start; max-width: 760px; margin: 16px 0; padding: 20px 24px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 1px 3px rgba(16, 24, 40, .06); }
.tarjeta-aviso::before { content: ""; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--azul-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 22h18M6 18v-7M10 18v-7M14 18v-7M18 18v-7M12 2l8 5H4z'/%3E%3C/svg%3E") center / 22px no-repeat; }
.tarjeta-aviso.conexion::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-5M9 8V2M15 8V2M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8z'/%3E%3C/svg%3E"); }
.tarjeta-aviso > div { flex: 1; min-width: 0; }
.tarjeta-aviso h2 { margin: 2px 0 6px; font-size: 17px; color: var(--texto); }
.tarjeta-aviso p { margin: 0; color: var(--suave); line-height: 1.5; }
.tarjeta-aviso p + .acciones, .tarjeta-aviso p + p { margin-top: 14px; }
.titulo-lista { margin: 24px 0 12px; }
.titulo-lista .boton { display: inline-block; margin-bottom: 14px; }
.titulo-lista .botones-lista { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.titulo-lista .botones-lista .boton { margin: 0; }
.titulo-lista h2 { margin: 0; }
.bloque.revisar-factura h2 { color: var(--amarillo-texto); }
.bloque .acciones form { margin: 0; }
.aviso-revisar { color: var(--amarillo-texto); }
.revisar-correo { margin-top: 12px; }
.revisar-correo p { margin: 0 0 8px; }
.revisar-correo p:last-child { margin-bottom: 0; }
/* Importar de ARCA (Mis Comprobantes): opciones, pasos y cifras del resultado. */
fieldset.opciones { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
fieldset.opciones legend { padding: 0; margin-bottom: 4px; font-size: 14px; }
fieldset.opciones label.tilde { gap: 8px; font-size: 15px; }
ol.pasos-cortos { margin: 0 0 12px; padding-left: 20px; }
ol.pasos-cortos li { margin-bottom: 4px; }
.cifras { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.cifras span { background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; padding: 4px 12px; font-size: 14px; }
.cifras span.mala { background: var(--rojo-claro); border-color: var(--rojo-borde); color: var(--error); }
#constatacion ol { padding-left: 20px; }
.cortar { overflow-wrap: anywhere; }
.abrir-menu { display: none; }
.barra nav a.actual { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.marca.actual, .abrir-grupo.actual { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.abrir-grupo.actual { font-weight: 600; }
.barra nav .submenu a.actual { text-decoration: none; background: var(--azul-claro); color: var(--acento); }
.solo-celu { display: none; }
.encabezado .secundarias { display: contents; }
.datos dd.fila-entera { grid-column: 2; }
.datos .atraso { white-space: normal; }
.revisar-correo form { margin: 0 0 8px; }
details.desplegable { margin: 16px 0; }
details.desplegable > summary { cursor: pointer; color: var(--acento); font-weight: 600; padding: 6px 0; }
details.desplegable[open] > summary { margin-bottom: 12px; }
/* Celular: menú plegado, títulos más chicos y listas como tarjetas. */
@media (max-width: 640px) {
  .barra { padding: 10px 16px; gap: 0; }
  .abrir-menu { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; background: var(--superficie); color: var(--acento); border: 1px solid var(--borde); padding: 6px 12px; }
  .barra nav, .barra .salir { display: none; }
  .barra.abierta nav { display: flex; flex-direction: column; align-items: stretch; flex-basis: 100%; gap: 0; margin-top: 10px; border-top: 1px solid var(--borde); }
  .barra.abierta nav a { padding: 12px 8px; border-bottom: 1px solid var(--linea); font-size: 17px; }
  .barra.abierta nav a.actual { text-decoration: none; color: var(--texto); background: var(--azul-suave); box-shadow: inset 3px 0 0 var(--acento); }
  .barra.abierta .salir { display: flex; flex-basis: 100%; justify-content: space-between; padding: 12px 8px 2px; font-size: 15px; }
  /* Contabilidad: en el celular también se despliega al tocarla, con sus secciones debajo. */
  .barra.abierta .grupo { display: flex; flex-direction: column; }
  .barra.abierta .abrir-grupo { justify-content: space-between; width: 100%; padding: 12px 8px; border-bottom: 1px solid var(--linea); font-size: 17px; text-align: left; }
  .barra.abierta .abrir-grupo.actual { text-decoration: none; color: var(--texto); background: var(--azul-suave); box-shadow: inset 3px 0 0 var(--acento); }
  .barra.abierta .grupo.abierto .abrir-grupo.actual { background: none; box-shadow: none; }
  .barra.abierta .submenu { position: static; min-width: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
  .barra.abierta .submenu a { padding: 12px 8px 12px 24px; border-radius: 0; color: var(--acento); background: var(--superficie-3); }
  .barra.abierta nav .submenu a.actual { background: var(--azul-suave); color: var(--texto); box-shadow: inset 3px 0 0 var(--acento); }
  .barra.abierta .submenu a.verde { color: var(--verde); }
  .barra.abierta nav .submenu a.verde.actual { background: var(--verde-claro-2); color: var(--texto); box-shadow: inset 3px 0 0 var(--verde); }
  .bloque.avisos { padding: 2px 16px; }
  .bloque.avisos p.item { flex-wrap: wrap; }
  .bloque.avisos p.item > span { flex-basis: 100%; }
  .aviso-sistema { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: 12px 14px; }
  .aviso-sistema .accion { grid-column: 2; justify-self: start; }
  main { padding: 16px 16px 32px; }
  h1 { font-size: 26px; margin: 4px 0 12px; }
  h1 small { display: block; margin-top: 4px; font-size: 15px; font-weight: 400; }
  h2 { font-size: 20px; }
  .encabezado { gap: 4px 16px; }
  .acciones { flex-wrap: wrap; }
  .buscador { flex-wrap: wrap; gap: 8px; }
  .buscador input[type=search] { flex: 1 1 180px; min-width: 0; }
  .formulario { padding: 16px; }
  .solo-pc { display: none; }
  .solo-celu { display: inline; }
  /* Botones del encabezado: los principales a lo ancho, los secundarios como enlaces debajo. */
  .encabezado .con-secundarias { width: 100%; margin-bottom: 8px; }
  .con-secundarias > .boton { flex: 1 1 0; text-align: center; }
  .encabezado .con-secundarias .secundarias { display: flex; flex-wrap: wrap; gap: 0 20px; order: 2; flex-basis: 100%; }
  .secundarias .boton { background: none; border: 0; color: var(--acento); padding: 6px 0; }
  /* Listas: cada renglón es una tarjeta; se toca en cualquier parte para abrirlo. */
  .lista-celu, .lista-celu tbody { display: block; }
  .lista-celu thead { display: none; }
  .lista-celu tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titulo monto" "sub sub" "linea linea" "pie pie"; gap: 2px 12px; padding: 12px 14px; border-bottom: 1px solid var(--borde); }
  .lista-celu tbody tr:last-child { border-bottom: 0; }
  .lista-celu td { display: block; grid-column: 1 / -1; padding: 0; border: 0; white-space: normal; text-align: left; }
  .lista-celu td.c-titulo { grid-area: titulo; font-weight: 600; overflow-wrap: anywhere; }
  .lista-celu td.c-monto { grid-area: monto; text-align: right; font-weight: 600; white-space: nowrap; }
  .lista-celu td.c-fecha { grid-area: monto; text-align: right; color: var(--suave); font-size: 13px; white-space: nowrap; }
  .lista-celu td.c-sub { grid-area: sub; color: var(--suave); font-size: 13px; overflow-wrap: anywhere; }
  .lista-celu td.c-estado { grid-area: linea; margin-top: 4px; }
  .lista-celu td.c-linea { grid-area: linea; margin-top: 2px; }
  .lista-celu td.c-pie { grid-area: pie; margin-top: 8px; }
  .lista-celu td.c-pie:empty { display: none; }
  .lista-celu td.c-pie .botones-fila.en-linea { flex-wrap: wrap; justify-content: flex-start; min-width: 0; }
  .tarjeta-aviso { flex-direction: column; gap: 12px; padding: 18px; }
  .tarjeta-aviso .acciones .boton { display: block; text-align: center; }
  .lista-celu td.c-oculto { display: none; }
  .lista-celu a.tocar { color: inherit; text-decoration: none; }
  .lista-celu a.tocar::after { content: ""; position: absolute; inset: 0; }
  .lista-celu .c-estado a, .lista-celu .c-estado form, .lista-celu .c-pie, .lista-celu td a:not(.tocar) { position: relative; z-index: 1; }
  .lista-celu input[name=remitos] { position: relative; z-index: 1; width: 22px; height: 22px; margin: 0 6px 0 0; vertical-align: middle; }
  .lista-celu .atraso { font-size: 13px; }
  /* Datos de una ficha: etiqueta y valor en el mismo renglón. */
  .datos.compactos { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 10px 12px; padding: 14px 16px; }
  .datos.compactos dt { font-size: 14px; }
  .datos.compactos dd { overflow-wrap: anywhere; }
  .datos.compactos dd.fila-entera { grid-column: 1 / -1; }
  .grilla { grid-template-columns: 1fr; gap: 10px; }
  .grilla .tarjeta { padding: 12px 16px; }
  .grilla .tarjeta h2 { font-size: 17px; margin: 0; }
  .grilla .tarjeta p { margin: 4px 0 0; font-size: 14px; color: var(--suave); }
  .importes-iva { display: table; }
  .importes-iva th, .importes-iva td { padding: 8px 6px; }
  .importes-iva td:first-child { width: 44px; }
  /* Factura de compra: los datos cortos de a dos por renglón. */
  #factura-compra .columnas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
  #factura-compra .columnas > * { grid-column: 1 / -1; }
  #factura-compra .columnas > #campo-punto_venta, #factura-compra .columnas > #campo-numero,
  #factura-compra .columnas > #campo-fecha, #factura-compra .columnas > #campo-vencimiento,
  #factura-compra #percepciones > *, #factura-compra #con-iva .columnas > * { grid-column: auto; }
  #campo-vencimiento .panel-calendario { left: auto; right: 0; }
  .zona-archivo { padding: 14px 14px 14px 56px; }
  .zona-archivo::before { left: 16px; }
  .zona-pc { display: none; }
  .zona-celu { display: inline; }
  .total-factura { flex-basis: 100%; }
}

/* Celular por módulo. Cada bloque agrega solo lo propio de sus pantallas. */
/* Facturas y clientes: inicio */
@media (max-width: 640px) {
  /* Detalle de un borrador: Editar y Emitir a lo ancho. */
  .acciones-borrador > form { flex: 1 1 0; margin: 0; }
  .acciones-borrador > form button { width: 100%; }
  /* Renglones del detalle: tarjetas y, debajo, neto, IVA y total. */
  .renglones-detalle tfoot { display: block; border-top: 1px solid var(--borde); padding: 6px 0; }
  .renglones-detalle tfoot tr { display: flex; justify-content: space-between; gap: 12px; padding: 4px 14px; border: 0; }
  .renglones-detalle tfoot td, .renglones-detalle tfoot th { display: block; padding: 0; border: 0; }
  .renglones-detalle tfoot th { font-size: 16px; }
  .estado-fce .estado { white-space: normal; }
  /* Libro IVA: aire debajo del mes y descargas a lo ancho. */
  #resumen-libro { margin-top: 12px; }
  .descargas-libro .boton { flex: 1 1 100%; text-align: center; }
  /* Formulario de factura: los datos cortos de a dos por renglón. */
  #form-factura .columnas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
  #form-factura .columnas > * { grid-column: 1 / -1; }
  #form-factura .columnas > #campo-fecha, #form-factura .columnas > #campo-concepto,
  #form-factura .columnas > #campo-servicio_desde, #form-factura .columnas > #campo-servicio_hasta,
  #form-factura .columnas > #campo-vencimiento_pago, #form-factura .columnas > #campo-moneda,
  #form-factura .columnas > #campo-orden_compra, #form-factura .columnas > #campo-remito { grid-column: auto; }
  #form-factura #campo-servicio_hasta .panel-calendario { left: auto; right: 0; }
  #form-factura .campo-buscador .sugerencias { max-width: 100%; }
  #form-factura #campo-remito .sugerencias { left: auto; right: 0; max-width: none; }
  /* Casillas: la tilde a la izquierda del texto. */
  #form-factura #campo-paga_en_dolares, #form-cliente #campo-enviar_recordatorios, #form-cliente #campo-activo,
  #form-remito #campo-no_se_factura {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center;
  }
  #form-factura #campo-paga_en_dolares > input, #form-cliente #campo-enviar_recordatorios > input,
  #form-cliente #campo-activo > input, #form-remito #campo-no_se_factura > input { grid-row: 1; grid-column: 1; margin: 0; }
  #form-factura #campo-paga_en_dolares > span, #form-cliente #campo-enviar_recordatorios > span,
  #form-cliente #campo-activo > span, #form-remito #campo-no_se_factura > span { grid-row: 1; grid-column: 2; }
  #form-factura #campo-paga_en_dolares > small, #form-cliente #campo-enviar_recordatorios > small,
  #form-cliente #campo-activo > small, #form-remito #campo-no_se_factura > small { grid-column: 2; }
  /* Renglones de la factura: cada uno es una tarjeta con sus datos de a dos o tres por renglón. */
  .renglones.renglones-factura { display: block; overflow: visible; border: 0; background: none; }
  .renglones-factura thead { display: none; }
  .renglones-factura tbody { display: block; }
  .renglones-factura tr.renglon {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.2fr); gap: 8px;
    padding: 10px 12px 8px; margin-bottom: 10px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px;
  }
  .renglones-factura tr.renglon td { display: block; padding: 0; border: 0; min-width: 0; }
  .renglones-factura td[data-etiqueta]::before { content: attr(data-etiqueta); display: block; margin-bottom: 2px; font-size: 13px; color: var(--suave); }
  .renglones-factura td.con-sugerencias { grid-column: 1 / -1; min-width: 0; }
  .renglones-factura td.cantidad, .renglones-factura td.unidad, .renglones-factura td.precio { grid-column: span 2; }
  .renglones.renglones-factura td input, .renglones.renglones-factura td select { width: 100%; min-width: 0; }
  .renglones-factura .sugerencias { right: 0; }
  .renglones-factura td.subtotal { grid-row: 4; grid-column: 2 / -1; padding: 0; font-weight: 600; }
  .renglones-factura td.subtotal::before { display: inline; margin: 0 8px 0 0; font-weight: 400; }
  .renglones-factura td.quitar { grid-row: 4; grid-column: 1; text-align: left; white-space: nowrap; }
  .renglones-factura .boton-quitar { padding: 0; font-size: 14px; }
  .renglones-factura .boton-quitar::after { content: " Quitar"; }
  .renglones-factura tr.quitado .boton-quitar::after { content: " Deshacer"; }
  .renglones-factura tr.renglon.quitado td.quitar { opacity: 1; text-decoration: none; }
  .renglones-factura tfoot { display: block; background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; padding: 8px 12px; }
  .renglones-factura tfoot tr { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 0; }
  .renglones-factura tfoot td, .renglones-factura tfoot th { display: block; padding: 0; border: 0; }
  .renglones-factura tfoot tr > :last-child { display: none; }
  .renglones-factura tfoot th { font-size: 18px; }
  .agregar-renglon { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
  .guardar-borrador .boton { width: 100%; }
  /* Formulario de cliente: localidad y provincia, y condición y plazo de pago, de a dos. */
  #form-cliente .campos-cliente { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
  #form-cliente .campos-cliente > * { grid-column: 1 / -1; }
  #form-cliente .campos-cliente > #campo-localidad, #form-cliente .campos-cliente > #campo-provincia,
  #form-cliente .campos-cliente > #campo-condicion_venta, #form-cliente .campos-cliente > #campo-dias_pago { grid-column: auto; }
}
/* Facturas y clientes: fin */

/* Remitos: inicio */
.renglones-remito thead th:not(:first-child) { width: 1%; }
.renglones-remito input[name$="precio_unitario"] { width: 120px; }
.acciones-pie { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
/* Estado de cada remito (Sin facturar o Facturado) y de cada cliente en Cobranzas (No cobrado), con su botón al lado. */
.estado-remito, .estado-cobro { white-space: nowrap; }
.estado-remito .estado, .estado-cobro .estado { margin-right: 6px; }
/* En la ficha del remito: Vigente y Sin facturar o Facturado al lado del número, del tamaño de un botón. */
.estado.grande { font-size: 15px; font-weight: 600; padding: 7px 14px; border-radius: 8px; }
.estados-remito { display: inline-flex; flex-wrap: wrap; gap: 8px; vertical-align: middle; }
.acciones-pie form { margin: 0; }
@media (max-width: 640px) {
  /* Formulario: número y fecha, y orden de compra y bultos, de a dos por renglón. */
  #form-remito .columnas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
  #form-remito .columnas > * { grid-column: 1 / -1; }
  #form-remito .columnas > #campo-numero, #form-remito .columnas > #campo-numero + #campo-fecha,
  #form-remito .columnas > #campo-orden_compra, #form-remito .columnas > #campo-bultos { grid-column: auto; }
  #form-remito .campo-buscador .sugerencias, #form-pedido .campo-buscador .sugerencias { max-width: 100%; }
  /* Pedido: número y fecha, y entrega y moneda, de a dos. */
  #form-pedido .columnas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
  #form-pedido .columnas > * { grid-column: 1 / -1; }
  #form-pedido .columnas > #campo-numero, #form-pedido .columnas > #campo-fecha,
  #form-pedido .columnas > #campo-entrega, #form-pedido .columnas > #campo-moneda { grid-column: auto; }
  /* Renglones: cada uno es una tarjeta con la descripción arriba y la cantidad y la unidad de a dos. */
  .renglones.renglones-remito { display: block; overflow: visible; border: 0; background: none; }
  .renglones-remito thead { display: none; }
  .renglones-remito tbody { display: block; }
  .renglones-remito tr.renglon {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px;
    padding: 10px 12px 8px; margin-bottom: 10px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px;
  }
  .renglones-remito tr.renglon td { display: block; padding: 0; border: 0; min-width: 0; }
  .renglones-remito td[data-etiqueta]::before { content: attr(data-etiqueta); display: block; margin-bottom: 2px; font-size: 13px; color: var(--suave); }
  .renglones-remito td.con-sugerencias, .renglones-remito td.quitar { grid-column: 1 / -1; }
  .renglones.renglones-remito td input, .renglones.renglones-remito td select { width: 100%; min-width: 0; }
  .renglones-remito .sugerencias { right: 0; }
  .renglones-remito td.quitar { text-align: left; }
  .renglones-remito .boton-quitar { padding: 0; font-size: 14px; }
  .renglones-remito .boton-quitar::after { content: " Quitar"; }
  .renglones-remito tr.quitado .boton-quitar::after { content: " Deshacer"; }
  .renglones-remito tr.renglon.quitado td.quitar { opacity: 1; text-decoration: none; }
}
/* Remitos y facturas: las dos listas una debajo de la otra, cada una con su título y su enlace al costado. */
.seccion-lista { margin-top: 28px; }
.titulo-seccion { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.titulo-seccion h2 { margin: 0; }
.titulo-seccion + .filtros, .titulo-seccion + .aviso, .titulo-seccion + .previsto { margin-top: 12px; }
/* Remito y factura: los precios de lo que se entrega, debajo del remito. */
#form-remito h2 { margin-top: 28px; }
#form-remito h2:first-of-type { margin-top: 0; }
.renglones-precios td.c-descripcion { min-width: 220px; padding-top: 14px; }
.renglones-precios td.c-cantidad, .renglones-precios td.c-unidad { white-space: nowrap; padding-top: 14px; }
.renglones-precios thead th:nth-child(n+2):nth-child(-n+3) { width: 1%; }
.renglones-precios tr[hidden] { display: none; }
.renglones-precios ~ .tilde { margin-top: 16px; }
@media (max-width: 640px) {
  /* Los tres botones: Remito y factura a lo ancho, y Solo remito y Solo factura de a dos debajo. */
  .encabezado .tres-botones { width: 100%; margin-bottom: 8px; }
  .tres-botones .boton { flex: 1 1 0; text-align: center; }
  .tres-botones .boton.principal { flex-basis: 100%; order: -1; }
  .seccion-lista { margin-top: 24px; }
  /* Factura: condición de venta y vencimiento de a dos. */
  #form-remito #columnas-factura > #campo-condicion_venta, #form-remito #columnas-factura > #campo-vencimiento_pago { grid-column: auto; }
  #form-remito #campo-paga_en_dolares { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center; }
  #form-remito #campo-paga_en_dolares > input { grid-row: 1; grid-column: 1; margin: 0; }
  #form-remito #campo-paga_en_dolares > span { grid-row: 1; grid-column: 2; }
  #form-remito #campo-paga_en_dolares > small { grid-column: 2; }
  /* Precios: cada renglón es una tarjeta con la descripción y la cantidad arriba, y el precio, el descuento y el IVA. */
  .renglones.renglones-precios { display: block; overflow: visible; border: 0; background: none; }
  .renglones-precios thead { display: none; }
  .renglones-precios tbody { display: block; }
  .renglones-precios tr.precio-renglon {
    display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1fr); gap: 8px;
    padding: 10px 12px 8px; margin-bottom: 10px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px;
  }
  .renglones-precios tr.precio-renglon[hidden] { display: none; }
  .renglones-precios tr.precio-renglon td { display: block; padding: 0; border: 0; min-width: 0; }
  .renglones-precios td[data-etiqueta]::before { content: attr(data-etiqueta); display: block; margin-bottom: 2px; font-size: 13px; color: var(--suave); }
  .renglones-precios td.c-descripcion { grid-column: 1 / -1; font-weight: 600; overflow-wrap: anywhere; }
  .renglones-precios td.c-descripcion::before { display: none; }
  .renglones-precios td.c-cantidad { grid-column: 1; }
  .renglones-precios td.c-unidad { grid-column: 2 / -1; }
  .renglones.renglones-precios td input, .renglones.renglones-precios td select { width: 100%; min-width: 0; }
  .renglones-precios td.subtotal { grid-column: 1 / -1; padding: 0; font-weight: 600; text-align: right; }
  .renglones-precios td.subtotal::before { display: inline; margin: 0 8px 0 0; font-weight: 400; }
  .renglones-precios tfoot { display: block; background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; padding: 8px 12px; }
  .renglones-precios tfoot tr { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 0; }
  .renglones-precios tfoot tr[hidden] { display: none; }
  .renglones-precios tfoot td, .renglones-precios tfoot th { display: block; padding: 0; border: 0; }
  .renglones-precios tfoot th { font-size: 18px; }
}
/* Remitos: fin */

/* Cobranzas, recibos y cuentas: inicio */
.anular-recibo { margin: 16px 0; }
#campo-emitir_diferencia { margin: 0 0 16px; font-weight: 600; }
.emitir-diferencia { margin-top: 8px; }
@media (max-width: 640px) {
  /* Fila de totales al pie de una lista como tarjetas: el nombre a la izquierda y el importe a la derecha. */
  .lista-celu tfoot.total-celu { display: block; }
  .lista-celu tfoot.total-celu tr { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; background: var(--superficie-2); border-top: 1px solid var(--borde); border-bottom: 0; }
  .lista-celu tfoot.total-celu th, .lista-celu tfoot.total-celu td { display: block; padding: 0; border: 0; background: none; text-align: left; }
  .lista-celu tfoot.total-celu th.numero:last-of-type { text-align: right; white-space: nowrap; }
  .lista-celu tfoot.total-celu .c-oculto { display: none; }
  /* Deudas de clientes: los tramos con saldo, en un renglón debajo del cliente. */
  .deudas .tramo { display: block; }
  .deudas td.c-sub .atraso { font-size: 13px; }
  /* Inicio de Cobranzas: solo los últimos 5 recibos ("Ver todos" lleva a la lista completa). */
  .pocos-en-celu tbody tr:nth-child(n+6) { display: none; }
  .pocos-en-celu tbody tr:nth-child(5) { border-bottom: 0; }
  /* Botones del recibo y de la cuenta corriente que son formularios. */
  .acciones-recibo > form { flex: 1 1 0; }
  .acciones-recibo > form button { width: 100%; }
  .con-secundarias .secundarias form { margin: 0; }
  /* Recibo nuevo: fecha y moneda, y cotización y saldo a favor, de a dos por renglón. */
  #form-recibo .columnas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
  #form-recibo .columnas > * { grid-column: 1 / -1; }
  #form-recibo .columnas > #campo-fecha, #form-recibo .columnas > #campo-moneda,
  #form-recibo .columnas > #campo-cotizacion, #form-recibo .columnas > #campo-saldo_aplicado { grid-column: auto; }
  /* Orden de pago: lo mismo, con el crédito a favor en lugar del saldo. */
  #form-orden .columnas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
  #form-orden .columnas > * { grid-column: 1 / -1; }
  #form-orden .columnas > #campo-fecha, #form-orden .columnas > #campo-moneda,
  #form-orden .columnas > #campo-cotizacion, #form-orden .columnas > #campo-credito_aplicado { grid-column: auto; }
  /* Valores recibidos: cada forma de pago es una tarjeta con sus campos rotulados. */
  #tabla-valores { display: block; overflow: visible; background: none; border: 0; }
  #tabla-valores thead { display: none; }
  #tabla-valores tbody, #tabla-valores tfoot { display: block; }
  #tabla-valores tr.valor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "tipo tipo quitar" "importe banco banco" "numero numero numero" "extra extra extra"; gap: 8px 10px; padding: 12px; margin-bottom: 10px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; }
  #tabla-valores tr.valor td { display: block; padding: 0; border: 0; }
  #tabla-valores td.v-tipo { grid-area: tipo; }
  #tabla-valores td.v-importe { grid-area: importe; }
  #tabla-valores td.v-banco { grid-area: banco; }
  #tabla-valores td.v-numero { grid-area: numero; }
  #tabla-valores td.extra { grid-area: extra; }
  #tabla-valores td.quitar { grid-area: quitar; align-self: center; }
  /* Cheque de un cliente: primero se elige el cheque y debajo se ve su importe. */
  #tabla-valores tr.de-terceros td.v-banco, #tabla-valores tr.de-terceros td.v-numero { display: none; }
  #tabla-valores tr.valor.de-terceros { grid-template-areas: "tipo tipo quitar" "extra extra extra" "importe importe importe"; }
  #tabla-valores [data-titulo]::before { content: attr(data-titulo); display: block; margin-bottom: 4px; font-size: 13px; color: var(--suave); }
  #tabla-valores .sin-extra { display: none; }
  #tabla-valores .solo-cheque:not([hidden]) { min-width: 0; }
  #tabla-valores .solo-terceros select { min-width: 0; width: 100%; }
  #tabla-valores .extra input[type=file] { max-width: 100%; }
  #tabla-valores tr.valor.quitado { opacity: 0.6; }
  #tabla-valores tfoot tr { display: flex; justify-content: space-between; padding: 4px 2px 0; }
  #tabla-valores tfoot th { padding: 0; border: 0; font-size: 15px; }
  /* Facturas que se cancelan: tarjetas con el importe a aplicar al pie. */
  #resumen.compactos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #tabla-pendientes tr[data-elegido] { background: var(--azul-suave-2); }
  #tabla-pendientes tr[data-elegido] td { background: none; }
  #tabla-pendientes td.c-pie { display: flex; align-items: center; gap: 10px; }
  #tabla-pendientes td.c-pie input.aplicar { flex: 1; max-width: none; }
  /* Factura anterior al sistema: fechas, moneda e importe de a dos por renglón. */
  #factura-anterior .columnas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
  #factura-anterior #campo-vencimiento_pago .panel-calendario, #factura-anterior #campo-vencimiento .panel-calendario { left: auto; right: 0; }
}
/* Cobranzas, recibos y cuentas: fin */

/* Cobranzas, cheques, banco y recordatorios: inicio */
/* Conciliación: la fecha "Solo desde" va en la última columna, su calendario se abre hacia la izquierda. */
#subir-extracto #campo-desde .panel-calendario { left: auto; right: 0; }
@media (max-width: 640px) {
  /* Tarjetas con casilla para elegir (cheques a depositar, clientes a recordar): la casilla va a la izquierda. */
  .lista-celu.con-casilla tr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "casilla titulo monto" "casilla sub sub" "casilla linea linea" "casilla pie pie"; }
  .lista-celu.con-casilla td.c-casilla { grid-area: casilla; position: relative; z-index: 1; padding-top: 1px; }
  .lista-celu.con-casilla td.c-casilla input { width: 20px; height: 20px; margin: 0; }
  /* Totales al pie de las tarjetas: el texto a la izquierda y el importe a la derecha. */
  .lista-celu.con-total tfoot { display: block; }
  .lista-celu.con-total tfoot tr { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--superficie-2); border-top: 1px solid var(--borde); }
  .lista-celu.con-total tfoot th { padding: 0; border: 0; text-align: left; background: none; }
  .lista-celu.con-total tfoot th:empty { display: none; }
  /* Depósito de cheques: cada dato a lo ancho. */
  #form-deposito .deposito > label, #form-deposito .deposito > button { flex: 1 1 100%; max-width: none; }
  /* Conciliación: el extracto con moneda y fecha en un renglón; la propuesta y los botones de cada ingreso. */
  #subir-extracto .columnas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
  #subir-extracto .columnas > #campo-archivo, #subir-extracto .columnas > #campo-cuenta,
  #subir-extracto .columnas > #campo-otra_cuenta { grid-column: 1 / -1; }
  .conciliacion.lista-celu td.c-titulo { font-weight: 400; }
  .conciliacion.lista-celu .propuesta { margin-top: 8px; }
  .conciliacion .botones-fila { min-width: 0; }
  .conciliados .c-pie .boton { background: none; border: 0; padding: 4px 0; }
  .confirmar-todos .boton { flex: 1 1 100%; text-align: center; }
  /* Recordatorios. */
  #deudores td.c-linea { font-size: 13px; }
  #envio-automatico .oracion { line-height: 2.3; }
  #acciones-recordatorio > form { flex: 1 1 0; }
  #acciones-recordatorio > form button { width: 100%; }
  #correo-recordatorio { padding: 14px 16px; }
}
/* Cobranzas, cheques, banco y recordatorios: fin */

/* Empresa, usuarios y configuración: inicio */
#correo > summary small { font-weight: 400; }
@media (max-width: 640px) {
  /* Datos de la empresa: CUIT e inicio de actividades, localidad y provincia, de a dos por renglón. */
  #form-empresa .par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
  #campo-inicio_actividades .panel-calendario { left: auto; right: 0; }
  /* Pasos del certificado de ARCA y de la verificación en dos pasos. */
  .pasos { gap: 12px; }
  .pasos .tarjeta { padding: 14px 16px; }
  .pasos h2 { font-size: 17px; }
  .pasos ol { padding-left: 18px; }
  #pasos-arca .cargar-certificado { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  #pasos-arca .cargar-certificado input[type=file] { width: 100%; max-width: 100%; }
  .qr-dos-pasos { gap: 8px; }
  /* Ingreso: la tarjeta más arriba y el botón a lo ancho. */
  .tarjeta.angosta.ingreso { margin: 24px auto; }
  .ingreso button[type=submit]:not(.enlace) { width: 100%; }
  /* Sin espacio de más al principio y al final de las tarjetas. */
  .pasos .tarjeta > :last-child, .tarjeta.ingreso > :last-child, .tarjeta-codigos > :last-child { margin-bottom: 0; }
  .tarjeta-codigos > :first-child { margin-top: 0; }
}
/* Empresa, usuarios y configuración: fin */

.subir-firmado { margin: 6px 0 0; }
.subir-firmado label { display: inline-block; cursor: pointer; }
.factura-orden { margin: 0 0 8px; }
.factura-orden form { margin-left: 6px; }
/* inicio: datos del CAI */
label.opcion-cai { align-items: flex-start; }
label.opcion-cai input { margin-top: 4px; }
label.opcion-cai small { display: block; color: var(--suave); font-size: 13px; }
.pasos-remito ol { margin: 8px 0 12px; padding-left: 20px; }
.pasos-remito li { margin-bottom: 6px; }
.pedir-cai { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 8px 0; }
.pedir-cai input { width: 90px; }
.pasos-cai { padding-left: 20px; }
.pasos-cai li { margin-bottom: 8px; }
#como-cai h3 { margin: 16px 0 4px; font-size: 1em; }
/* fin: datos del CAI */

/* inicio: bancos y caja */
fieldset.opciones.en-fila { flex-direction: row; flex-wrap: wrap; gap: 8px 24px; }
fieldset.opciones.en-fila legend { width: 100%; }
.negativo { color: var(--error); }
.saldo-cuenta { font-size: 20px; }
.bloque form.mover { display: inline-flex; gap: 6px; align-items: center; margin: 4px 0 0 8px; }
.bloque form.mover select { width: auto; padding: 4px 8px; }
.acciones-linea { text-align: right; white-space: nowrap; }
.movimientos-cuenta tfoot th.numero { white-space: nowrap; }
details.cambiar-cuenta summary { cursor: pointer; color: var(--acento); font-size: 14px; }
details.cambiar-cuenta form { display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end; }
details.cambiar-cuenta select { width: auto; padding: 4px 8px; }
.flujo details summary { cursor: pointer; color: var(--acento); }
.flujo tr.en-rojo { background: var(--rojo-claro); }
ul.items-semana { margin: 6px 0 0; padding: 0; list-style: none; font-size: 14px; font-weight: normal; }
ul.items-semana li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-top: 1px solid var(--borde); }
ul.items-semana .importe { white-space: nowrap; }
@media (max-width: 640px) {
  .movimientos-cuenta td.acciones-linea { text-align: left; padding-top: 4px; }
  .movimientos-cuenta td.acciones-linea:empty { display: none; }
  details.cambiar-cuenta form { justify-content: flex-start; }
  .bloque form.mover { display: flex; margin: 6px 0 0; }
}
/* fin: bancos y caja */

/* Historial de cambios y cierre de mes */
ul.cambios { margin: 4px 0 0; padding-left: 18px; font-size: 14px; }
ul.cambios li { overflow-wrap: anywhere; }
.historial .motivo { margin: 0; font-size: 14px; }
.marcar-revisados { margin-top: 16px; }
.errores-sistema .origen { margin: 2px 0 0; color: var(--suave); font-size: 13px; font-weight: 400; }
.detalle-tecnico { margin-top: 4px; font-weight: 400; }
.detalle-tecnico summary { cursor: pointer; color: var(--acento); font-size: 14px; }
.detalle-tecnico pre { margin: 6px 0 0; padding: 8px 10px; max-height: 240px; overflow: auto; background: var(--fondo); border: 1px solid var(--borde); border-radius: 6px; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
ul.lista-simple { padding-left: 18px; }
ul.lista-simple li { margin: 4px 0; }
form.clasificar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 4px; }
form.clasificar select, form.clasificar input[type=text] { flex: 1 1 160px; min-width: 0; }
form.clasificar .tilde { font-size: .9em; }

/* Presupuestos: precio con la ayuda de cálculo, planos y la ventana de cálculo. */
.con-calculo { display: flex; gap: 6px; align-items: center; }
.con-calculo input { flex: 1; min-width: 0; }
.renglones-presupuesto input[name$="precio_unitario"] { width: 110px; }
ul.planos { padding-left: 20px; }
ul.planos li { margin-bottom: 6px; }
ul.planos .quitar-plano { display: inline-flex; margin-left: 14px; font-size: 13px; color: var(--suave); }
/* Pedidos: los planos que llegaron con la orden de compra o se subieron a mano. */
.planos-pedido { list-style: none; padding: 0; margin: 0 0 8px; }
.planos-pedido li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 0; border-bottom: 1px solid var(--borde); }
.planos-pedido .nombre { flex: 1; min-width: 160px; overflow-wrap: anywhere; }
.planos-pedido .botones-plano { display: flex; align-items: center; gap: 6px; }
.subir-planos { margin: 8px 0 0; }
.subir-planos label { display: inline-block; cursor: pointer; }
/* Visor de planos: uno debajo del otro, el elegido marcado, barra fija con zoom y descarga. */
.subtitulo-planos { margin: -8px 0 12px; color: var(--suave); }
.barra-planos { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; margin-bottom: 12px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; }
.barra-planos .elegido { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.barra-planos .herramientas { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.barra-planos .herramienta { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--borde); border-radius: 6px; background: var(--superficie); color: var(--texto); cursor: pointer; }
.barra-planos .herramienta:hover { border-color: var(--acento); color: var(--acento); }
.barra-planos .herramienta:disabled { opacity: .4; cursor: default; }
.barra-planos .herramienta svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.barra-planos .zoom { min-width: 52px; text-align: center; font-size: 14px; color: var(--suave); }
.visor-planos .plano { margin-bottom: 20px; padding: 10px; border: 2px solid var(--borde); border-radius: 8px; cursor: pointer; outline: none; }
.visor-planos .plano.elegido { border-color: var(--acento); }
.visor-planos .plano h3 { margin: 0 0 8px; font-size: 1em; overflow-wrap: anywhere; }
.visor-planos .hoja { overflow: auto; }
.visor-planos .hoja img { display: block; width: 100%; max-width: none; margin: 0 auto 8px; background: #fff; }
.visor-planos .sin-vista { margin: 0; padding: 24px 12px; text-align: center; color: var(--suave); }
/* En la lista de pedidos el visor se abre en un cuadro, con la lista oscurecida y borrosa detrás. */
dialog.cuadro-planos { width: min(1040px, calc(100vw - 96px)); height: calc(100vh - 80px); height: calc(100dvh - 80px); max-width: none; max-height: none; padding: 0; overflow: hidden; border: 1px solid var(--borde); border-radius: 12px; background: var(--fondo); color: var(--texto); box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
dialog.cuadro-planos[open] { display: flex; flex-direction: column; }
dialog.cuadro-planos::backdrop { background: rgba(10, 14, 20, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html:has(dialog.cuadro-planos[open]) { overflow: hidden; }
.cuadro-planos .contenido-cuadro { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 14px 16px 0; }
.cuadro-planos .cabeza-planos { padding-right: 48px; }
.cuadro-planos .cabeza-planos h2 { margin: 0 0 2px; font-size: 1.25em; }
.cuadro-planos .subtitulo-planos { margin: 0 0 10px; }
.cuadro-planos .barra-planos { position: static; margin-bottom: 10px; }
.cuadro-planos .visor-planos { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 16px; }
.cuadro-planos .cargando-planos { margin: 40px 0; text-align: center; color: var(--suave); }
.cerrar-cuadro { position: absolute; top: 10px; right: 10px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--borde); border-radius: 50%; background: var(--superficie); color: var(--texto); cursor: pointer; }
.cerrar-cuadro:hover { border-color: var(--acento); color: var(--acento); }
.cerrar-cuadro svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 640px) {
  dialog.cuadro-planos { width: calc(100vw - 24px); height: calc(100vh - 56px); height: calc(100dvh - 56px); border-radius: 10px; }
  .cuadro-planos .contenido-cuadro { padding: 10px 10px 0; }
  .cuadro-planos .barra-planos { padding: 6px 8px; gap: 8px; }
}
details.calculo { margin-top: 4px; font-size: 13px; color: var(--suave); }
details.calculo summary { cursor: pointer; color: var(--acento); }
details.calculo ul { margin: 4px 0 0; padding-left: 18px; }
dialog.cuadro-chico { width: min(440px, calc(100vw - 24px)); padding: 20px 22px; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); color: var(--texto); box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
dialog.cuadro-chico::backdrop { background: rgba(10, 14, 20, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.cuadro-chico h2 { margin: 0 0 4px; }
.cuadro-sub { margin: 0 0 14px; color: var(--suave); }
.opciones-motivo { display: grid; gap: 10px; margin-bottom: 16px; }
.opciones-motivo .tilde { margin: 0; gap: 8px; font-size: 15px; }
.campo-detalle { display: grid; gap: 4px; margin-bottom: 16px; }
dialog.cuadro-chico .acciones { margin: 0; }
small.motivo { display: block; margin-top: 2px; color: var(--suave); }
dialog.calculadora { width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); color: var(--texto); }
dialog.calculadora::backdrop { background: rgba(20, 25, 30, 0.45); }
dialog.calculadora form { display: flex; flex-direction: column; max-height: calc(100vh - 26px); }
.calc-cuerpo { overflow-y: auto; padding: 16px 20px 4px; }
.calc-cuerpo h2 { margin: 0 0 4px; }
.calc-cuerpo h3 { margin: 12px 0 8px; font-size: 15px; }
.calc-pieza { margin: 0; color: var(--suave); font-size: 14px; }
.calc-fila { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) auto; gap: 0 10px; align-items: end; }
.calc-fila input, .calc-fila select, .calc-otros input { width: 100%; min-width: 0; }
.renglones-maquinas input[type=checkbox] { width: auto; }
.calc-fila label, .calc-otros label { margin-bottom: 10px; }
.calc-fila .calc-quitar { margin-bottom: 12px; }
.calc-otros { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: 0 12px; }
.calc-pie { border-top: 1px solid var(--borde); background: var(--superficie-2); padding: 10px 20px 14px; }
.calc-resultado { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0 0 8px; font-size: 14px; }
.calc-resultado div { display: flex; gap: 6px; }
.calc-resultado dt { color: var(--suave); }
.calc-resultado dd { margin: 0; white-space: nowrap; }
.calc-resultado .calc-precio { flex-basis: 100%; font-size: 17px; font-weight: 700; }
.calc-resultado .calc-precio dt { color: var(--texto); }
@media (max-width: 640px) {
  .calc-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid var(--borde); }
  .calc-fila .calc-campo-maquina { grid-column: 1 / -1; }
  .calc-fila .calc-quitar { grid-column: 1 / -1; justify-self: start; padding: 0; font-size: 14px; }
  .calc-fila .calc-quitar::after { content: " Quitar máquina"; }
  .calc-cuerpo, .calc-pie { padding-left: 14px; padding-right: 14px; }
  .renglones-maquinas { display: block; border: 0; background: none; }
  .renglones-maquinas thead { display: none; }
  .renglones-maquinas tbody { display: block; }
  .renglones-maquinas tr.renglon { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; padding: 10px; margin-bottom: 8px; }
  .renglones-maquinas tr.renglon td { display: block; padding: 0; border: 0; }
  .renglones-maquinas td[data-etiqueta]::before { content: attr(data-etiqueta); display: block; margin-bottom: 2px; font-size: 13px; color: var(--suave); }
  .renglones-maquinas td.quitar, .renglones-maquinas td:first-child { grid-column: 1 / -1; text-align: left; }
}
details.calculo { font-weight: 400; }

/* Órdenes de compra programadas: «Cada [15] [días]» en una línea. */
.repetir-orden { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0; }
.repetir-orden small { flex-basis: 100%; color: var(--suave); }
.repetir-campos { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.repetir-campos input.cada { width: 72px; }
.programar-orden, .orden-programada details { margin: 16px 0; }
.programar-orden summary, .orden-programada summary { cursor: pointer; color: var(--acento); }
form.programar { margin-top: 12px; }
form.programar .campo { margin-bottom: 12px; }

/* Análisis: cómo va la empresa, indicadores del período y del dinero de hoy, y los últimos meses. */
.rango-analisis { margin: 10px 0 0; color: var(--suave); font-size: 14px; }
.tarjeta-aviso.salud { max-width: none; }
.tarjeta-aviso.salud.bien { border-color: var(--verde-borde); }
.tarjeta-aviso.salud.bien::before { background: var(--verde-claro-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e8e3e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8M15 7h6v6'/%3E%3C/svg%3E") center / 22px no-repeat; }
.tarjeta-aviso.salud.atencion { border-color: var(--amarillo-borde-2); }
.tarjeta-aviso.salud.atencion::before { background: var(--amarillo-claro-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b26a00' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8v5M12 17h.01M10.3 3.9L2.4 18a2 2 0 0 0 1.7 3h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3C/svg%3E") center / 22px no-repeat; }
.tarjeta-aviso.salud.riesgo { border-color: var(--rojo-borde); }
.tarjeta-aviso.salud.riesgo::before { background: var(--rojo-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b42318' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l6 6 4-4 8 8M15 17h6v-6'/%3E%3C/svg%3E") center / 22px no-repeat; }
.tarjeta-aviso.salud.bien h2 { color: var(--verde); }
.tarjeta-aviso.salud.atencion h2 { color: var(--amarillo-texto-2); }
.tarjeta-aviso.salud.riesgo h2 { color: var(--error); }
.controles { margin: 8px 0 0; padding: 0; list-style: none; }
.controles li { position: relative; padding: 3px 0 3px 26px; line-height: 1.45; }
.controles li::before { position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; }
.controles li.ok::before { content: "✓"; background: #1e8e3e; }
.controles li.falla::before { content: "!"; background: var(--rojo-fuerte); }
.indicadores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 12px 0 8px; }
.indicador { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 1px 3px rgba(16, 24, 40, .06); min-width: 0; }
.indicador .nombre { color: var(--suave); font-size: 14px; }
.indicador strong { font-size: 22px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.indicador small { color: var(--suave); font-size: 13px; }
.indicador small.negativo { color: var(--error); }
.indicador small .cifra { white-space: nowrap; }
.nota-analisis { color: var(--suave); font-size: 13px; }
.variacion { align-self: flex-start; margin-top: 4px; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.variacion.sube { background: var(--verde-claro-2); color: var(--verde-hover); }
.variacion.baja { background: var(--rojo-claro); color: var(--error); }
.grafico-meses { max-width: 760px; margin: 12px 0; padding: 16px 18px 12px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 1px 3px rgba(16, 24, 40, .06); }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 12px; font-size: 13px; color: var(--suave); }
.leyenda span::before, .globo i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; content: ""; }
.leyenda .ventas::before, .globo i.ventas, .barra-dato.ventas { background: #2a78d6; }
.leyenda .egresos::before, .globo i.egresos, .barra-dato.egresos { background: #eb6834; }
.barras { display: flex; gap: 8px; border-bottom: 1px solid var(--borde); }
.barras .mes { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; outline: none; cursor: default; }
.barras .pares { display: flex; align-items: flex-end; justify-content: center; gap: 2px; width: 100%; height: 170px; border-radius: 6px; }
.barras .mes:hover .pares, .barras .mes:focus .pares { background: var(--superficie-4); }
.barra-dato { display: block; width: 40%; max-width: 22px; border-radius: 4px 4px 0 0; }
.barras .nombre-mes { padding: 6px 0 4px; font-size: 13px; color: var(--suave); }
.globo { display: none; position: absolute; bottom: calc(100% - 40px); left: 50%; z-index: 2; transform: translateX(-50%); min-width: 190px; padding: 10px 12px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; box-shadow: 0 4px 12px rgba(16, 24, 40, .12); font-size: 13px; white-space: nowrap; }
.globo span, .globo strong { display: block; }
.globo strong { margin-bottom: 4px; }
.barras .mes:hover .globo, .barras .mes:focus .globo { display: block; }
.barras .mes:first-child .globo { left: 0; transform: none; }
.barras .mes:last-child .globo { left: auto; right: 0; transform: none; }
.indicadores.cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.indicadores.cinco .indicador strong { font-size: 20px; }
.indicador .ver-detalle { margin-top: auto; padding-top: 6px; font-size: 13px; }
@media (max-width: 1200px) { .indicadores.cinco { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) {
  .indicadores, .indicadores.cinco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .indicadores.cinco .indicador:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .indicadores { gap: 8px; }
  .indicador { padding: 12px 10px; }
  .indicador strong, .indicadores.cinco .indicador strong { font-size: 16px; }
  .indicador small { font-size: 12px; }
  .grafico-meses { padding: 12px; }
  .barras { gap: 4px; }
  .barras .pares { height: 140px; }
  .barras .mes:nth-child(2) .globo { left: 0; transform: none; }
  .barras .mes:nth-last-child(2) .globo { left: auto; right: 0; transform: none; }
}

/* Empresa → Correos automáticos: una tarjeta por cuenta de correo, con su estado. */
.cuentas-correo { margin: 12px 0 8px; }
.cuentas-correo .tarjeta { display: flex; flex-direction: column; gap: 8px; }
.cuentas-correo h3 { margin: 0; font-size: 16px; }
.cuentas-correo p { margin: 0; color: var(--suave); font-size: 14px; line-height: 1.4; }
.cuentas-correo .boton { margin-top: auto; align-self: flex-start; }

/* Interruptor de activado o desactivado (una casilla con forma de perilla). */
label.interruptor { gap: 10px; cursor: pointer; font-size: 15px; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor .perilla { position: relative; flex: none; width: 40px; height: 22px; border-radius: 11px; background: var(--perilla); transition: background .15s; }
.interruptor .perilla::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.interruptor input:checked + .perilla { background: var(--boton); }
.interruptor input:checked + .perilla::after { transform: translateX(18px); }
.interruptor input:focus-visible + .perilla { outline: 2px solid var(--acento); outline-offset: 2px; }
.ayuda-interruptor { margin: 4px 0 14px; color: var(--suave); }
.formulario hr.separador { border: 0; border-top: 1px solid var(--borde); margin: 16px 0; }
/* La imagen de la firma, del tamaño en que va a salir en el correo. */
.firma-previa { margin: 0 0 12px; }
.firma-previa img { display: block; max-width: 100%; height: auto; border: 1px dashed var(--borde); border-radius: 4px; }
.correo .firma-en-previa { display: block; max-width: 100%; height: auto; margin-top: 16px; }
/* Empresa: el tamaño del logo, con una vista a escala del encabezado de una factura al lado. */
fieldset.logo-y-vista { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 20px; align-items: start; }
fieldset.logo-y-vista[hidden] { display: none; }
.logo-y-vista .tamanos { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.vista-logo { margin: 0; }
.vista-logo figcaption { margin-top: 6px; font-size: 13px; color: var(--suave); }
.hoja-previa { --mm: 3px; position: relative; height: calc(var(--mm) * 57); overflow: hidden; background: #fff; border: 1px solid var(--borde); border-radius: 6px; box-shadow: 0 1px 4px rgba(16, 24, 40, .1); color: #111; font-family: Helvetica, Arial, sans-serif; line-height: 1; }
.hoja-previa::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 9%; background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 80%); }
.hp-original, .hp-caja { position: absolute; left: calc(var(--mm) * 4); width: calc(var(--mm) * 186); border: 1px solid #333; }
.hp-original { top: calc(var(--mm) * 4); height: calc(var(--mm) * 7); }
.hp-original::before { content: "ORIGINAL"; position: absolute; left: calc(var(--mm) * 83); width: calc(var(--mm) * 20); top: calc(var(--mm) * 1.6); text-align: center; font-size: calc(var(--mm) * 3.9); font-weight: 700; }
.hp-caja { top: calc(var(--mm) * 11); height: calc(var(--mm) * 42); border-top: 0; }
.hp-linea { position: absolute; left: calc(var(--mm) * 93); top: calc(var(--mm) * 14); bottom: 0; border-left: 1px solid #333; }
.hp-letra { position: absolute; left: calc(var(--mm) * 85); top: 0; width: calc(var(--mm) * 16); height: calc(var(--mm) * 16); border: 1px solid #333; border-top: 0; background: #fff; text-align: center; }
.hp-letra b { display: block; margin-top: calc(var(--mm) * 2.6); font-size: calc(var(--mm) * 9.2); }
.hp-letra small { display: block; margin-top: calc(var(--mm) * 1); font-size: calc(var(--mm) * 2.3); font-weight: 700; }
.hp-logo { position: absolute; }
.hp-texto { position: absolute; white-space: nowrap; }
@media (max-width: 640px) {
  fieldset.logo-y-vista { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .logo-y-vista .tamanos { flex-direction: row; flex-wrap: wrap; gap: 8px 24px; padding-top: 0; }
}

/* Modo oscuro: lo que no se resuelve con los colores de arriba. */
dialog.calculadora { background: var(--superficie); }
/* Los íconos de los avisos, con trazo más claro sobre el fondo oscuro. */
:root[data-tema="oscuro"] .bloque.avisos h2::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ab4f8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2M12 11h4M12 16h4M8 11h.01M8 16h.01'/%3E%3C/svg%3E"); }
:root[data-tema="oscuro"] .bloque.avisos.urgente h2::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f28b82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4M12 17h.01'/%3E%3C/svg%3E"); }
:root[data-tema="oscuro"] .aviso-sistema::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f28b82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4M12 17h.01'/%3E%3C/svg%3E"); }
:root[data-tema="oscuro"] .bloque.avisos .accion::after, :root[data-tema="oscuro"] .aviso-sistema .accion::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ab4f8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); }
:root[data-tema="oscuro"] .zona-archivo::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ab4f8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M12 18v-6M9 15l3-3 3 3'/%3E%3C/svg%3E"); }
:root[data-tema="oscuro"] .tarjeta-aviso::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ab4f8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 22h18M6 18v-7M10 18v-7M14 18v-7M18 18v-7M12 2l8 5H4z'/%3E%3C/svg%3E"); }
:root[data-tema="oscuro"] .tarjeta-aviso.conexion::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ab4f8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-5M9 8V2M15 8V2M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8z'/%3E%3C/svg%3E"); }
:root[data-tema="oscuro"] .tarjeta-aviso.salud.bien::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236fcf8f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8M15 7h6v6'/%3E%3C/svg%3E"); }
:root[data-tema="oscuro"] .tarjeta-aviso.salud.atencion::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0c264' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8v5M12 17h.01M10.3 3.9L2.4 18a2 2 0 0 0 1.7 3h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3C/svg%3E"); }
:root[data-tema="oscuro"] .tarjeta-aviso.salud.riesgo::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f28b82' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l6 6 4-4 8 8M15 17h6v-6'/%3E%3C/svg%3E"); }
/* Las imágenes cargadas (logo, firma) sobre un fondo blanco, para que se vean aunque tengan letras oscuras. */
:root[data-tema="oscuro"] .datos .logo-empresa, :root[data-tema="oscuro"] .firma-previa img, :root[data-tema="oscuro"] .correo .firma-en-previa { background: #fff; padding: 4px 6px; border-radius: 4px; }

/* Configuración → Apariencia: una muestra de cada modo para elegir (con sus propios colores, no los del modo actual). */
.temas { display: flex; flex-wrap: wrap; gap: 16px; min-width: 0; margin: 0; padding: 0; border: 0; }
.temas legend { width: 100%; margin-bottom: 10px; padding: 0; color: var(--suave); font-size: 14px; }
label.tema { position: relative; align-items: flex-start; gap: 8px; margin: 0; cursor: pointer; font-size: 15px; }
.tema input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.muestra { position: relative; display: block; width: 140px; height: 88px; overflow: hidden; border: 1px solid var(--borde); border-radius: 10px; }
.tema input:checked + .muestra { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento); }
.tema input:focus-visible + .muestra { outline: 2px solid var(--acento); outline-offset: 4px; }
.muestra i { position: absolute; display: block; border-radius: 3px; }
.muestra i:nth-child(1) { top: 0; left: 0; right: 0; height: 16px; border-radius: 0; }
.muestra i:nth-child(2) { top: 28px; left: 12px; right: 12px; bottom: 12px; border-radius: 6px; }
.muestra i:nth-child(3) { top: 40px; left: 24px; width: 54px; height: 9px; }
.muestra i:nth-child(4) { top: 57px; left: 24px; width: 90px; height: 6px; }
.muestra-claro { background: #f5f6f8; }
.muestra-claro i:nth-child(1) { background: #fff; border-bottom: 1px solid #d6dae0; }
.muestra-claro i:nth-child(2) { background: #fff; border: 1px solid #d6dae0; }
.muestra-claro i:nth-child(3) { background: #1f5fae; }
.muestra-claro i:nth-child(4) { background: #d6dae0; }
.muestra-oscuro { background: #121519; }
.muestra-oscuro i:nth-child(1) { background: #1c2026; border-bottom: 1px solid #343b44; }
.muestra-oscuro i:nth-child(2) { background: #1c2026; border: 1px solid #343b44; }
.muestra-oscuro i:nth-child(3) { background: #2f6fc0; }
.muestra-oscuro i:nth-child(4) { background: #343b44; }
.tema input:checked ~ .nombre-tema { color: var(--acento); font-weight: 600; }

/* La página que abre el cliente con los botones del correo de la cotización. */
.respuesta-cliente { max-width: 640px; margin: 0 auto; }
.respuesta-empresa { margin: 8px 0 20px; }
.respuesta-empresa img { display: block; max-height: 64px; max-width: 260px; object-fit: contain; }
.respuesta-cliente h1 { margin-bottom: 16px; }
.respuesta-cliente .datos { grid-template-columns: 160px 1fr; margin-bottom: 16px; }
.respuesta-botones { display: flex; gap: 12px; margin: 20px 0; }
.respuesta-botones .boton { flex: 1; text-align: center; font-size: 18px; padding: 14px 18px; }
.respuesta-pdf { margin: 0 0 20px; }
.respuesta-form { max-width: none; margin: 16px 0; }
.respuesta-cliente .registro { margin-top: 24px; }
.respuesta-form h2 { margin-top: 0; }
.respuesta-form textarea { width: 100%; box-sizing: border-box; }
.respuesta-form .acciones { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
@media (max-width: 640px) { .respuesta-cliente .datos { grid-template-columns: 1fr; } }
.desde-correo { color: var(--suave); }
.mensaje-lista { margin-top: 4px; font-size: 14px; }
.mensaje-lista summary { cursor: pointer; color: var(--acento); }
/* La respuesta del cliente en la cotización: separada de los botones de arriba y de los datos de abajo. */
#respuesta-cliente { margin: 16px 0; }
#respuesta-cliente p { margin: 6px 0; }

/* Pedidos: «Ver correo» y la cruz para eliminar sin avisarle al cliente */
.boton.chico.borrar-fila { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--rojo-borde); background: transparent; color: var(--rojo-fuerte); }
.botones-fila.en-linea .boton.chico.borrar-fila { padding: 0; }
.boton.chico.borrar-fila:hover { background: var(--rojo-claro); border-color: var(--rojo-fuerte); }
.boton.chico.borrar-fila svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
dialog.cuadro-planos.cuadro-correo { width: min(760px, calc(100vw - 96px)); height: fit-content; max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); }
.cuadro-correo .contenido-cuadro { padding-bottom: 16px; overflow: hidden; }
.cuadro-correo .texto-correo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.datos-correo { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0 0 12px; }
.datos-correo dt { color: var(--suave); }
.datos-correo dd { margin: 0; overflow-wrap: anywhere; }
.texto-correo { padding: 14px 16px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); line-height: 1.55; overflow-wrap: anywhere; }
.texto-correo .sin-vista { margin: 0; color: var(--suave); }
@media (max-width: 700px) {
  dialog.cuadro-planos.cuadro-correo { width: calc(100vw - 24px); max-height: calc(100dvh - 56px); }
}
.precios-mas-iva { margin: 16px 0 4px; color: var(--verde-texto); }

/* S-gestion App: el instructivo para instalarla en el celular */
.app-presentacion { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 16px; }
.app-presentacion h2 { margin: 0 0 6px; }
.app-presentacion p { margin: 0 0 8px; }
.app-icono { flex: none; border-radius: 16px; box-shadow: 0 4px 14px rgba(31, 95, 174, .25); }
.app-al-dia { color: var(--verde-texto); font-weight: 600; }
.app-logo { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 16px; }
.app-logo-muestra { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 104px; }
.app-logo-muestra img { border-radius: 20px; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); background: var(--superficie-2); }
.app-logo-muestra small { color: var(--suave); text-align: center; }
.app-logo-texto { min-width: 0; }
.app-logo h2 { margin: 0 0 6px; }
.app-logo p { margin: 0 0 8px; }
.app-requisitos { font-size: 14px; }
.app-logo-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0 8px; }
.app-logo-form input[type=file] { flex: 1 1 220px; min-width: 0; max-width: 100%; }
.app-qr { display: flex; gap: 20px; align-items: center; margin-bottom: 16px; }
.app-qr h2 { margin: 0 0 6px; }
.app-qr p { margin: 0 0 6px; }
.app-qr-codigo svg { display: block; width: 150px; height: 150px; border-radius: 6px; }
.app-direccion { color: var(--suave); font-size: 14px; overflow-wrap: anywhere; }
.app-pasos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.app-pasos h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0 0 10px; }
.app-pasos h2 small { color: var(--suave); font-weight: 400; font-size: .7em; }
.app-pasos .tu-celular { display: none; margin-left: auto; font-size: 13px; }
/* Los pasos del celular que se está usando van primero, con la etiqueta «Tu celular». */
.app-pasos .es-el-tuyo { order: -1; }
.app-pasos .es-el-tuyo .tu-celular { display: inline-block; }
.app-pasos ol { margin: 0; padding-left: 22px; }
.app-pasos li { margin: 0 0 10px; line-height: 1.5; }
.app-tecla { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0 2px; vertical-align: -6px; border: 1px solid var(--borde); border-radius: 6px; background: var(--superficie-2); color: var(--acento); }
.app-tecla svg { width: 16px; height: 16px; fill: currentColor; }
.app-tecla svg .linea { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app-nota { margin: 8px 0 0; color: var(--suave); font-size: 14px; }
.app-preguntas h2 { margin: 0 0 8px; }
.app-preguntas dl { margin: 0; }
.app-preguntas dt { margin-top: 12px; font-weight: 600; }
.app-preguntas dd { margin: 4px 0 0; color: var(--suave); line-height: 1.5; }
@media (max-width: 700px) {
  .app-pasos { grid-template-columns: 1fr; }
  .app-presentacion { flex-direction: column; gap: 12px; }
  .app-logo { flex-direction: column; gap: 12px; }
  .app-logo-muestra { align-items: flex-start; width: auto; }
  .app-logo-texto { width: 100%; }
  .app-logo-form input[type=file] { flex-basis: 100%; }
  .app-icono { width: 60px; height: 60px; border-radius: 14px; }
}

/* Configuración → Notificaciones en el celular */
.notificaciones .notif-general { display: inline-flex; flex-direction: row; align-items: center; font-size: 15px; gap: 10px; margin: 4px 0 8px; font-weight: 600; cursor: pointer; }
.notificaciones .notif-general input { width: 20px; height: 20px; margin: 0; }
.notif-este { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 8px 0 14px; padding: 10px 14px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie-2); }
.notif-este p { margin: 0; flex: 1 1 260px; }
.notif-este.listo { border-color: var(--verde-borde); background: var(--verde-claro); }
.notif-este.listo p { color: var(--verde-texto); }
.notif-este.aviso-suave p { color: var(--suave); }
.notif-elegir { margin: 4px 0 10px; color: var(--suave); }
.notif-modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.notif-modulo { margin: 0; padding: 10px 14px 6px; border: 1px solid var(--borde); border-radius: 8px; min-width: 0; }
.notif-modulo legend { padding: 0 6px; font-weight: 600; }
.notif-tipo { display: flex; flex-direction: row; gap: 10px; align-items: flex-start; margin: 0 0 10px; cursor: pointer; }
.notif-tipo input { flex: none; align-self: flex-start; width: 18px; height: 18px; margin: 1px 0 0; }
.notif-tipo span { font-size: 15px; }
.notif-tipo small { display: block; color: var(--suave); }
.notif-guardado { min-height: 1.3em; margin: 8px 0 0; color: var(--verde-texto); font-size: 14px; }
.notif-dispositivos { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--linea); }
.notif-dispositivos h3 { margin: 0 0 8px; font-size: 1em; }
.notif-dispositivos ul { list-style: none; margin: 0 0 10px; padding: 0; }
.notif-dispositivos li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.notif-dispositivos li small { color: var(--suave); }
.notif-ninguno { color: var(--suave); margin: 0; }

/* El menú: un logito antes de cada módulo y una barrita finita entre módulos. */
.barra .ic { flex: none; width: 17px; height: 17px; }
.marca, .barra nav a, .abrir-grupo { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.barra nav { gap: 0; }
.barra nav > a, .barra nav > .grupo { padding: 0 10px; border-left: 1px solid var(--borde); }
.barra nav > a, .barra nav > .grupo > .abrir-grupo { line-height: 1.2; }
.barra .submenu a { display: flex; gap: 10px; }
.barra .submenu .ic { opacity: .85; }
/* En pantallas angostas de computadora, sin los logitos para que el menú entre en una línea. */
@media (min-width: 641px) and (max-width: 1599px) {
  .barra nav > a .ic, .barra nav > .grupo > .abrir-grupo .ic, .marca .ic { display: none; }
  .barra nav > a, .barra nav > .grupo { padding: 0 9px; }
}
@media (max-width: 640px) {
  .barra nav > a, .barra nav > .grupo { border-left: 0; }
  .barra.abierta nav > .grupo { padding: 0; }
  .barra.abierta nav a, .barra.abierta .abrir-grupo { gap: 12px; justify-content: flex-start; }
  .barra .ic { width: 20px; height: 20px; }
  .barra.abierta .abrir-grupo .flecha { margin-left: auto; }
}

/* Lo que es solo de la computadora (la pantalla del puesto) o solo del celular (las notificaciones) en el menú. */
.barra nav .solo-celu { display: none !important; }
@media (max-width: 640px) {
  .barra nav .solo-pc { display: none !important; }
  .barra nav a.solo-celu { display: inline-flex !important; }
}

/* Configuración → Diseño → Altura del texto: agranda o achica la pantalla (textos, tablas y botones), como el tamaño del
   texto del celular. El menú queda igual, para que siga entrando en una línea. */
html[data-texto="pequena"] main { zoom: .9; }
html[data-texto="grande"] main { zoom: 1.15; }
.opciones-texto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; border: 0; }
.opciones-texto legend { margin-bottom: 10px; }
.opcion-texto { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; min-height: 110px; padding: 14px 10px; border: 2px solid var(--borde); border-radius: 12px; background: var(--superficie); cursor: pointer; margin: 0; }
.opcion-texto input { position: absolute; opacity: 0; pointer-events: none; }
.opcion-texto:has(input:checked) { border-color: var(--acento); background: var(--azul-suave); }
.opcion-texto:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
.opcion-texto .aa { font-weight: 700; line-height: 1; color: var(--texto); }
.opcion-texto .nombre-texto { font-size: 14px; color: var(--suave); }
.opcion-texto:has(input:checked) .nombre-texto { color: var(--acento); font-weight: 600; }
@media (max-width: 640px) { .opcion-texto { min-height: 90px; } }

/* El logito del cliente o del proveedor antes del nombre. Fondo blanco: los logos oscuros se ven también en modo oscuro. */
.logo-mini { display: inline-block; width: 22px; height: 22px; margin: -3px 8px -3px 0; padding: 1px; object-fit: contain; vertical-align: middle; border-radius: 5px; background: #fff; box-shadow: 0 0 0 1px var(--borde); }
.logo-grande { display: inline-block; width: 40px; height: 40px; margin-right: 12px; padding: 2px; object-fit: contain; vertical-align: middle; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--borde); }
.campo-logo { display: flex; gap: 14px; align-items: flex-start; }
.campo-logo .logo-actual { padding-top: 26px; }
.campo-logo > label { flex: 1; min-width: 0; }

/* Proveedor → Descripción: desplegables con «+ Crear descripción» arriba de todo. */
.campo-descripciones { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: 14px; }
.campo-descripciones > small { color: var(--suave); }
.filas-descripcion { display: flex; flex-direction: column; gap: 8px; }
.fila-descripcion { display: flex; gap: 6px; align-items: flex-start; }
.desplegable-desc { position: relative; flex: 1; min-width: 0; }
.desc-elegida { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--borde-2); border-radius: 6px; background: var(--campo); color: var(--texto); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.desc-elegida[aria-expanded="true"] .flecha { transform: rotate(180deg); }
.desc-elegida .sin-elegir { color: var(--suave); }
.desc-lista { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; max-height: 280px; overflow-y: auto; padding: 6px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); box-shadow: 0 10px 28px rgba(16, 24, 40, .16); }
.desc-crear { display: block; width: 100%; margin-bottom: 6px; padding: 7px 10px; border: 1px solid var(--acento); border-radius: 6px; background: transparent; color: var(--acento); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.desc-crear:hover { background: var(--azul-suave); }
.desc-nueva { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.desc-nueva input { flex: 1 1 160px; min-width: 0; }
.desc-nueva .error { flex-basis: 100%; }
.desc-nueva .error:empty { display: none; }
.desc-opciones { display: flex; flex-direction: column; }
.desc-opciones button { padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--texto); font: inherit; text-align: left; cursor: pointer; }
.desc-opciones button:hover { background: var(--azul-suave); color: var(--acento); }
.desc-quitar { flex: none; width: 36px; height: 38px; padding: 0; border: 1px solid var(--borde); border-radius: 6px; background: var(--superficie); color: var(--suave); cursor: pointer; }
.desc-quitar:hover { color: var(--error); border-color: var(--error); }
.agregar-descripcion { align-self: flex-start; }
.descripciones-proveedor { color: var(--suave); font-size: 14px; }

/* La pantalla de bloqueo (Face ID o huella). */
.desbloqueo { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 360px; margin: 12vh auto 0; padding: 0 16px; }
.desbloqueo-icono { border-radius: 20px; box-shadow: 0 6px 18px rgba(31, 95, 174, .25); }
.desbloqueo h1 { margin: 18px 0 4px; font-size: 1.45em; }
.desbloqueo-quien { margin: 0 0 24px; color: var(--suave); }
.desbloqueo-boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px 18px; font-size: 16px; }
.desbloqueo-boton svg { width: 24px; height: 24px; }
.desbloqueo-error { min-height: 1.4em; margin: 12px 0 0; color: var(--error); }
.desbloqueo-otro { margin-top: 18px; }
.desbloqueo-otro .enlace { padding: 0; border: 0; background: none; color: var(--acento); font: inherit; text-decoration: underline; cursor: pointer; }
.llave-estado { color: var(--verde-texto); font-weight: 600; }
.llave-nota { color: var(--suave); font-size: 14px; }
.llave-error { min-height: 1.2em; margin: 8px 0 0; color: var(--error); }
.llave-otras { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea); }
.llave-otras h3 { margin: 0 0 8px; font-size: 1em; }
.llave-otras ul { list-style: none; margin: 0; padding: 0; }
.llave-otras li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.llave-otras small { color: var(--suave); }

/* App instalada en el celular: el iPhone difumina la franja de arriba de la pantalla. Más espacio arriba del menú,
   del mismo color, para que lo borroso caiga sobre el fondo y no sobre «Inicio» y «Menú». */
@media (display-mode: standalone) and (max-width: 640px) {
  .barra { padding-top: 22px; }
}

/* Clientes y Proveedores: el logito y los datos de cada uno, un poco más grandes. */
.empresas td.c-titulo { font-size: 15.5px; }
.empresas .logo-mini { width: 30px; height: 30px; margin: 0 10px 0 0; padding: 2px; border-radius: 7px; }
@media (max-width: 640px) {
  .lista-celu.empresas tr { padding: 14px 14px; gap: 4px 12px; }
  .lista-celu.empresas td.c-titulo { display: flex; align-items: center; gap: 0 6px; font-size: 17px; margin-bottom: 4px; }
  .lista-celu.empresas td.c-sub { font-size: 14.5px; }
  .lista-celu.empresas .logo-mini { flex: none; width: 36px; height: 36px; margin: 0 4px 0 0; border-radius: 8px; }
}

/* Producción → Órdenes de Trabajo. */
.aviso.suave { background: var(--amarillo-claro); border-color: var(--amarillo-borde); }
.ot-tag { font-size: 12.5px; color: var(--suave); font-weight: 400; }
.ot-nota { font-size: 13px; color: var(--suave); margin: 4px 0 10px; }
.ot-avance { display: inline-block; width: 90px; height: 8px; margin-right: 8px; border-radius: 4px; background: var(--linea); vertical-align: middle; overflow: hidden; }
.ot-avance i { display: block; height: 100%; background: #1e8e3e; }
.ot-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.ot-grid .datos { grid-template-columns: 150px minmax(0, 1fr); align-content: start; }
.ot-ops td.ot-completa { color: var(--verde-texto); font-weight: 600; }
.ot-incs { padding-left: 20px; }
.ot-incs li { margin: 4px 0; }
.ot-resumen { margin: 0 0 14px; color: var(--suave); }
.ot-resumen strong { color: var(--texto); }
.zona-peligro { margin-top: 28px; }
.op-ficha { margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); }
.op-ficha.quitado { opacity: .45; }
.op-ficha.quitado input, .op-ficha.quitado select { text-decoration: line-through; }
.op-fila { display: grid; grid-template-columns: 76px minmax(160px, 2fr) minmax(140px, 1.4fr) minmax(110px, 1fr) 32px; gap: 10px; align-items: end; }
.op-segunda { grid-template-columns: 120px 120px auto auto minmax(160px, 1fr) minmax(120px, 160px); margin-top: 8px; }
.op-ficha label { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.op-ficha label > span:first-child { font-size: 13px; color: var(--suave); }
.op-ficha label.tilde { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 8px; white-space: nowrap; }
.op-ficha label[hidden] { display: none; }
.op-ficha input, .op-ficha select { width: 100%; }
.op-ficha label.tilde input { width: auto; }
.op-quitar { align-self: end; margin-bottom: 6px; }
@media (max-width: 900px) {
  .ot-grid { grid-template-columns: minmax(0, 1fr); }
  .op-fila, .op-segunda { grid-template-columns: 70px minmax(0, 1fr) 32px; }
  .op-fila > label:nth-child(n+3):not(.op-desc), .op-segunda > label { grid-column: 1 / -1; }
  .op-segunda > label.op-corto { grid-column: auto / span 1; }
  .op-segunda { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .op-segunda > label.tilde, .op-segunda > label.op-tercero { grid-column: 1 / -1; }
  .op-quitar { grid-row: 1; grid-column: 3; }
}
@media (max-width: 640px) {
  .lista-celu.lista-ot tr { grid-template-areas: "titulo estado" "sub sub" "pieza pieza" "avance avance"; }
  .lista-celu.lista-ot td.c-estado { grid-area: estado; margin: 0; text-align: right; }
  .lista-celu.lista-ot td.c-pieza { grid-area: pieza; margin-top: 4px; }
  .lista-celu.lista-ot td.c-avance { grid-area: avance; margin-top: 6px; color: var(--suave); font-size: 13px; }
  .ot-grid .datos { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }
}
/* Computadoras o tabletas angostas: el menú un poco más chico para que entre en una línea. */
@media (min-width: 641px) and (max-width: 1199px) {
  .barra { gap: 12px; padding: 12px 14px; }
  .barra nav > a, .barra nav > .grupo { padding: 0 6px; }
  .barra nav > a, .barra nav > .grupo > .abrir-grupo, .marca, .barra .salir, .barra .salir a, .barra .salir button { font-size: 14px; }
}
#form-avance #campo-primera_pieza_ok { margin: 2px 0 14px; }
#form-avance #campo-primera_pieza_ok[hidden] { display: none; }

/* Equipo y roles. */
.ayuda-tilde { display: block; margin: -4px 0 12px 28px; color: var(--suave); font-size: 13px; }
.rol-resumen { font-size: 13px; color: var(--suave); max-width: 520px; }
.ejemplos-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ejemplo-rol { padding: 16px; }
.ejemplo-rol h3 { margin: 0 0 6px; font-size: 16px; }
.ejemplo-rol p { margin: 0 0 12px; font-size: 14px; color: var(--suave); }
.tabla-permisos { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--borde); }
.tabla-permisos th, .tabla-permisos td { padding: 8px 10px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: middle; }
.tabla-permisos thead th { font-size: 13px; }
.tabla-permisos tr.modulo th { background: var(--superficie-2); font-size: 14px; }
.tabla-permisos td small { color: var(--suave); }
.tabla-permisos td.centro { text-align: center; width: 110px; }
.tabla-permisos input[type=checkbox] { width: 18px; height: 18px; }
.tabla-permisos label.tilde { display: flex; gap: 6px; align-items: center; font-size: 14px; white-space: nowrap; }

/* Producción → Control de planta */
.lista-pausas { margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: var(--suave); }
.tabla-control td { vertical-align: top; }
.tabla-turno { width: auto; min-width: 420px; }
.tabla-turno td { padding: 6px 12px 6px 0; border-bottom: 0; }
.tabla-turno input[type=time], .tabla-turno input[type=text] { width: 100%; min-width: 120px; }
.tabla-turno .tilde { margin: 0; }