/* ═══════════════════════════════════════════════════════════════
   components.css — Componentes (NFR-2)
   ───────────────────────────────────────────────────────────────
   Botones, tarjetas, campos y avisos construidos con los tokens
   oficiales de IELCO. El botón principal replica el componente de
   la marca: píldora, mayúsculas, azul institucional.

   Incluye la degradación elegante para equipos de gama baja (R4).
   ═══════════════════════════════════════════════════════════════ */

/* ── Superficie de cristal ──
   El fondo es casi opaco (0.92) para que el contraste del texto sea
   verificable y no dependa del degradado que quede detrás. */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow);
}

/* El desenfoque solo se aplica si el equipo puede con el coste de GPU.
   La clase .no-glass la añade app.js tras la prueba de capacidad (R4). */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  html:not(.no-glass) .glass {
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
    background: var(--glass-bg-soft);
  }
}

/* Modo degradado: fondo opaco, contraste garantizado, cero GPU */
html.no-glass .glass {
  background: #FFFFFF;
  border-color: var(--c-line);
}
html.no-glass body { background-image: none; }

/* ── Tarjetas ── */
.card {
  padding: var(--s-6);
  margin-bottom: var(--s-4);
}
.card__title { font-size: var(--t-xl); margin-bottom: var(--s-2); }
.card p:last-child { margin-bottom: 0; }

.card--link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card--link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(20, 49, 95, 0.14);
  color: inherit;
}
.card--link h2 { font-size: var(--t-lg); margin-bottom: var(--s-2); }

.linkish {
  display: inline-block;
  margin-top: var(--s-3);
  font-weight: var(--weight-bold);
  color: var(--c-brand-500);
}

/* ── Rejillas ── */
.grid { display: grid; gap: var(--s-4); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ═══════════ BOTONES ═══════════
   Componente oficial de la marca: píldora, mayúsculas, peso 700.
   Se conserva el alto mínimo de 48px para que sigan siendo cómodos
   al tacto en celular, aunque la marca especifique menos relleno. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-4) var(--s-8);      /* 16px 32px */
  font-family: var(--font);
  font-size: var(--t-sm);              /* 14px, según la marca */
  font-weight: var(--weight-bold);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--r-pill);        /* 30px, píldora de la marca */
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

/* Botón principal: azul institucional */
.btn--primary {
  background-color: var(--c-brand-800);
  color: #FFFFFF;
  border-color: var(--c-brand-800);
}
.btn--primary:hover {
  background-color: var(--c-brand-700);
  border-color: var(--c-brand-700);
  color: #FFFFFF;
}

/* Botón secundario: contorno azul sobre blanco */
.btn--ghost {
  background-color: #FFFFFF;
  color: var(--c-brand-800);
  border-color: var(--c-brand-300);
}
.btn--ghost:hover {
  background-color: var(--c-brand-050);
  border-color: var(--c-brand-800);
  color: var(--c-brand-700);
}

.btn--danger {
  background-color: #FFFFFF;
  color: var(--c-danger-800);
  border-color: var(--c-danger-800);
}
.btn--danger:hover { background-color: var(--c-danger-100); }

/* WhatsApp: verde de la aplicación, no de la marca, porque es lo que
   la emprendedora reconoce en su teléfono. */
.btn--wa {
  background-color: #1A6B3C;
  color: #FFFFFF;
  border-color: #1A6B3C;
}
.btn--wa:hover { background-color: #14532D; border-color: #14532D; color: #FFFFFF; }

.btn--block { display: flex; width: 100%; }

/* Botón chico, para acciones dentro de una cabecera o de una fila.
   ESTABA EN `captura.css`, Y EL PANEL LO USABA SIN CARGAR ESA HOJA: su botón
   «Salir» se dibujaba con los 48 px del botón normal en lugar de los 32 de
   este. Aquí lo tienen las dos páginas, que es donde corresponde — no es un
   estilo del formulario de captura, es una variante del botón. */
.btn--mini { min-height: 32px; padding: var(--s-1) var(--s-3); font-size: var(--t-xs); }


/* ═══════════ Lo que solo ve el equipo de IELCO ═══════════

   `app.js` pone la clase `es-equipo` en <html> cuando encuentra una sesión del
   equipo abierta. Con eso, la misma página muestra dos cosas distintas: el
   público ve la plataforma, y el equipo ve además su auditoría.

   POR DEFECTO ESTÁ OCULTO, y ese es el orden correcto: si el JavaScript no
   llega a ejecutarse —un archivo viejo en caché, un error de arranque— lo que
   queda es la versión pública. Falla cerrado.

   No es una frontera de seguridad: las comprobaciones corren en el navegador y
   miden lo que ya es público. Lo que evita es que la plataforma PRESENTE sus
   resultados de auditoría a cualquiera que entre a mirarla. */
.solo-equipo { display: none; }
html.es-equipo .solo-equipo { display: block; }

html.es-equipo .solo-publico { display: none; }

.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

/* ── Campos ── */
.field { display: flex; flex-direction: column; gap: var(--s-1); margin-bottom: var(--s-4); }
.field label {
  font-weight: var(--weight-bold);
  font-size: var(--t-sm);
  color: var(--c-ink-900);
}
.field--grow { flex: 1 1 240px; }

input[type="text"], input[type="search"], input[type="number"], input[type="tel"],
input[type="url"], input[type="email"], input[type="password"], select, textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--s-3);
  font-family: var(--font);
  font-size: 1rem;                  /* ≥16px evita el zoom automático en iOS */
  font-weight: var(--weight-normal);
  color: var(--c-ink-900);
  background: #FFFFFF;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
textarea { min-height: 110px; resize: vertical; line-height: 1.55; }

input:hover, select:hover, textarea:hover { border-color: var(--c-brand-300); }
input:focus, select:focus, textarea:focus {
  border-color: var(--c-brand-800);
  box-shadow: 0 0 0 3px rgba(32, 75, 151, 0.14);
  outline: none;
}
input:focus-visible, select:focus-visible, textarea:focus-visible,
a:focus-visible, button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ── Insignias ── */
.badge {
  display: inline-block;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  background: var(--c-surface-alt);
  color: var(--c-ink-700);
  border: 1px solid var(--c-line);
}
.badge--ok   { background: var(--c-ok-100);   color: var(--c-ok-900);   border-color: var(--c-ok-700); }
.badge--warn { background: var(--c-warn-100); color: var(--c-warn-900); border-color: var(--c-warn-700); }
.badge--off  { background: #EEF0F2;           color: var(--c-ink-500);  border-color: var(--c-line-strong); }

/* ── Avisos ── */
.callout {
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  border-left: 5px solid;
  font-size: var(--t-sm);
  line-height: 1.55;
}
.callout--info { background: var(--c-brand-050); border-color: var(--c-brand-600); color: var(--c-ink-900); }
.callout--ok   { background: var(--c-ok-100);    border-color: var(--c-ok-700);    color: var(--c-ok-900); }
.callout--warn { background: var(--c-warn-100);  border-color: var(--c-warn-700);  color: var(--c-warn-900); }

/* ── Indicadores ── */
.kpi {
  padding: var(--s-5);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.kpi__num {
  font-size: var(--t-2xl);
  font-weight: var(--weight-bold);
  color: var(--c-brand-800);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.kpi__label { font-size: var(--t-xs); color: var(--c-ink-500); line-height: 1.4; }

/* ── Tablas ── */
.tablewrap { overflow-x: auto; border-radius: var(--r-md); }
.table {
  width: 100%;
  border-collapse: collapse;
  background: #FFFFFF;
  font-size: var(--t-sm);
  min-width: 520px;
}
.table th, .table td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
}
.table thead th {
  background: var(--c-brand-050);
  color: var(--c-brand-900);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  font-weight: var(--weight-bold);
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--c-surface-alt); }

/* ── Código ── */
.code {
  background: #14315F;
  color: #DCE6F7;
  padding: var(--s-5);
  border-radius: var(--r-md);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  line-height: 1.65;
  margin: 0;
}

/* ── Aviso flotante ── */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--s-6);
  transform: translateX(-50%);
  z-index: 200;
  max-width: min(92vw, 460px);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-md);
  background: var(--c-brand-900);
  color: #FFFFFF;
  font-size: var(--t-sm);
  font-weight: var(--weight-bold);
  box-shadow: 0 8px 28px rgba(20, 49, 95, 0.32);
  text-align: center;
}
.toast[hidden] { display: none; }

/* ── Marca institucional ──
   El logo es azul oscuro (#184890), así que necesita fondo claro.
   Se le da una caja blanca con el mismo radio de los demás componentes. */
.brand__mark {
  display: grid;
  place-items: center;
  height: var(--logo-height);
  width: var(--logo-height);
  padding: 5px;
  border-radius: var(--r-md);
  background: #FFFFFF;
  border: 1px solid var(--c-line);
  flex: none;
}
.brand__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}