/* ==========================================================================
   joacoddev — hoja única del sistema.
   Derivada de theme.json. Para cambiar el look, editar los tokens de :root.

   Azul institucional de banca y seguros como color único de trabajo, bronce
   heredado del CV en papel (generadores/estilo.py) como acento secundario.
   Objetos enmarcados como plano técnico: esquinas rectas, borde de un pixel,
   cruces de registro. Nada redondeado, nada relleno.
   ========================================================================== */

:root {
  /* --- rampa neutra ---------------------------------------------------- */
  --color-neutral-100: #F1F3F5;
  --color-neutral-200: #E7EAEE;
  --color-neutral-300: #D5DAE1;
  --color-neutral-400: #A8B0BA;
  --color-neutral-500: #7C858F;
  --color-neutral-600: #5C646D;
  --color-neutral-700: #3F464E;
  --color-neutral-800: #272C32;
  --color-neutral-900: #16191C;

  /* --- rampa de acento: azul institucional ------------------------------ */
  --color-accent-100: #E3ECF6;
  --color-accent-200: #C2D6EA;
  --color-accent-300: #94B7D9;
  --color-accent-400: #4E86BC;
  --color-accent-500: #0F4C8A;
  --color-accent-600: #0D4278;
  --color-accent-700: #0A3563;
  --color-accent-800: #082A4F;
  --color-accent-900: #0A2540;

  /* --- rampa secundaria: bronce del CV ---------------------------------- */
  --color-accent-2-100: #F2E9E1;
  --color-accent-2-300: #CBAB8E;
  --color-accent-2-500: #7A4B2A;
  --color-accent-2-700: #5C3820;
  --color-accent-2-900: #3E2615;

  /* --- roles ------------------------------------------------------------ */
  --color-bg:       var(--color-neutral-100);
  --color-surface:  var(--color-neutral-200);
  --color-text:     var(--color-neutral-900);
  --color-muted:    var(--color-neutral-600);
  --color-divider:  var(--color-neutral-300);
  --color-accent:   var(--color-accent-500);
  --color-accent-2: var(--color-accent-2-500);

  /* --- tipografía -------------------------------------------------------
     Barlow si está instalada o auto-hospedada; si no, Arial Narrow sostiene
     el aire condensado de los títulos. Sin CDN: la página tiene que andar
     con doble clic. Ver readme.md para auto-hospedar Barlow. */
  --font-heading: "Barlow Condensed", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-heading-weight: 600;

  /* --- escala de espacio (densidad 0.85) -------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-sm: 0px;
  --radius-md: 2px;

  --shadow-sm: 0 1px 2px rgba(10, 37, 64, .08);
  --shadow-md: 0 2px 8px rgba(10, 37, 64, .10);

  /* --- ritmo vertical --------------------------------------------------- */
  --leading: 24px;
  --half: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:      #0C1219;
    --color-surface: #141C25;
    --color-text:    #E6EAEF;
    --color-muted:   #98A3AF;
    --color-divider: #28313C;
    --color-accent:  var(--color-accent-400);
  }
}

/* ------------------------------------------------------------------ base -- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  letter-spacing: .02em;
  margin: 0;
}

a { color: var(--color-accent-700); }

::selection { background: var(--color-accent-200); color: var(--color-accent-900); }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------- plano técnico ---- */
/* El marco que llevan tarjetas, figuras y placas: recto, hairline, con
   cruces de registro en las cuatro esquinas. Nunca redondeado, nunca
   relleno — son dibujos de línea. */
.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
  background: none;
}

.corner {
  position: absolute;
  width: 15px;
  height: 15px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  pointer-events: none;
}

.corner::before {
  content: "";
  position: absolute;
  left: 7px; top: 0;
  width: 1px; height: 100%;
  background: currentColor;
}

.corner::after {
  content: "";
  position: absolute;
  top: 7px; left: 0;
  width: 100%; height: 1px;
  background: currentColor;
}

.corner.tl { top: -8px; left: -8px; }
.corner.tr { top: -8px; right: -8px; }
.corner.bl { bottom: -8px; left: -8px; }
.corner.br { bottom: -8px; right: -8px; }

/* ------------------------------------------------------------ rótulos ----- */
/* La etiqueta va ARRIBA de una regla de un pixel y el contenido se apoya
   debajo: la estructura se ve. */
.kicker {
  display: block;
  font-size: 13px;
  line-height: var(--half);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-accent-700);
  font-feature-settings: "tnum" 1;
  margin: 0 0 var(--half);
}

@media (prefers-color-scheme: dark) {
  .kicker { color: var(--color-accent-300); }
  a { color: var(--color-accent-300); }
}

.caption-rule {
  height: 1px;
  border: 0;
  margin: 0 0 calc(var(--leading) - var(--half));
  background: var(--color-divider);
}

/* ------------------------------------------------------------- botones ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-5);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--color-accent);
  border-radius: 0;
  background: none;
  color: var(--color-accent-700);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

/* El primario es el único objeto sólido del tablero. */
.btn-primary {
  position: relative;
  background: var(--color-accent);
  color: #FFF;
  border-color: var(--color-accent);
}

.btn-primary:hover  { background: var(--color-accent-600); border-color: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }

.btn-ghost { border-color: var(--color-divider); color: var(--color-text); }
.btn-ghost:hover { background: var(--color-accent-100); border-color: var(--color-accent-300); }

@media (prefers-color-scheme: dark) {
  .btn-primary { color: #08111B; }
  .btn-ghost:hover { background: var(--color-surface); }
}

/* -------------------------------------------------------------- tablas ---- */
.table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.table th {
  text-align: left;
  font-size: 13px;
  line-height: var(--half);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

.table td { border-bottom: 1px solid var(--color-divider); }

/* --------------------------------------------------------------- fotos ---- */
/* Toda fotografía pasa por el duotono: se desatura y se lava en el acento,
   como una serigrafía. Resuelve además el fondo blanco del retrato, que en
   modo oscuro flotaría como un rectángulo. */
.duotone img {
  display: block;
  width: 100%;
  height: auto;
  filter: url(#duotono);
}

@media (prefers-color-scheme: dark) {
  .duotone img { filter: url(#duotono-oscuro); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}