/* flowww Diagnostics Tool — sin dependencias, sin build.
 *
 * Colores y tipografía tomados del BRANDBOOK 2024 de flowww:
 *   Pantone Violet C   #3C1A75   violeta oscuro
 *   Pantone 2725 C     #6E5EE0   violeta, color principal
 *   Pantone 7479 C     #03E196   verde menta, acento
 *   Pantone Black C    #2D2926   negro corporativo
 *   Fondo de página    #EDEDED   gris claro del propio brandbook
 *   Degradado firma    menta → violeta
 *   Tipografía         DM Sans (Regular/Medium), con Arial como respaldo base
 *
 * Dos decisiones que se salen del brandbook, y por qué:
 *
 * 1. DM Sans va SERVIDA DESDE ESTE REPO (assets/fonts/), no desde Google Fonts. Esta
 *    herramienta se abre justo cuando la red del usuario va mal o hay un proxy
 *    corporativo filtrando, que es lo que venimos a diagnosticar: una petición a
 *    fonts.googleapis.com podría dejar la página sin tipografía o colgada. Es la fuente
 *    variable oficial (SIL Open Font License), 55 KB entre los dos subconjuntos.
 *
 * 2. Juana Serif no se usa. Es la tipografía de acento del brandbook, pero no está
 *    disponible libremente y el respaldo sería Georgia — que no es la marca. Mejor una
 *    sola tipografía coherente que un respaldo que no pinta nada. Si se consigue el
 *    fichero, el sitio natural es el h1 del encabezado.
 *
 * 3. Los verdes/ámbar/rojo de estado tienen variantes oscurecidas propias. El menta
 *    #03E196 sobre fondo claro no llega al contraste mínimo para texto (queda en 1.6:1),
 *    así que se usa tal cual en los indicadores y oscurecido en el texto. El ámbar y el
 *    rojo no están en el brandbook: se han elegido para convivir con la paleta.
 *
 *    Todos los pares texto/fondo se han medido: pasan AA (4.5:1) en claro y en oscuro.
 *    Los chips de "correcto" y "no disponible" se oscurecieron un 5 % porque se quedaban
 *    en 4.43 y 4.37 — su número va en 16 px negrita, que no cuenta como texto grande.
 */

/* DM Sans, la tipografía del brandbook. Fuente variable: un solo fichero cubre todos los
   pesos, y se declara el rango completo para que Regular (400) y Medium (500) — los dos
   que usa el brandbook — salgan del mismo recurso.
   font-display: swap para que el texto se lea desde el primer instante. */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/dmsans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/dmsans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --brand: #6E5EE0;
  --brand-dark: #3C1A75;
  --brand-accent: #03E196;
  --brand-ink: #ffffff;

  /* Hover del boton principal: se OSCURECE hacia Violet C, tambien en modo oscuro.
     Aclararlo era lo intuitivo sobre fondo oscuro, pero #6E5EE0 ya esta en 4.90:1 con
     texto blanco, asi que cualquier aclarado rompe el minimo AA (medido: 3.68:1).
     Oscurecer es la unica direccion accesible, y encima va hacia la propia paleta. */
  --brand-hover: #6754D0;
  /* Hover de los botones secundarios: un velo violeta muy tenue en lugar de gris, que
     es lo que hacia que el estado pareciera un boton deshabilitado. */
  --btn-hover: #EEECFB;
  --btn-hover-border: #AEA9D2;

  --bg: #EDEDED;
  --surface: #ffffff;
  --surface-2: #E3E3E5;
  --border: #C9C9CC;
  --text: #2D2926;
  --text-dim: #6B6764;

  --ok: #0A7954;
  --ok-bg: #DCF7EC;
  --warn: #8A5A00;
  --warn-bg: #FBEFD8;
  --fail: #B32318;
  --fail-bg: #FBE9E7;
  --info: #3C1A75;
  --info-bg: #E8E4F7;
  --skip: #66625F;
  --skip-bg: #E3E3E5;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(45, 41, 38, .06), 0 1px 3px rgba(45, 41, 38, .09);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* El brandbook es de imprenta y no define modo oscuro: estos valores se derivan del
       negro corporativo #2D2926, manteniendo violeta y menta como marca. */
    --bg: #1C1A19;
    --surface: #262322;
    --surface-2: #322E2C;
    --border: #443F3C;
    --text: #F2F0EE;
    --text-dim: #A8A29D;

    --ok: #4BE0A5;      --ok-bg: #102A20;
    --warn: #F0C070;    --warn-bg: #2E2413;
    --fail: #F58C82;    --fail-bg: #2E1715;
    --info: #B9A9FF;    --info-bg: #221B3A;
    --skip: #A8A29D;    --skip-bg: #2A2726;
    --shadow: none;

    --brand-hover: #6754D0;
    --btn-hover: #322E2C;
    --btn-hover-border: #5A5350;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 960px; margin: 0 auto; padding: 0 20px; }

/* ---------- topbar ---------- */

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.topbar__inner {
  max-width: 960px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.brand { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.brand__logo {
  /* Logotipo oficial (logo.svg, 149x25). Se fija el alto y el ancho se deja en auto para
     no deformarlo; el propio SVG lleva el degradado menta -> violeta del brandbook. */
  height: 21px;
  width: auto;
  display: block;
  flex: none;
}
.brand__name {
  font-weight: 500;
  /* Separador fino, para que "Diagnostics" no se lea como parte del logotipo. */
  padding-left: 11px;
  border-left: 1px solid var(--border);
}

/* ---------- forms & buttons ---------- */

.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field--inline { flex-direction: row; align-items: center; gap: 8px; }
.field__label { font-size: 13px; color: var(--text-dim); }

select, input[type="text"], input[type="email"], textarea {
  font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 9px; min-width: 0; width: 100%;
}
textarea { resize: vertical; min-height: 72px; }
select { width: auto; }

.switch { display: flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer; }
.switch input { width: 16px; height: 16px; accent-color: var(--brand); }

.btn {
  font: inherit; font-weight: 500; cursor: pointer;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 14px;
}
.btn:hover:not(:disabled) {
  background: var(--btn-hover);
  border-color: var(--btn-hover-border);
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn--primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn--primary:hover:not(:disabled) {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
}
.btn--lg { padding: 12px 24px; font-size: 16px; }
.btn:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}

/* ---------- hero ---------- */

.hero { padding: 32px 0 8px; }
.hero h1 { margin: 0 0 8px; font-size: 26px; line-height: 1.25; font-weight: 500; }
.hero__lead { margin: 0 0 20px; color: var(--text-dim); max-width: 62ch; }
.hero__form { max-width: 380px; margin: 0 0 18px; }
.hero__help { margin: 6px 0 0; font-size: 13px; color: var(--text-dim); }
.hero__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.run-status { font-size: 14px; color: var(--text-dim); }

/* ---------- summary ---------- */

.summary { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 4px; }
.chip {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 7px 13px; border-radius: 999px; font-size: 14px;
  border: 1px solid transparent;
}
.chip b { font-size: 16px; }
.chip--ok   { background: var(--ok-bg);   color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.chip--warn { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.chip--fail { background: var(--fail-bg); color: var(--fail); border-color: color-mix(in srgb, var(--fail) 30%, transparent); }
.chip--skip { background: var(--skip-bg); color: var(--skip); border-color: color-mix(in srgb, var(--skip) 30%, transparent); }

.banner { padding: 12px 16px; border-radius: var(--radius); margin: 16px 0; }
.banner--fail { background: var(--fail-bg); color: var(--fail); }
.banner--warn { background: var(--warn-bg); color: var(--warn); }

/* ---------- cards ---------- */

.groups { display: flex; flex-direction: column; gap: 16px; margin: 16px 0; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 20px; margin: 16px 0;
}
.card__title { margin: 0 0 4px; font-size: 17px; font-weight: 500; }
.card__subtitle { margin: 22px 0 8px; font-size: 14px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.card__lead { margin: 0 0 14px; color: var(--text-dim); font-size: 14px; }

/* ---------- check rows ---------- */

.rows { display: flex; flex-direction: column; }
.row { border-top: 1px solid var(--border); padding: 10px 0; }
.row:first-child { border-top: 0; }

.row__head { display: flex; align-items: baseline; gap: 10px; }
.row__dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  margin-top: 7px; background: var(--skip);
}
.row--ok   .row__dot { background: var(--ok); }
.row--warn .row__dot { background: var(--warn); }
.row--fail .row__dot { background: var(--fail); }
.row--info .row__dot { background: var(--info); }
.row--running .row__dot { background: var(--brand); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .row--running .row__dot { animation: none; } }

.row__label { flex: 1 1 auto; min-width: 0; }
.row__value { font-family: var(--mono); font-size: 13px; text-align: right; word-break: break-word; }
.row--fail .row__value { color: var(--fail); }
.row--warn .row__value { color: var(--warn); }

.row__hint { margin: 6px 0 0 19px; font-size: 13px; color: var(--text-dim); }
.row--fail .row__hint, .row--warn .row__hint { color: var(--text); }

.row__detail { margin: 8px 0 0 19px; }
.row__detail summary { cursor: pointer; font-size: 13px; color: var(--text-dim); }
.row__detail pre {
  margin: 8px 0 0; padding: 10px 12px; overflow-x: auto;
  background: var(--surface-2); border-radius: 8px;
  font-family: var(--mono); font-size: 12px; line-height: 1.45;
}

/* Filas, acciones y volcados: ocultos salvo que se active "Avanzado".
   (La clase sigue llamándose .tech por dentro; en la interfaz el conmutador se llama
   "Avanzado", que es lo que entiende quien abre la página.) */
body:not(.tech) .row--tech { display: none; }
body:not(.tech) .row__detail { display: none; }
body:not(.tech) .advanced { display: none; }

/* El volcado del informe es una pared de texto y JSON: sin "Avanzado" no aporta nada al
   cliente y lo único que hace es empujar los botones fuera de la pantalla. Copiar y
   descargar siguen funcionando igual, estén o no a la vista. */
body:not(.tech) #report-preview { display: none; }

.advanced { margin-top: 4px; }

/* ---------- misc ---------- */

.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.action-log { margin-top: 12px; font-size: 13px; color: var(--text-dim); white-space: pre-wrap; }

.report {
  margin: 14px 0 0; padding: 14px; max-height: 460px; overflow: auto;
  background: var(--surface-2); border-radius: 8px;
  font-family: var(--mono); font-size: 12px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}

.footer { padding: 24px 20px 40px; font-size: 13px; color: var(--text-dim); }
.footer a { color: inherit; }

@media (max-width: 600px) {
  .row__head { flex-wrap: wrap; }
  .row__value { text-align: left; width: 100%; padding-left: 19px; }
  .hero h1 { font-size: 22px; }
}

/* ---------- modo mínimo (?min=true) ---------- */

/* Solo el recuento de correctos, avisos y errores, más copiar y descargar. Pensado para
   una mirada rápida o para incrustar la herramienta en otra pantalla. Quitando el
   parámetro se recupera la vista completa sin cambiar nada más. */

body.min .hero__lead,
body.min .topbar__actions,
body.min #groups,
body.min #actions-card,
body.min #regions-card,
body.min #report-preview,
body.min .footer { display: none; }

body.min .hero { padding: 28px 0 4px; }
body.min .hero h1 { font-size: 20px; }
body.min .summary { margin: 18px 0 0; }
body.min .chip { padding: 10px 18px; font-size: 15px; }
body.min .chip b { font-size: 22px; }
body.min #report-card { margin-top: 20px; }

/* El campo de email se oculta solo cuando ya venía en la URL: si no, no habría forma de
   escribirlo y el check del servidor del usuario quedaría inalcanzable. */
body.min-email .hero__form { display: none; }