/* ── Variables ADCO ── */
:root {
  --navy: #1a365d;
  --navy-light: #2563eb;
  --gold: #d4a012;
  --bg: #f1f5f9;
  --surface: #ffffff;
  --border: #e2e8f0;
  --text: #1e293b;
  --muted: #64748b;
  --green: #16a34a;
  --red: #dc2626;
  --amber: #ca8a04;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }
a { color: inherit; text-decoration: none; }

/* ── Nav desktop ── */
/* La banda navy va de orilla a orilla, que es lo que se ve bien, pero LO QUE
 * LLEVA ADENTRO se alinea con el contenido de la página. Antes la barra era el
 * contenedor y repartía a sus hijos de extremo a extremo: la marca quedaba
 * pegada al filo izquierdo y el nombre al derecho, mientras todo lo de abajo iba
 * centrado en 1280. Los dos jamás se alineaban, y eso es lo que se veía ancho y
 * desbalanceado. Medido el 27 de agosto de 2026. */
.nav {
  background: var(--navy);
  position: sticky; top: 0; z-index: 100;
}
.nav-interior {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: stretch;
}
.nav-brand { color: var(--gold); font-weight: 700; font-size: 16px; padding: 14px 20px 14px 0; border-right: 1px solid rgba(255,255,255,.1); margin-right: 8px; letter-spacing: .5px; }
.nav-link { color: rgba(255,255,255,.6); font-size: 13px; padding: 0 16px; display: flex; align-items: center; border-bottom: 3px solid transparent; cursor: pointer; transition: color .15s; }
.nav-link:hover { color: #fff; }
.nav-link.active { color: #fff; border-bottom-color: var(--gold); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.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 { padding: 24px; max-width: 1280px; margin: 0 auto; }
.page-title { font-size: 20px; font-weight: 700; color: var(--navy); }
.page-subtitle { font-size: 13px; color: var(--muted); margin-top: 2px; margin-bottom: 20px; }

/* ── KPI Grid ── */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.kpi-card { background: var(--surface); border-radius: 10px; padding: 18px 20px; border-left: 4px solid var(--navy); box-shadow: 0 1px 3px rgba(0,0,0,.07); }
.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-label { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.kpi-value { font-size: 28px; font-weight: 700; color: var(--navy); margin: 6px 0 4px; }
.kpi-card.gold .kpi-value  { color: #92400e; }
.kpi-card.green .kpi-value { color: #15803d; }
.kpi-card.red .kpi-value   { color: var(--red); }
.kpi-delta { font-size: 12px; color: var(--muted); }
.up   { color: var(--green); font-weight: 600; }
.down { color: var(--red);   font-weight: 600; }

/* ── Panel ── */
.panel { background: var(--surface); border-radius: 10px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.07); margin-bottom: 16px; }
.panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.panel-title { font-size: 13px; font-weight: 700; color: var(--navy); }
.panel-badge { background: var(--bg); color: var(--muted); font-size: 11px; padding: 2px 8px; border-radius: 10px; }

/* ── Grid 2 columnas ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }

/* ── Tabla ── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; padding: 8px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); border-bottom: 2px solid var(--border); white-space: nowrap; }
td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
/* La lista del padrón lleva seis columnas y una de ellas dice frases, así que
 * con el relleno de siempre se salía de su caja. Se aprieta SOLO aquí, y jamás
 * en la regla global, que la comparten los otros cuatro tableros. */
.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
 * empujar la tabla fuera de su caja. Medido: sin esto el mínimo irreducible de
 * la tabla daba 1,191 px contra 1,192 de caja, o sea cero de holgura, y
 * cualquier correo un poco más largo la habría desbordado otra vez.
 *
 * 🔴 VA SOLO EN LAS DOS COLUMNAS QUE LO NECESITAN, la razón social y el correo,
 * y jamás en todas. Puesto en todas, el navegador les quitaba ancho a las
 * cortas y partía sus palabras: "materiales" salía como "materia les". Se vio
 * mirando la pantalla, y jamás midiendo, porque el ancho daba perfecto.
 *
 * Y las columnas cortas se declaran enteras a propósito, para que ninguna
 * repartición futura las vuelva a partir. */
/* 🔴 ESTA REGLA APUNTABA A DOS COLUMNAS QUE JAMÁS LA NECESITAN, y se vio
   mirando el padrón en el teléfono el 31 de agosto de 2026: partía "materiales"
   como "mat / erial / es", a media palabra y en tres renglones.
   El comentario de arriba dice "la razón social y el correo", y eso era cierto
   cuando se escribió. Después la tabla ganó al principio la casilla de marcar,
   así que todas las columnas se recorrieron una: la 1 dejó de ser la razón
   social y pasó a ser la casilla, y la 4 dejó de ser el correo y pasó a ser el
   Tipo. La regla se quedó apuntando a los números viejos.
   Se retira en vez de recorrerla, porque las dos columnas que de verdad la
   necesitan YA la tienen en padron/index.html, que es donde vive el resto del
   diseño de esta tabla: la razón social con overflow-wrap y el correo con
   word-break.
   ⚠️ LA LECCIÓN: una regla que selecciona columnas POR SU NÚMERO se desincroniza
   sola en cuanto la tabla gana o pierde una columna, y jamás avisa. Se ve
   correcta en el código y apunta a otro lado. */
.tabla-apretada td:nth-child(4) { white-space: nowrap; }
/* 🔴 LA COLUMNA 2 SALIO DE AQUI EL 31 DE AGOSTO DE 2026. Lo cachó Jorge viendo
   la pantalla: "la parte de razón social se encima y se rompe". Medido contra
   producción, se salía 484 píxeles de su celda.
   LA CAUSA ERA ESTE RENGLÓN, y jamás la pantalla del padrón: allá se le puso
   word-break a esa misma columna, y word-break JAMÁS puede ganarle a un
   white-space:nowrap. Con nowrap puesto, ninguna regla de partir palabras
   aplica, así que el arreglo de allá llevaba semanas siendo inerte.
   La 3 se queda con nowrap a propósito: un RFC partido en dos renglones deja de
   poder leerse de un vistazo, y jamás pasa de trece caracteres. */
.tabla-apretada td:nth-child(3) { white-space: nowrap; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg); }
.row-clickable { cursor: pointer; }

/* ── Badges ── */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.badge-green  { background: #dcfce7; color: #15803d; }
.badge-red    { background: #fee2e2; color: var(--red); }
.badge-amber  { background: #fef9c3; color: #854d0e; }
.badge-blue   { background: #dbeafe; color: #1e40af; }
.badge-gray   { background: var(--bg); color: var(--muted); }

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

/* ── Filtros ── */
.filters { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; align-items: flex-end; }
.filter-group { display: flex; flex-direction: column; gap: 4px; }
.filter-group label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; }
/* 🔴 EL CAMPO SIN type TAMBIÉN CUENTA. Un <input> sin atributo type es de texto
 * para el navegador, pero jamás casaba con input[type="text"], así que los
 * buscadores de proveedor y de obra salían sin borde ni relleno y se veían más
 * chicos que los demás, con su etiqueta corrida. Lo cachó Gustavo el 19 de
 * septiembre de 2026 mirando los filtros de Compras. */
select, input[type="text"], input[type="search"], input[type="number"],
input[type="date"], input:not([type]) {
  border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px;
  font-size: 13px; background: var(--surface); color: var(--text);
  min-width: 140px;
  /* 🔴 LA MISMA ALTURA EN LOS DOS: un <select> trae su propia altura de renglón
   * y quedaba dos píxeles más alto que un campo de texto, con los renglones de
   * filtros desalineados entre sí. Con box-sizing y una altura declarada, los
   * dos miden igual. Medido el 19 de septiembre de 2026 en los filtros de
   * Compras, que es donde se ven uno al lado del otro. */
  box-sizing: border-box; height: 34px; line-height: 1.25;
}
textarea { box-sizing: border-box; }
select:focus, input:focus { outline: 2px solid var(--navy-light); outline-offset: 1px; }
.btn {
  padding: 7px 16px; border-radius: 6px; border: none; font-size: 13px;
  font-weight: 600; cursor: pointer; transition: opacity .15s;
}
.btn:hover { opacity: .85; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-secondary { background: var(--bg); color: var(--text); border: 1px solid var(--border); }

/* ── Loading ── */
.loading { text-align: center; padding: 40px; color: var(--muted); font-size: 14px; }
.error-msg { background: #fee2e2; border: 1px solid #fca5a5; border-radius: 8px; 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;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--navy); color: #fff; border: none; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  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); border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  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; }
@keyframes chat-bounce { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }

#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; box-shadow: -4px 0 24px rgba(0,0,0,.18);
  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 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; 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; background: var(--navy);
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
    box-shadow: 0 -2px 8px rgba(0,0,0,.2);
  }
  .nav-mobile a { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 8px 4px; font-size: 10px; color: rgba(255,255,255,.6); gap: 2px; }
  .nav-mobile a.active { color: var(--gold); }
  .nav-mobile a span.icon { font-size: 18px; }
  /* 🔴 EL HUECO DE ABAJO ALCANZA PARA LA BARRA Y PARA EL BOTÓN DEL CHAT. Con 72
   * píxeles, el botón redondo del chat se estacionaba encima del último renglón
   * y tapaba un monto en Pagos, un importe en CFDIs y las últimas barras de la
   * gráfica en KPIs. El botón ocupa de 76 a 122 contados desde abajo, así que el
   * hueco tiene que pasar de ahí. Medido el 21 de septiembre de 2026. */
  main { padding: 16px; padding-bottom: 140px; }
  /* ⚠️ Y LOS HIJOS DE UNA REJA LLEVAN min-width: 0. Sin eso su ancho mínimo es
   * el de su contenido, así que una tarjeta se sale de su columna aunque la
   * columna mida 1fr: cfdis se desbordaba 6 píxeles por esto. */
  .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; }
  .kpi-value { font-size: 22px; }
  #drawer { width: 100vw; }
}


/* ---------------------------------------------------------------------------
 * LA BARRA DEL PADRÓN EN PANTALLA CHICA
 *
 * 🔴 Vive aquí y jamás en cada página, que es donde estaban sus reglas: son
 * TRES pantallas con la misma barra, y una regla escrita tres veces se
 * desincroniza a la primera corrección. Se midió el 26 de agosto de 2026: con
 * la barra de quién está adentro, en 390 píxeles se desbordaba 52 a lo ancho,
 * y le pasaba igual a las tres.
 *
 * En pantalla chica la barra se parte en renglones en vez de empujar, y el
 * letrero del ambiente se calla: ocupa la mitad del ancho y lo que dice ya se
 * sabe por dónde se entró.
 * ------------------------------------------------------------------------- */
@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);
  }
}

/* Una tabla apretada se lee peor que una que se recorre: con este ancho
 * mínimo, la caja que la envuelve la desliza en vez de partir cada palabra en
 * su propio renglón. */
.table-wrap table { min-width: 620px; }

/* ---------------------------------------------------------------------------
 * LA PUERTA. Vive aquí para que la raíz y /padron/entrar.html la pinten igual.
 * Antes estaba escrita dentro de entrar.html, y la raíz se limitaba a mandar
 * ahí, lo que convertía la dirección tecleada en .../padron/entrar.html.
 * --------------------------------------------------------------------------- */
.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. La regla decia
   input[type=email], asi que el campo de la clave se quedaba con el tamaño de
   fabrica del navegador: angosto y perdido en medio de la tarjeta. Lo cacho
   Gustavo el 29 de agosto de 2026, "ridiculamente pequeño". */
.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: en monoespaciado se distingue el cero de
   la o, y con letra mas chica cabe lo suficiente para reconocerla de un vistazo. */
.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 ─────────────────────────────────────────────────
 *
 * 🔴 SE VE EN TODO MOMENTO, y esa es toda su razón de ser. Con los correos
 * saliendo a las cuentas de verdad en los dos ambientes, confundirlos cuesta
 * invitaciones reales mandadas desde pruebas, y un correo enviado jamás se
 * recoge. Por eso la banda entera cambia de color: leer una pastilla chica pide
 * fijarse, y cambiar el color de lo que se ve de reojo jamás lo pide.
 */
.ambiente-marca {
  display: inline-flex; align-items: center; margin-left: 14px;
  padding: 3px 10px; border-radius: 4px;
  font-size: 10px; font-weight: 800; letter-spacing: .6px;
  /* Dos renglones, con el salto que pone el guion. La caja se queda angosta y
     el texto centrado, para que se lea como una placa y jamás como una frase
     suelta a media barra. */
  white-space: pre-line; text-align: center; line-height: 1.15; 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
   suelta se guarda. En celular la barra de arriba se esconde, y entonces esta
   banda es lo ÚNICO que dice en qué ambiente está parado quien mira. */
.ambiente-suelto.solo-movil { display: none; }

/* La barra de arriba en celular: quién está adentro y por dónde salir. Va con
   los mismos colores de la barra de escritorio, para que se lea como la misma
   cosa y jamás como un aviso aparte. */
.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; }
/* Y la banda entera se aclara, para que se note de reojo desde cualquier
   pantalla, sin tener que leer nada. */
.ambiente-pruebas .nav { background: #8a5a00; }
.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 ──────────────────────────────────────────
 *
 * 🔴 VA AL FINAL DEL ARCHIVO A PROPOSITO. La primera version puso estas reglas
 * en el bloque de celular de mas arriba, y los "display: none" que las apagan
 * viven despues, asi que ganaban por orden y la banda seguia invisible. Con la
 * misma especificidad manda la ultima, y eso se ve leyendo el archivo entero y
 * jamas mirando la regla sola. Medido el 29 de agosto de 2026.
 *
 * Que existan: la barra de arriba se esconde debajo de 768 pixeles, y con ella
 * se iba la etiqueta de ambiente y el unico modo de cerrar la sesion. */
@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;
    padding: 8px 16px; 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: medido, 2.4 a 1, y el minimo
     para texto chico es 4.5. Sobre el azul de produccion aguanta, y aqui va
     blanco. Es la misma leccion del dorado sobre fondo claro. */
  .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.
 *
 * 🔴 DE DONDE SALE: lo pidió Jorge el 31 de agosto de 2026, viendo la pantalla.
 * Textual suyo: "las cards, que en vez de ser informativos también funcione
 * como botones", y de las alertas, "no me mandan a dónde lo puedo arreglar".
 * Un recuadro que lleva a otro lado y se ve idéntico a uno que jamás lleva a
 * nada es una capacidad escondida, o sea una capacidad que no existe. */
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
 * 31 de agosto de 2026: "podría poner un cursor-pointer o un icono '>' en la
 * parte derecha y quitar el texto 'ver esas requisiciones', ya que el texto es
 * más grande que la información de las cards". Tenía razón medido: el renglón
 * "Ver las que faltan por capturar ›" es más largo que el dato que la tarjeta
 * existe para enseñar, así que la invitación pesaba más que la noticia.
 *
 * La flecha dice lo mismo sin robarle renglón al contenido, y va centrada a la
 * derecha, que es donde Jorge lo pidió. El padding-right le aparta su lugar,
 * para que el texto de la tarjeta jamás le pase por debajo.
 *
 * ⚠️ El cursor de mano ya salía solo, porque estas tarjetas son etiquetas de
 * enlace con destino y el navegador se lo pone de fábrica. Se escribe de todas
 * formas, que cuesta cero y deja el comportamiento dicho en vez de heredado. */
a.llevable::after {
  content: '\203A';                       /* › */
  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.
 *
 * 🔴 LO PIDIO JORGE el 31 de agosto de 2026: "sería exactamente el logo, es como
 * veo que tiene un hexágono acá, pasarle nada más el hexágono". Sustituye al
 * glifo ⬡ que se usaba de sustituto.
 *
 * 🔴 VA SOBRE UNA PASTILLA BLANCA, Y JAMAS SUELTO SOBRE LA BARRA. Medido ese
 * mismo dia: el azul del logo es #0a1630 y la barra es #1a365d, o sea que el
 * logo es MAS OSCURO que su fondo y suelto se pierde; lo unico que lo sostenia
 * eran sus lineas blancas. La pastilla conserva los colores de ADCO tal cual,
 * que es lo correcto con la marca de un cliente. La alternativa seria una
 * version del logo para fondo oscuro, y esa la tiene que dar ADCO. */
.nav-logo { height: 22px; width: auto; vertical-align: middle; margin-right: 9px;
            background: #fff; border-radius: 5px; padding: 3px 4px; 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.
 *
 * 🔴 SE REPARTE A LO LARGO CON space-between, y lo pidió Jorge el 31 de agosto
 * de 2026: "podría poner flex-between en esta sección para que quede a lo largo
 * y no esté agrupado en la esquina". Antes el reparto lo hacía un flex:1 1 auto
 * en la cuenta, que estira la cuenta y empuja las flechas y el selector JUNTOS
 * contra el borde derecho. Con space-between los tres quedan repartidos: la
 * cuenta a la izquierda, las flechas al centro y el selector a la derecha. */
.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); border-radius:6px; font-size:15px;
          font-weight:700; cursor:pointer; line-height:1; }
.pg-btn:hover:enabled { background:var(--navy); 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);
          border-radius:6px; 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
 *
 * 🔴 EL TRUCO ES QUE CADA <td> LLEVA data-etiqueta CON SU ENCABEZADO, y en
 * pantalla chica ese atributo se pinta con ::before delante del valor. Así el
 * renglón se lee "Folio: PO-1097-001" en vez de una columna sin nombre. Sin
 * eso, aplanar una tabla a bloques deja los números sueltos y sin decir qué son.
 *
 * 🔴 VIVÍA ESCRITO ADENTRO DE compras/index.html Y DE obras/index.html, POR ESO
 * LAS DEMÁS PANTALLAS JAMÁS LO HEREDARON: el padrón, quién entra, pagos y CFDIs
 * seguían siendo tablas que se arrastran de lado en el celular, y lo que se
 * quedaba fuera de la vista era justo lo que importa. Medido el 21 de septiembre
 * de 2026: en Quién entra la columna del rol salía cortada a media palabra
 * ("Ac", "So", "Au") en una pantalla cuyo subtítulo promete decir qué puede
 * hacer cada una. Subido aquí ese mismo día, por decisión de Gustavo.
 *
 * Para usarla: la tabla lleva class="tabla-tarjetas" y cada <td> su
 * data-etiqueta. Un <td> sin data-etiqueta se pinta sin rótulo, que es lo que
 * quieren las celdas de sólo un botón.
 * ========================================================================== */
@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; overflow: hidden; }
  .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. Varias columnas traen un
   * max-width con puntos suspensivos para que la tabla quepa a lo ancho, y en
   * modo tarjetas eso deja de tener sentido: el valor tiene el renglón entero.
   * Sin esto, el proveedor salía cortado a media palabra dentro de su tarjeta.
   * Medido el 21 de septiembre de 2026. */
  .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
   * valor quede a la altura de su rótulo. Con el rótulo flotando, una etiqueta
   * larga se parte en dos renglones y el valor se queda arriba, así que las dos
   * casillas seguidas se leían encabalgadas. El flotado se conserva donde hace
   * falta, que es la celda hecha de varios pedazos, como el nombre con su nota. */
  .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. La regla
   * general '.table-wrap table { min-width: 620px }' existe para que una tabla
   * de verdad se pueda arrastrar de lado en el celular, y aquí sobra: en modo
   * tarjetas cada renglón se apila y jamás hay nada que arrastrar. Sin esta
   * línea, la tabla se volvía tarjetas de 620 píxeles dentro de una pantalla de
   * 390, así que seguía desbordándose 298 píxeles. Medido el 21 de septiembre
   * de 2026. */
  .table-wrap .tabla-tarjetas { min-width: 0; }
}