/* La hoja común del tablero de ADCO.
 *
 * Desde el 16 de octubre de 2026 lleva dentro la del rediseño de Mercadotecnia, que vivía aparte en
 * assets/diseno.css y repetía reglas de ésta. Se fundieron para que cada pantalla pese menos (el tope
 * es de 250 KB por pantalla, y lo miden los verificadores): primero va lo de antes y al final lo del
 * rediseño, en el mismo orden en que el navegador las leía, y de lo de antes se quitaron sólo las
 * declaraciones que una regla posterior con el mismo selector pisaba siempre. Se ve igual, comprobado
 * con capturas a 960 y a 390 de las pantallas principales.
 *
 * Las explicaciones largas de cada regla se mudaron a docs/tablero/estilo-explicado.md, y aquí queda
 * su primer renglón con la marca (+). Los originales completos están en git: style.css en 4a6d80f y
 * diseno.css en 44266f4.
 *
 * Tipografía: Geist, de Google Fonts, que cada <head> pide con su propio <link>. */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { min-height: 100vh; }
a { text-decoration: none; }

/* ── Nav desktop ── */
/* La banda navy va de orilla a orilla, que es lo que se ve bien, pero LO QUE (+) */
.nav {
 position: sticky; top: 0; z-index: 100;
}
.nav-interior {
 max-width: 1280px; margin: 0 auto; 
 display: flex; align-items: stretch;
}
/* Dos renglones como máximo, alineados a la izquierda y centrados en la altura de la barra, igual que… (+) */
.nav-link { text-align: left; white-space: nowrap; display: flex; align-items: center; cursor: pointer; }
.nav-link.active { border-bottom-color: var(--gold); }
.nav-right { margin-left: auto; display: flex; align-items: center; padding-left: 12px; }
/* A media pantalla la barra se queda con lo que se usa: (+) */
@media (max-width: 1240px) {
  .nav-right > span { display: none; }
}
@media (min-width: 769px) { .nav-interior { overflow-x: auto; scrollbar-width: thin; } }
.nav-badge { background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); font-size: 11px; padding: 3px 8px; border-radius: 12px; }

/* ── Nav móvil (oculto en desktop) ── */
.nav-mobile { display: none; }

/* ── Main ── */
main { margin: 0 auto; }
.page-subtitle { margin-top: 2px; margin-bottom: 20px; }

/* ── KPI Grid ── */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.kpi-card { background: var(--surface); }
.kpi-card.gold  { border-left-color: var(--gold); }
.kpi-card.green { border-left-color: var(--green); }
.kpi-card.red   { border-left-color: var(--red); }
.kpi-value { color: var(--navy); }
.kpi-card.green .kpi-value { color: #15803d; }
.kpi-card.red .kpi-value   { color: var(--red); }
.kpi-delta { color: var(--muted); }
.up   { color: var(--green); font-weight: 600; }
.down { color: var(--red); font-weight: 600; }

/* ── Panel ── */
.panel { background: var(--surface); }
.panel-header { display: flex; justify-content: space-between; align-items: center; }

/* ── Grid 2 columnas ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; }

/* ── Tabla ── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
/* LOS IMPORTES Y LAS CANTIDADES VAN CARGADOS A LA DERECHA, con cifras de ancho fijo, para que decenas… (+) */
td.num, th.num, .num { text-align: right; white-space: nowrap; }
th { text-align: left; white-space: nowrap; }
td { vertical-align: middle; }
/* La lista del padrón lleva seis columnas y una de ellas dice frases, así que (+) */
.tabla-apretada th, .tabla-apretada td { padding-left: 8px; padding-right: 8px; }
/* Y los nombres largos y los correos largos se parten cuando aprieta, en vez de (+) */
/* ESTA REGLA APUNTABA A DOS COLUMNAS QUE JAMÁS LA NECESITAN, y se vio (+) */
.tabla-apretada td:nth-child(4) { white-space: nowrap; }
/* LA COLUMNA 2 SALIO DE AQUI EL 31 DE AGOSTO DE 2026. (+) */
.tabla-apretada td:nth-child(3) { white-space: nowrap; }
tr:last-child td { border-bottom: none; }
.row-clickable { cursor: pointer; }

/* ── Badges ── */
.badge { display: inline-flex; align-items: center; white-space: nowrap; }

/* ── Alertas ── */
.alerts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.alert.warn   { border: 1px solid #fde047; }
.alert.danger { background: #fee2e2; border: 1px solid #fca5a5; }
.alert.info   { border: 1px solid #93c5fd; }
.alert-title { font-weight: 700; margin-bottom: 4px; }
.alert.warn   .alert-title { color: #854d0e; }
.alert.danger .alert-title { color: #991b1b; }
.alert.warn   .alert-body { color: #713f12; }
.alert.danger .alert-body { color: #7f1d1d; }

/* ── Filtros ── */
.filters { display: flex; flex-wrap: wrap; }
.filter-group { display: flex; flex-direction: column; }
.filter-group label { color: var(--muted); }
/* EL CAMPO SIN type TAMBIÉN CUENTA. (+) */
select, input[type="text"], input[type="search"], input[type="number"],
input[type="date"], input:not([type]) {
 background: var(--surface); color: var(--text);
 /* LA MISMA ALTURA EN LOS DOS: (+) */
 box-sizing: border-box; line-height: 1.25;
}
textarea { box-sizing: border-box; }
select:focus, input:focus { outline-offset: 1px; }
.btn {
 border: none; 
 cursor: pointer; 
}

/* ── Loading ── */
.loading { text-align: center; color: var(--muted); font-size: 14px; }
.error-msg { background: #fee2e2; border: 1px solid #fca5a5; padding: 16px; color: var(--red); margin-bottom: 16px; }

/* ── Barra horizontal de proyecto ── */
.proj-bar-wrap { flex: 1; background: var(--bg); border-radius: 3px; height: 6px; }
.proj-bar { background: var(--navy); height: 6px; border-radius: 3px; }

/* ── Chat widget ── */
#chat-fab {
 position: fixed; bottom: 24px; right: 24px; z-index: 200;
 border-radius: 50%;
 color: #fff; border: none; cursor: pointer;
 display: flex; align-items: center; justify-content: center;
 transition: background .15s, transform .15s;
}
#chat-fab:hover { background: var(--navy-light); transform: scale(1.05); }
#chat-fab.chat-open { background: var(--navy-light); }

#chat-pane {
 position: fixed; bottom: 88px; right: 24px; z-index: 200;
 width: 360px; max-height: 500px;
 background: var(--surface); 
 display: flex; flex-direction: column;
 overflow: hidden;
 transition: transform .2s, opacity .2s;
}
#chat-pane.chat-hidden { transform: translateY(16px) scale(.97); opacity: 0; pointer-events: none; }

#chat-header {
 background: var(--navy); color: #fff;
 padding: 12px 16px; display: flex; justify-content: space-between; align-items: center;
 flex-shrink: 0;
}

#chat-messages {
 flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px;
}

.chat-msg {
 max-width: 88%; padding: 10px 13px; border-radius: 12px; font-size: 13px; line-height: 1.5;
 word-break: break-word;
}
.chat-msg-user {
 background: var(--navy); color: #fff;
 align-self: flex-end; border-bottom-right-radius: 3px;
}
.chat-msg-bot {
 background: var(--bg); color: var(--text);
 align-self: flex-start; border-bottom-left-radius: 3px;
}
.chat-msg-bot hr { border: none; border-top: 1px solid var(--border); margin: 6px 0; }
.chat-msg-bot code { background: rgba(0,0,0,.07); padding: 1px 4px; border-radius: 3px; font-size: 12px; }
.chat-msg-bot blockquote { border-left: 3px solid var(--gold); padding: 4px 10px; margin: 4px 0; color: var(--muted); font-style: italic; font-size: 12px; }
.chat-msg-bot li { padding: 2px 0 2px 14px; position: relative; }
.chat-msg-bot li::before { content: "•"; position: absolute; left: 2px; color: var(--navy); }
.chat-msg-bot a { color: var(--navy-light); }

.chat-thinking { padding: 14px 13px; }
.chat-dots { display: flex; gap: 5px; }
.chat-dots span {
 width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
 animation: chat-bounce .9s infinite;
}
.chat-dots span:nth-child(2) { animation-delay: .15s; }
.chat-dots span:nth-child(3) { animation-delay: .3s; }

#chat-input-row {
 display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border);
 flex-shrink: 0;
}
#chat-input {
 flex: 1; border: 1px solid var(--border); border-radius: 20px;
 padding: 8px 14px; font-size: 13px; min-width: 0;
 background: var(--bg); color: var(--text);
}
#chat-input:focus { outline: 2px solid var(--navy-light); outline-offset: 1px; }
#chat-mic-btn {
 width: 36px; height: 36px; border-radius: 50%;
 background: var(--bg); color: var(--muted); border: 1px solid var(--border); cursor: pointer;
 display: flex; align-items: center; justify-content: center;
 flex-shrink: 0; transition: background .15s, color .15s;
}
#chat-mic-btn:hover { background: var(--border); color: var(--navy); }
#chat-mic-btn.chat-mic-recording { background: #dc2626; color: #fff; border-color: #dc2626; animation: chat-pulse 1s infinite; }
#chat-mic-btn.chat-mic-transcribing { background: var(--gold); color: #fff; border-color: var(--gold); }
#chat-mic-btn:disabled { opacity: .7; cursor: not-allowed; }
@keyframes chat-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }

#chat-send-btn {
 width: 36px; height: 36px; border-radius: 50%;
 background: var(--navy); color: #fff; border: none; cursor: pointer;
 display: flex; align-items: center; justify-content: center;
 flex-shrink: 0; transition: background .15s;
}
#chat-send-btn:hover:not(:disabled) { background: var(--navy-light); }
#chat-send-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Drawer de detalle (drill-down en pagos) ── */
#drawer-overlay {
 position: fixed; inset: 0; background: rgba(15,23,42,.45);
 z-index: 300; opacity: 0; pointer-events: none; transition: opacity .15s;
}
#drawer-overlay.drawer-open { opacity: 1; pointer-events: auto; }

#drawer {
 position: fixed; top: 0; right: 0; bottom: 0; width: 640px; max-width: 100vw;
 background: var(--surface); z-index: 301; 
 transform: translateX(100%); transition: transform .2s;
 overflow-y: auto;
}
#drawer.drawer-open { transform: translateX(0); }

#drawer-body { padding: 20px; }
.drawer-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.drawer-title { font-size: 16px; font-weight: 700; color: var(--navy); }
.drawer-close { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 20px; line-height: 1; padding: 4px; }
.drawer-close:hover { color: var(--text); }

.drawer-compare { background: var(--bg); border-radius: 8px; padding: 12px 14px; font-size: 13px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 4px; }
.drawer-compare-row { display: flex; justify-content: space-between; gap: 12px; }
.drawer-compare-label { color: var(--muted); }
.drawer-compare-value { font-weight: 600; text-align: right; }

.drawer-section-title { color: var(--muted); margin: 16px 0 8px; }
.drawer-adjuntos { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.drawer-adjunto-link { font-size: 13px; color: var(--navy-light); text-decoration: underline; word-break: break-word; }
.drawer-nota { font-size: 11px; color: var(--muted); margin-bottom: 16px; }

.drawer-iframe-wrap { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; height: 420px; }
.drawer-iframe-wrap iframe { width: 100%; height: 100%; border: none; }

/* ── Móvil ── */
@media (max-width: 768px) {
  .nav { display: none; }
  .nav-mobile {
 display: flex; 
 position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
 box-shadow: 0 -2px 8px rgba(0,0,0,.2);
 }
  .nav-mobile a { display: flex; flex-direction: column; align-items: center; color: rgba(255,255,255,.6); gap: 2px; }
  /* EL HUECO DE ABAJO ALCANZA PARA LA BARRA Y PARA EL BOTÓN DEL CHAT. (+) */
  main { padding-bottom: 140px; }
  /* Y LOS HIJOS DE UNA REJA LLEVAN min-width: (+) */
  .grid-2 > *, .kpi-grid > *, .alerts-grid > * { min-width: 0; }
  #chat-fab { bottom: 76px; right: 16px; width: 46px; height: 46px; }
  #chat-pane { width: calc(100vw - 32px); right: 16px; bottom: 132px; max-height: 60vh; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .grid-2  { grid-template-columns: 1fr; }
  .alerts-grid { grid-template-columns: 1fr; }
  #drawer { width: 100vw; }
}

/* LA BARRA DEL PADRÓN EN PANTALLA CHICA (+) */
@media (max-width: 760px) {
  .nav-padron { flex-wrap: wrap; padding: 0 14px; }
  .nav-padron .marca { padding: 10px 14px 10px 0; font-size: 15px; }
  .nav-padron a { padding: 0 10px; }
  .nav-padron .derecha > span { display: none; }
  .nav-padron #quien-esta-adentro {
 flex-basis: 100%; padding: 6px 0 8px !important; gap: 10px !important;
 border-top: 1px solid rgba(255,255,255,.12);
 }
}

/* LA PUERTA. Vive aquí para que la raíz y /padron/entrar.html la pinten igual. (+) */
.puerta-caja { max-width: 460px; margin: 8vh auto; padding: 0 16px; }
.puerta-tarjeta { background: #fff; border-radius: 10px; overflow: hidden;
 box-shadow: 0 1px 3px rgba(15,23,42,.10); }
.puerta-banda { background: #1a365d; padding: 20px 26px; }
.puerta-banda .marca { color: #d4a012; font-size: 19px; letter-spacing: 3px; font-weight: bold; }
.puerta-banda .sub { color: #cbd5e1; font-size: 12px; padding-top: 4px; }
.puerta-cuerpo { padding: 26px; color: #1e293b; font-size: 14px; line-height: 1.6; }
.puerta-cuerpo h1 { font-size: 19px; margin: 0 0 10px; color: #1a365d; }
.puerta-cuerpo p { margin: 0 0 16px; }
.puerta-cuerpo label { display: block; font-size: 12px; text-transform: uppercase;
 letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
/* LOS DOS CAMPOS, Y JAMAS SOLO EL DEL CORREO. (+) */
.puerta-cuerpo input[type=email],
.puerta-cuerpo input[type=text] { width: 100%; padding: 11px 12px; font: inherit;
 border: 1px solid #cbd5e1; border-radius: 6px;
 box-sizing: border-box; }
/* La clave son 64 caracteres seguidos: (+) */
.puerta-cuerpo input#puerta-clave-campo {
 font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
 font-size: 13px; letter-spacing: .02em; padding: 12px;
}
.puerta-cuerpo .aviso { padding: 12px 14px; border-radius: 6px; background: #f6f8fb;
 border-left: 4px solid #d4a012; margin: 0 0 16px; font-size: 13px; }
.puerta-cuerpo .aviso.malo { border-left-color: var(--red); background: #fef2f2; color: #b91c1c; }
.puerta-cuerpo .aviso.bueno { border-left-color: var(--green); background: #f0fdf4; color: #15803d; }
.puerta-pie { text-align: center; color: var(--muted); font-size: 12px; padding-top: 18px; }

/* La etiqueta de ambiente (+) */
.ambiente-marca {
 display: inline-flex; align-items: center; 
 
 /* Dos renglones, con el salto que pone el guion. (+) */
 white-space: pre-line; text-align: center; cursor: help;
}
.ambiente-suelto {
 position: sticky; top: 0; z-index: 90;
 padding: 6px 16px; text-align: center;
}
.ambiente-suelto .ambiente-marca { margin-left: 0; }

/* EN ESCRITORIO LA ETIQUETA YA VA DENTRO DE LA BARRA, así que la banda (+) */
.ambiente-suelto.solo-movil { display: none; }

/* La barra de arriba en celular: (+) */
.barra-movil { display: none; }

/* PRUEBAS: ámbar, que es el color de "cuidado" en todo este tablero. */
.ambiente-pruebas .ambiente-marca { background: #d4a012; color: #1a2744; }
.ambiente-pruebas .ambiente-suelto { background: #d4a012; }
.ambiente-pruebas .nav-mobile { border-top: 3px solid #d4a012; }

/* SIN RECONOCER: rojo, porque aquí lo que se sabe es que no se sabe. */
.ambiente-duda .ambiente-marca { background: #b91c1c; color: #fff; }
.ambiente-duda .ambiente-suelto { background: #b91c1c; }
.ambiente-duda .nav { background: #7f1d1d; }

/* Lo que solo se ve en celular (+) */
@media (max-width: 768px) {
  .ambiente-suelto.solo-movil { display: block; }
  .barra-movil {
 display: flex; align-items: center; justify-content: space-between;
 gap: 12px; background: var(--navy); color: #cbd5e1;
 font-size: 12px;
 }
  .barra-movil .quien { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .barra-movil .papel { opacity: .65; }
  .barra-movil .salir-del-sistema {
 color: var(--gold); text-decoration: none; font-size: 13px;
 padding: 6px 12px; border: 1px solid rgba(212,160,18,.5); border-radius: 6px;
 flex: 0 0 auto;
 }
  .ambiente-pruebas .barra-movil { background: #8a5a00; }
  /* EL DORADO SE LAVA SOBRE EL CAFE DE PRUEBAS: (+) */
  .ambiente-pruebas .barra-movil { color: #f8fafc; }
  .ambiente-pruebas .barra-movil .salir-del-sistema {
 color: #ffffff; border-color: rgba(255,255,255,.55);
 }
}

/* LO QUE SE PUEDE APRETAR SE VE QUE SE PUEDE APRETAR. (+) */
a.llevable { display: block; text-decoration: none; color: inherit; cursor: pointer;
 position: relative; padding-right: 34px;
 transition: transform .12s ease, box-shadow .12s ease; }
a.llevable:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
a.llevable:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* LA FLECHA DE LA ORILLA SUSTITUYÓ AL RENGLÓN DE TEXTO, y lo pidió Jorge el (+) */
a.llevable::after {
 content: "›"; /* › */
 position: absolute; right: 12px; top: 50%;
 transform: translate(0, -50%);
 font-size: 24px; line-height: 1; font-weight: 700;
 color: inherit; opacity: .45;
 transition: opacity .12s ease, transform .12s ease;
}
a.llevable:hover::after { opacity: 1; transform: translate(3px, -50%); }

/* EL HEXAGONO DE ADCO EN LA BARRA. (+) */
.nav-logo { width: auto; vertical-align: middle; 
 background: #fff; box-sizing: content-box; }
@media (max-width: 768px) { .nav-logo { height: 18px; margin-right: 7px; } }

/* LA BARRA DE PAGINACIÓN, igual en las tres listas. (+) */
.pg { display:flex; align-items:center; justify-content:space-between; gap:16px;
 flex-wrap:wrap; padding:10px 2px; font-size:13px; color:var(--muted); }
.pg-cuenta b, .pg-donde b { color:var(--navy); }
.pg-controles { display:flex; align-items:center; gap:4px; }
.pg-donde { padding:0 10px; white-space:nowrap; }
.pg-btn { min-width:32px; height:30px; padding:0 8px; border:1px solid var(--border);
 background:var(--surface); color:var(--navy); font-size:15px;
 font-weight:700; cursor:pointer; line-height:1; }
.pg-btn:hover:enabled { color:#fff; border-color:var(--navy); }
.pg-btn:disabled { opacity:.35; cursor:default; }
.pg-btn:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.pg-tamano { white-space:nowrap; }
.pg-sel { margin:0 4px; padding:5px 6px; border:1px solid var(--border);
 background:var(--surface); color:var(--navy);
 font-size:13px; font-weight:600; }
@media (max-width:640px) {
  .pg { gap:10px; }
  .pg-cuenta { flex:1 1 100%; }
}

/* UNA TABLA QUE EN EL CELULAR SE VUELVE TARJETAS (+) */
@media (max-width: 760px) {
  .tabla-tarjetas thead { display: none; }
  .tabla-tarjetas, .tabla-tarjetas tbody, .tabla-tarjetas tr, .tabla-tarjetas td {
 display: block; width: 100%; }
  .tabla-tarjetas tr { margin-bottom: 10px; border: 1px solid var(--border);
 border-radius: 8px; padding: 6px 12px; background: var(--surface); }
  .tabla-tarjetas td { border: none; padding: 5px 0; display: block;
 text-align: right; }
  .tabla-tarjetas td::before { content: attr(data-etiqueta); float: left;
 margin-right: 14px; max-width: 45%; font-weight: 600;
 color: var(--muted); font-size: 11px; text-transform: uppercase;
 letter-spacing: .3px; text-align: left; line-height: 1.7; }
  .tabla-tarjetas td:empty { display: none; }
  /* Y SE LE QUITA EL ANCHO TOPADO A LA CELDA. (+) */
  .tabla-tarjetas td[style*="max-width"] { max-width: none !important; }
  .tabla-tarjetas td { overflow: visible !important; text-overflow: clip !important;
 white-space: normal !important; }
  /* UNA CELDA QUE TRAE UNA SOLA COSA CHICA VUELVE A SER FLEXIBLE, para que su (+) */
  .tabla-tarjetas td:has(> .avisos-celda:only-child) {
 display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .tabla-tarjetas td:has(> .avisos-celda:only-child)::before {
 float: none; max-width: 60%; }
  /* El envoltorio deja de desplazarse de lado: ya no hay nada que arrastrar. */
  .tabla-tarjetas-wrap { overflow-x: visible; }
  /* Y SE LE QUITA EL ANCHO MÍNIMO, que es lo que tapaba todo esto. (+) */
  .table-wrap .tabla-tarjetas { min-width: 0; }
}

/* ── El «?» que explica (assets/ayuda.js, 15 de octubre de 2026, copiado del portal de Nodo) ── */
button.ayuda { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
 margin: -6px -4px -6px 1px; padding: 0; border: 0; background: none; cursor: help; vertical-align: middle;
 font: inherit; line-height: 1; }
button.ayuda::before { content: "?"; display: block; border-radius: 50%;
 font-weight: 700; text-align: center;
 letter-spacing: 0; text-transform: none; font-family: inherit; }
button.ayuda:hover::before, button.ayuda:focus-visible::before { background: var(--navy); color: #fff; }
#globo-ayuda { position: fixed; z-index: 1000; max-width: 340px; padding: 9px 12px; 
 color: #fff; font-size: 13px; line-height: 1.45; font-weight: 400; text-align: left;
 text-transform: none; letter-spacing: 0; white-space: normal; 
 pointer-events: none; display: none; }
th button.ayuda { margin-left: 0; }
/* La moneda de una cifra en su cajita de ancho fijo, para que MXN y USD dejen el último dígito en el… (+) */
.num .moneda { display: inline-block; width: 2.3em; text-align: left; margin-left: .3em; }

/* ARQUI · PROPUESTA DE MERCADOTECNIA (MID), 15 de octubre de 2026 (+) */

:root {
 /* La identidad de ADCO, sin cambios */
 --navy: #1a365d;
 --gold: #d4a012;
 --bg: #f1f5f9;
 --surface: #ffffff;
 /* Derivados del azul marino, en lugar del azul eléctrico de antes (#2563eb), (+) */
 --navy-light: #24508a; /* ligas y botón al pasar el ratón: 7.9 a 1 sobre blanco */
 --navy-deep: #0f2440; /* la banda de arriba, un punto más profunda */
 --navy-tint: #e8eef7; /* fondo de lo seleccionado */
 --gold-ink: #8a6200; /* el dorado cuando tiene que leerse como texto: 5.2 a 1 */
 --gold-tint: #fbf3dc;
 --border: #e3e8ef;
 --hairline: rgba(15, 36, 64, .08);
 --text: #16243a;
 --muted: #5b6b80; /* 5.3 a 1 sobre blanco, 4.9 sobre el fondo gris */
 --green: #15803d;
 --red: #c42020;
 --amber: #a16207;
 /* Una sola escala de esquinas para todo el sistema */
 --r-chico: 8px;
 --r: 12px;
 --r-grande: 16px;
 --sombra: 0 1px 2px rgba(15, 36, 64, .05), 0 1px 1px rgba(15, 36, 64, .03);
 --sombra-alta: 0 12px 32px -12px rgba(15, 36, 64, .28);
 --curva: cubic-bezier(.28, .11, .32, 1);
 --letra: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
 --alto-barra: 56px;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body {
 font-family: var(--letra); font-size: 14px; line-height: 1.45;
 letter-spacing: 0; color: var(--text); background: var(--bg);
 -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 0;
}
::selection { background: var(--gold-tint); color: var(--navy-deep); }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 6px; }
a { color: inherit; }
main { padding: 18px 24px 40px; max-width: 1280px; }

/* La barra de arriba (+) */
.nav { background: var(--navy-deep); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; }
.nav-interior { min-height: var(--alto-barra); padding: 0 24px; gap: 2px; }
.nav-brand {
 display: flex; align-items: center; gap: 0; padding: 0 16px 0 0; margin-right: 6px;
 font-size: 15px; font-weight: 650; letter-spacing: .14em; color: var(--gold);
 border-right: 1px solid rgba(255,255,255,.10);
}
.nav-logo { height: 20px; padding: 3px; border-radius: 6px; margin-right: 10px; }
.nav-link {
 font-size: 12.5px; font-weight: 500; letter-spacing: 0; line-height: 1.2;
 color: rgba(255,255,255,.66); padding: 0 10px; border-bottom: 0; position: relative;
 transition: color .2s var(--curva);
}
.nav-link:hover { color: #fff; }
.nav-link.active { color: #fff; }
.nav-link.active::after {
 content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px;
 background: var(--gold); border-radius: 3px 3px 0 0;
}
.nav-right { gap: 10px; }
.nav-right > span { color: rgba(255,255,255,.72) !important; }
.nav-right .salir-del-sistema {
 color: var(--gold) !important; font-weight: 600; padding: 4px 8px; border-radius: 999px; white-space: nowrap;
}
.nav-right .salir-del-sistema:hover { background: rgba(212,160,18,.14); }
@media (max-width: 1240px) {
  .nav-link { padding: 0 6px; font-size: 12px; } .nav-interior { padding: 0 10px; }
  .nav-brand { padding-right: 10px; margin-right: 4px; letter-spacing: .1em; }
  .nav-link.active::after { left: 6px; right: 6px; }
}

/* La etiqueta de ambiente: (+) */
.ambiente-marca {
 align-self: center; margin-left: 0; margin-right: 6px; padding: 4px 9px;
 border-radius: 6px; font-size: 9.5px; font-weight: 750; letter-spacing: .08em; line-height: 1.2;
}
.ambiente-pruebas .nav { background: #8a5a00; }
/* Sobre el café de pruebas, el blanco al 60% de hoy da 3.2 a 1: se sube a 88% (5.1 a 1) */
.ambiente-pruebas .nav-link { color: rgba(255,255,255,.88); }
.ambiente-pruebas .nav-right > span { color: #fff !important; }

/* ── Encabezado de cada pantalla: título grande, explicación de un renglón ── */
.page-title {
 font-size: 26px; line-height: 1.15; font-weight: 650; letter-spacing: -.025em; color: var(--navy-deep);
}
.page-subtitle { font-size: 13.5px; color: var(--muted); margin: 4px 0 16px; max-width: 80ch; }
.volver, .volver a { font-size: 13px; }
.volver a, a.volver { color: var(--navy-light); font-weight: 550; }

/* ── Tarjetas (paneles) ────────────────────────────────────────────────────── */
.panel {
 border-radius: var(--r-grande); padding: 16px 18px; margin-bottom: 12px;
 box-shadow: var(--sombra); border: 1px solid var(--hairline);
}
.panel-header { margin-bottom: 10px; gap: 12px; }
.panel-title { font-size: 15px; font-weight: 650; letter-spacing: -.01em; color: var(--navy-deep); }
.panel-badge {
 background: var(--bg); color: var(--muted); font-size: 11.5px; font-weight: 500;
 padding: 2px 9px; border-radius: 999px;
}
.grid-2 { gap: 12px; margin-bottom: 12px; }

/* Indicadores (KPIs, padrón, pagos) (+) */
.kpi-grid { gap: 12px; margin-bottom: 14px; }
.kpi-card {
 border-left: 0 !important; border-radius: var(--r-grande); padding: 14px 16px;
 box-shadow: var(--sombra); border: 1px solid var(--hairline); position: relative;
}
.kpi-label {
 font-size: 12px; font-weight: 550; color: var(--muted); text-transform: none; letter-spacing: 0;
}
.kpi-label::before {
 content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
 background: var(--navy); margin-right: 7px; vertical-align: 1px;
}
.kpi-card.gold .kpi-label::before { background: var(--gold); }
.kpi-card.green .kpi-label::before { background: var(--green); }
.kpi-card.red .kpi-label::before { background: var(--red); }
.kpi-value {
 font-size: 26px; font-weight: 650; letter-spacing: -.03em; line-height: 1.1; margin: 6px 0 2px;
 font-variant-numeric: tabular-nums;
}
.kpi-card.gold .kpi-value { color: var(--gold-ink); }
.kpi-delta { font-size: 12px; }

/* ── Tablas: densas y legibles ─────────────────────────────────────────────── */
table { font-size: 13px; }
th {
 font-size: 12px; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0;
 padding: 7px 10px; border-bottom: 1px solid var(--border); background: transparent;
}
td { padding: 7px 10px; border-bottom: 1px solid #edf1f6; line-height: 1.35; }
tr:hover td { background: #f7f9fc; }
td.num, th.num, .num { font-variant-numeric: tabular-nums; }
.num .moneda { color: var(--muted); font-size: .86em; font-weight: 500; }
.table-wrap table { min-width: 0; }
@media (min-width: 761px) { .table-wrap { margin: 0 -4px; } }

/* ── Insignias de estado ───────────────────────────────────────────────────── */
.badge {
 border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 600; letter-spacing: 0;
}
.badge-green { background: #e3f4e8; color: #136c34; }
.badge-red   { background: #fbe6e6; color: #a61b1b; }
.badge-amber { background: #fbf0d3; color: #7a4d06; }
.badge-blue  { background: var(--navy-tint); color: var(--navy); }
.badge-gray  { background: #eef1f5; color: #4b5a6e; }

/* ── Avisos ────────────────────────────────────────────────────────────────── */
.alert { border-radius: var(--r); padding: 10px 14px; }
.alert.warn   { background: var(--gold-tint); border-color: #efd68f; }
.alert.info   { background: var(--navy-tint); border-color: #c9d6ea; }
.alert.info .alert-title, .alert.info .alert-body { color: var(--navy); }
.alert-title { font-size: 13px; }
.alert-body { font-size: 13px; }
.error-msg { border-radius: var(--r); }

/* ── Filtros: en una línea, con el nombre del filtro chico y en minúsculas ── */
.filters { gap: 8px 10px; margin-bottom: 12px; align-items: flex-end; }
.filter-group { gap: 3px; }
.filter-group label { font-size: 11.5px; font-weight: 550; text-transform: none; letter-spacing: 0; }
select, input[type="text"], input[type="search"], input[type="number"], input[type="date"],
input[type="email"], input:not([type]) {
 font-family: var(--letra); font-size: 13px; height: 32px; padding: 5px 10px;
 border: 1px solid #d5dde8; border-radius: var(--r-chico); background-color: var(--surface);
 min-width: 120px; transition: border-color .2s var(--curva), box-shadow .2s var(--curva);
}
textarea { font-family: var(--letra); border-radius: var(--r-chico); }
select:focus, input:focus, textarea:focus {
 outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(26,54,93,.14);
}

/* ── Botones: píldoras, con UNA acción principal llena por pantalla ─────────── */
.btn {
 font-family: var(--letra); font-size: 13px; font-weight: 600; letter-spacing: -.005em;
 border-radius: 999px; padding: 7px 16px; min-height: 32px;
 transition: background .2s var(--curva), color .2s var(--curva), box-shadow .2s var(--curva);
}
.btn:hover { opacity: 1; }
.btn-primary { background: var(--navy); color: #fff; box-shadow: 0 1px 2px rgba(15,36,64,.25); }
.btn-primary:hover { background: var(--navy-light); }
.btn-secondary { background: var(--surface); color: var(--navy); border: 1px solid #cfd8e4; }
.btn-secondary:hover { background: var(--navy-tint); border-color: #b9c7da; }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }
.enlace { color: var(--navy-light) !important; text-decoration: none !important; font-weight: 550 !important; }
.enlace:hover { text-decoration: underline !important; text-underline-offset: 2px; }

/* ── Fichas: rejilla de datos más ancha y más baja ────────────────────────── */
.campos { gap: 10px 20px !important; }
@media (min-width: 900px) { .campos { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
.campo .que, .que-dato {
 font-size: 11.5px !important; font-weight: 550; text-transform: none !important;
 letter-spacing: 0 !important; color: var(--muted); margin-bottom: 2px !important;
}
.campo .valor { font-size: 14px; }
.grupo-rotulo, .comp-rotulo, .total-rotulo, .drawer-section-title, .comp-grupo-titulo {
 text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; font-weight: 600 !important;
}

/* ── Pestañas (Compras): el selector de Fibraplastic, con su pastilla blanca ── */
.pestanas, .tabs, nav.pestanas, .pestanas-compras {
 display: inline-flex !important; gap: 2px; padding: 3px; margin-bottom: 14px !important;
 background: rgba(15,36,64,.07); border-radius: 999px; border: 0 !important;
}
.pestanas a, .tabs a, .pestanas-compras a {
 border: 0 !important; border-radius: 999px; padding: 6px 16px !important; margin: 0 !important;
 font-size: 13px; font-weight: 550; color: var(--muted) !important;
}
.pestanas-compras a.activa, .pestanas a.activa, .pestanas a.active, .pestanas a[aria-current], .tabs a.active {
 background: var(--surface); color: var(--navy-deep) !important; box-shadow: 0 1px 4px rgba(15,36,64,.14);
}

/* ── El «?» de ayuda: más discreto hasta que se le busca ──────────────────── */
button.ayuda::before { background: #e6ebf2; color: #4b5a6e; width: 15px; height: 15px; line-height: 15px; font-size: 10.5px; }
#globo-ayuda { background: var(--navy-deep); border-radius: var(--r); box-shadow: var(--sombra-alta); }

/* ── Paginación y conversación ─────────────────────────────────────────────── */
.pg-btn, .pg-sel { border-radius: var(--r-chico); }
.pg-btn:hover:enabled { background: var(--navy); }
#chat-fab { width: 48px; height: 48px; background: var(--navy); box-shadow: var(--sombra-alta); }
#chat-pane { border-radius: var(--r-grande); box-shadow: var(--sombra-alta); }
#drawer { box-shadow: var(--sombra-alta); }

/* Inicio: la pieza memorable (+) */
.secciones { gap: 12px !important; margin-top: 14px !important; }
.seccion {
 border-left: 0 !important; border: 1px solid var(--hairline) !important; border-radius: var(--r-grande) !important;
 box-shadow: var(--sombra) !important; padding: 16px 18px !important; position: relative; overflow: hidden;
 transition: transform .35s var(--curva), box-shadow .35s var(--curva);
}
.seccion::after {
 content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
 background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--curva);
}
.seccion:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta) !important; }
.seccion:hover::after { transform: scaleX(1); }
.seccion .icono { font-size: 18px !important; line-height: 1; }
.seccion .titulo { font-size: 16px !important; font-weight: 650 !important; letter-spacing: -.015em; margin: 8px 0 3px !important; color: var(--navy-deep) !important; }
.seccion .que { font-size: 13px !important; line-height: 1.45 !important; }
@media (prefers-reduced-motion: reduce) { .seccion, .seccion::after { transition: none; } }

/* PANTALLAS PUNTUALES: lo que cada página trae escrito en su propio <style> y (+) */

/* Programación de pagos, la semana: (+) */
@media (min-width: 761px) {
  .tabla-semana col[style*="width:140px"] { width: 118px !important; }
  .tabla-semana col[style*="width:95px"] { width: 86px !important; }
  .tabla-semana td { font-size: 12.5px; }
}
/* Programación de pagos, la semana: los totales en una franja baja */
.totales { gap: 10px !important; }
.total { border-radius: var(--r) !important; padding: 8px 12px !important; }
.total-monto { font-size: 16px !important; letter-spacing: -.02em; }
.obra-titulo { font-size: 15px !important; font-weight: 650 !important; color: var(--navy-deep) !important; }
.tabla-semana td { padding-top: 6px; padding-bottom: 6px; }
.tabla-semana .marca { margin-top: 1px !important; }
.enlace[data-comentar] { margin-top: 1px !important; font-size: 12px !important; }
.estado-linea { margin: -10px 0 12px !important; }
.grupo + .grupo { margin-top: 10px !important; padding-top: 10px !important; }
.accion { min-height: 34px !important; border-radius: 999px !important; }

/* Quién entra: las nueve casillas en dos columnas, en vez de una torre de nueve */
@media (min-width: 761px) {
  .casillas-celda { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px !important; min-width: 300px !important; }
  .casillas-celda label { font-size: 12px !important; line-height: 1.25 !important; align-items: flex-start !important; }
  .casillas-celda input { margin-top: 1px !important; }
  .casillas-celda .solo-mira { grid-column: 1 / -1; }
  .tabla-gente td:nth-child(1) { min-width: 180px !important; }
  .tabla-gente th, .tabla-gente td { padding-left: 7px; padding-right: 7px; }
}

/* Partidas de la obra: renglones más bajos */
.partida, .arbol-fila, .fila-partida { padding-top: 4px !important; padding-bottom: 4px !important; }

/* TELÉFONO (+) */
@media (max-width: 768px) {
  main { padding: 12px 12px 96px; }
  .page-title { font-size: 22px; }
  .page-subtitle { font-size: 13px; margin-bottom: 12px; }
  .panel { padding: 12px 14px; border-radius: var(--r); }

  /* La barra de abajo: se desliza de lado, así TODAS las secciones se alcanzan. (+) */
  .nav-mobile {
 overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
 background: rgba(15,36,64,.94); backdrop-filter: saturate(160%) blur(14px);
 -webkit-backdrop-filter: saturate(160%) blur(14px);
 padding-bottom: env(safe-area-inset-bottom);
 }
  .nav-mobile::-webkit-scrollbar { display: none; }
  .nav-mobile a { flex: 0 0 auto; width: 76px; padding: 7px 4px 6px; font-size: 10.5px; line-height: 1.2; font-weight: 550; white-space: normal; text-align: center; }
  .nav-mobile a span.icon { font-size: 17px; }
  .nav-mobile a.active { color: #fff; box-shadow: inset 0 3px 0 var(--gold); }

  .barra-movil { padding: 6px 12px; }
  .ambiente-suelto { padding: 4px 12px; }

  /* Indicadores en franja: dos por renglón y bajos */
  .kpi-grid { gap: 8px; }
  .kpi-card { padding: 10px 12px; }
  .kpi-value { font-size: 20px; margin: 4px 0 0; }
  .kpi-delta { font-size: 11.5px; }

  /* Filtros: dos por renglón, a lo ancho */
  .filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .filters select, .filters input { width: 100%; min-width: 0; }

  /* Las tablas hechas tarjeta: (+) */
  /* Hoy hay TRES versiones del mismo molde (.tabla-tarjetas, .tabla-doc de Obras y (+) */
  :is(.tabla-doc, .tabla-compras) thead { display: none; }
  :is(.tabla-doc, .tabla-compras) tbody { display: block; }
  :is(.tabla-tarjetas, .tabla-doc, .tabla-compras) tr {
 display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px;
 padding: 10px 12px !important; margin-bottom: 8px !important; border-radius: var(--r) !important;
 border: 1px solid var(--hairline) !important; box-shadow: var(--sombra);
 }
  :is(.tabla-tarjetas, .tabla-doc, .tabla-compras) td {
 padding: 0 !important; text-align: left !important; min-width: 0; font-size: 13px; line-height: 1.3;
 overflow-wrap: anywhere; display: block !important; width: auto !important;
 }
  :is(.tabla-tarjetas, .tabla-doc, .tabla-compras) .badge { white-space: normal; }
  :is(.tabla-tarjetas, .tabla-doc, .tabla-compras) td::before {
 float: none !important; display: block; max-width: none !important; margin: 0 0 1px !important;
 font-size: 10.5px !important; font-weight: 550 !important; text-transform: none !important;
 letter-spacing: 0 !important; line-height: 1.3 !important;
 }
  :is(.tabla-tarjetas, .tabla-doc, .tabla-compras) td:first-child {
 grid-column: 1 / -1; font-size: 14.5px; font-weight: 650; color: var(--navy-deep);
 padding-bottom: 6px !important; border-bottom: 1px solid #edf1f6 !important;
 display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
 }
  :is(.tabla-tarjetas, .tabla-doc, .tabla-compras) td:first-child::before { display: inline; font-size: 11px !important; color: var(--muted); font-weight: 500 !important; }
  :is(.tabla-tarjetas, .tabla-doc, .tabla-compras) td.num { text-align: left !important; }
  /* La segunda celda casi siempre es el nombre (proveedor, razón social): (+) */
  :is(.tabla-tarjetas, .tabla-doc, .tabla-compras) td:nth-child(2), :is(.tabla-tarjetas, .tabla-doc, .tabla-compras) td.tarjeta-ancha { grid-column: span 2; }
  /* Las celdas que llevan botones o mucho texto van a lo ancho */
  :is(.tabla-tarjetas, .tabla-doc, .tabla-compras) td:has(button.btn, .btn, select, textarea, .decidir, .acciones-renglon) { grid-column: 1 / -1; }
  :is(.tabla-tarjetas, .tabla-doc, .tabla-compras) td:has(.avisos-celda:only-child) { display: block !important; }
  :is(.tabla-tarjetas, .tabla-doc, .tabla-compras) td[colspan] { grid-column: 1 / -1; }

  /* En tarjeta, el dinero puede bajar su moneda al renglón de abajo antes que encimarse */
  :is(.tabla-tarjetas, .tabla-doc, .tabla-compras) td.num { white-space: normal !important; }
  :is(.tabla-tarjetas, .tabla-doc, .tabla-compras) .num .moneda { width: auto; }

  /* Totales y saldos: como un recibo, el nombre a la izquierda y la cifra a la derecha */
  .saldo-grid, .totales { display: block !important; background: var(--bg); border-radius: var(--r); padding: 4px 12px; }
  .saldo-dato, .total {
 display: flex !important; justify-content: space-between; align-items: baseline; gap: 10px;
 background: none !important; padding: 7px 0 !important; border-radius: 0 !important;
 border-bottom: 1px solid #e3e8ef;
 }
  .saldo-dato:last-child, .total:last-child { border-bottom: 0; }
  .saldo-dato .cuanto, .total .total-monto { font-size: 15px !important; text-align: right; margin: 0 !important; }
  .saldo-dato .que { text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; }

  /* Inicio: los mosaicos de dos en dos */
  .secciones { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .seccion { padding: 12px !important; }
  .seccion .titulo { font-size: 14.5px !important; margin-top: 6px !important; }
  .seccion .que { font-size: 12px !important; }
  .btn { white-space: nowrap; }

  /* Fichas: dos datos por renglón */
  .campos { grid-template-columns: 1fr 1fr !important; gap: 8px 14px !important; }
  .campo.ancho { grid-column: 1 / -1; }
}

/* Padrón: los cuatro números, como los indicadores, sin raya lateral y más bajos */
.resumen { gap: 10px !important; margin: 12px 0 !important; }
.dato {
 border-left: 0 !important; border: 1px solid var(--hairline); border-radius: var(--r-grande) !important;
 padding: 12px 16px !important; box-shadow: var(--sombra) !important;
}
.dato .que { font-size: 12px !important; font-weight: 550; text-transform: none !important; letter-spacing: 0 !important; color: var(--muted); }
.dato .que::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--navy); margin-right: 7px; vertical-align: 1px; }
.dato.verde .que::before { background: var(--green); }
.dato.gris .que::before { background: #94a3b8; }
.dato.ambar .que::before { background: var(--gold); }
.dato.roja .que::before { background: var(--red); }
.dato .cuanto { font-size: 24px !important; font-weight: 650 !important; letter-spacing: -.03em; line-height: 1.15; margin-top: 2px; }
@media (max-width: 768px) {
  .resumen { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; }
  .dato { padding: 8px 8px !important; border-radius: var(--r) !important; }
  .dato .que { font-size: 10.5px !important; line-height: 1.2; }
  .dato .que::before { display: none; }
  .dato .cuanto { font-size: 18px !important; }
}

/* La conversación: los puntos que esperan respuesta suben y bajan suave, sin rebote */
@keyframes chat-bounce { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-3px); opacity: 1; } }
.chat-dots span { animation-timing-function: var(--curva) !important; }

/* ── Secciones plegables (lo que se consulta poco) y paneles lado a lado ──── */
.plegada > :not(.plegable-cabeza):not(.panel-header) { display: none !important; }
.plegada { padding-top: 12px !important; padding-bottom: 12px !important; }
.plegada > .plegable-cabeza, .plegada > .panel-header { margin-bottom: 0 !important; }
.plegable-cabeza { display: flex; align-items: center; gap: 10px; }
.plegar-boton {
 margin-left: auto; font: 600 12.5px var(--letra); color: var(--navy); background: var(--navy-tint);
 border: 0; border-radius: 999px; padding: 4px 12px; cursor: pointer;
}
.plegar-boton:hover { background: #d9e3f1; }
.plegable-cabeza { cursor: pointer; }
.plegada > .plegable-cabeza:hover .panel-title { text-decoration: underline; text-underline-offset: 3px; }
/* El alta plegada: botón de acción lleno, que se reconoce como botón sin pasar el cursor encima. */
.plegar-boton.primario { background: var(--navy); color: #fff; font-size: 14px; padding: 8px 16px; }
.plegar-boton.primario:hover { background: var(--navy-deep); }
.lado-a-lado { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; margin-bottom: 12px; }
.lado-a-lado > .panel { margin-bottom: 0; height: 100%; }
@media (max-width: 760px) { .lado-a-lado { grid-template-columns: 1fr; gap: 8px; } }

/* Documento de compra: las pestañas no empujan a "Volver" a su lado */
.pestanas-compras { display: flex !important; width: fit-content; }
/* Los mensajes de "todavía no hay" no necesitan medio panel de aire */
.loading, div.vacio, p.vacio, td.vacio { padding: 16px !important; }
span.vacio, em.vacio { padding: 0 !important; }
/* Programación: "Escribir un comentario" pegado al nombre del proveedor */
@media (min-width: 761px) { .enlace[data-comentar] { display: inline !important; margin-left: 6px; } }