/* Base visual heredada del Catalogador de Ferias: mismos tokens, mismo
   tema (claro/oscuro, 5 acentos, 2 densidades). Lo propio del circuito
   360 (login, bandeja, filas con logo) va al final del archivo. */
/* Encode Sans: la tipografía institucional de argentina.ar. Va embebida
     para que el archivo suelto siga andando sin internet. */
  @font-face {
    font-family: "Encode Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../recursos/encode-sans.woff2") format("woff2");
  }

  /* Acentos: solo cambia el tono y la saturación, el resto se deriva.
     Así ninguna combinación queda ilegible. */
  [data-acento="institucional"] { --h: 213; --s: 80%; }
  [data-acento="celeste"]       { --h: 196; --s: 72%; }
  [data-acento="verde"]         { --h: 162; --s: 58%; }
  [data-acento="vino"]          { --h: 342; --s: 48%; }
  [data-acento="grafito"]       { --h: 215; --s: 12%; }

  :root {
    --acento:        hsl(var(--h) var(--s) 33%);
    --acento-fuerte: hsl(var(--h) var(--s) 26%);
    --acento-texto:  hsl(var(--h) var(--s) 31%);
    --acento-tinte:  hsl(var(--h) var(--s) 96%);
    --acento-borde:  hsl(var(--h) var(--s) 74%);

    --fondo:     #f4f6f8;
    --superficie:#ffffff;
    --hundido:   #f8f9fb;
    --tinta:     #161b22;
    --suave:     #5b6775;
    --tenue:     #8c97a4;
    --borde:     #e0e5ea;
    --borde-firme:#c8d0d9;

    --ok:        hsl(158 64% 28%);
    --falta:     hsl(9 66% 38%);
    --falta-bg:  hsl(9 66% 96%);
    --revisar:   hsl(35 78% 30%);
    --revisar-bg:hsl(42 92% 95%);

    --r: 8px;
    --alto-fila: 15px;
    --pad: 20px;
    --texto: 14.5px;

    --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
    --titulo: "Encode Sans", var(--sans);
  }

  [data-densidad="compacta"] {
    --alto-fila: 9px;
    --pad: 14px;
    --texto: 13.5px;
    --r: 6px;
  }

  [data-modo="oscuro"] {
    --acento:        hsl(var(--h) var(--s) 54%);
    --acento-fuerte: hsl(var(--h) var(--s) 62%);
    --acento-texto:  hsl(var(--h) calc(var(--s) - 22%) 74%);
    --acento-tinte:  hsl(var(--h) calc(var(--s) - 20%) 15%);
    --acento-borde:  hsl(var(--h) var(--s) 34%);
    --fondo:     #12161c;
    --superficie:#1a2029;
    --hundido:   #151b22;
    --tinta:     #e6eaf0;
    --suave:     #a0abb8;
    --tenue:     #78838f;
    --borde:     #2a323d;
    --borde-firme:#3b4553;
    --ok:        hsl(158 44% 62%);
    --falta:     hsl(9 72% 70%);
    --falta-bg:  hsl(9 40% 17%);
    --revisar:   hsl(42 78% 66%);
    --revisar-bg:hsl(38 46% 16%);
  }
  @media (prefers-color-scheme: dark) {
    [data-modo="auto"] {
      --acento:        hsl(var(--h) var(--s) 54%);
      --acento-fuerte: hsl(var(--h) var(--s) 62%);
      --acento-texto:  hsl(var(--h) calc(var(--s) - 22%) 74%);
      --acento-tinte:  hsl(var(--h) calc(var(--s) - 20%) 15%);
      --acento-borde:  hsl(var(--h) var(--s) 34%);
      --fondo:     #12161c;
      --superficie:#1a2029;
      --hundido:   #151b22;
      --tinta:     #e6eaf0;
      --suave:     #a0abb8;
      --tenue:     #78838f;
      --borde:     #2a323d;
      --borde-firme:#3b4553;
      --ok:        hsl(158 44% 62%);
      --falta:     hsl(9 72% 70%);
      --falta-bg:  hsl(9 40% 17%);
      --revisar:   hsl(42 78% 66%);
      --revisar-bg:hsl(38 46% 16%);
    }
  }

  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0; background: var(--fondo); color: var(--tinta);
    font: var(--texto)/1.5 var(--sans);
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, .tipo-titulo { font-family: var(--titulo); letter-spacing: -.01em; }

  :focus-visible {
    outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 3px;
  }

  /* ---------------------------------------------------------- estructura */
  .barra-sup {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 14px;
    padding: 12px 24px;
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
  }
  .marca { display: flex; align-items: center; gap: 11px; margin-right: auto; }
  .marca-barra { width: 4px; height: 30px; background: var(--acento); border-radius: 2px; }
  .marca h1 { margin: 0; font-size: 17px; font-weight: 600; }
  .marca p { margin: 0; font-size: 12.5px; color: var(--suave); }

  main { max-width: 1120px; margin: 0 auto; padding: 24px 24px 108px; }

  .paso { margin-bottom: 18px; }
  .paso > h2 {
    margin: 0 0 10px; font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .1em; color: var(--suave);
    display: flex; align-items: center; gap: 9px;
  }
  .numero {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--acento-tinte); color: var(--acento-texto);
    border: 1px solid var(--acento-borde);
    display: grid; place-items: center;
    font-size: 11px; font-weight: 700; letter-spacing: 0;
  }
  .caja {
    background: var(--superficie); border: 1px solid var(--borde);
    border-radius: 12px; padding: var(--pad);
  }

  /* ------------------------------------------------------------ archivo */
  .zona {
    border: 1.5px dashed var(--borde-firme); border-radius: var(--r);
    padding: 26px 20px; text-align: center;
    transition: border-color .15s, background .15s;
  }
  .zona.encima { border-color: var(--acento); background: var(--acento-tinte); }
  #nombre-archivo { font-size: 16px; color: var(--suave); font-family: var(--titulo); }
  #nombre-archivo.cargado { color: var(--acento-texto); font-weight: 600; }
  .acciones { margin-top: 14px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
  .pie-caja {
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--borde);
    display: flex; align-items: center; justify-content: center; gap: 10px;
    flex-wrap: wrap; font-size: 13px; color: var(--suave);
  }

  /* ---------------------------------------------------------- controles */
  button {
    font: inherit; font-size: 14px; min-height: 38px; padding: 8px 15px;
    border: 1px solid var(--borde-firme); border-radius: var(--r);
    background: var(--superficie); color: var(--tinta); cursor: pointer;
    transition: border-color .12s, background .12s;
  }
  button:hover:not(:disabled) { border-color: var(--acento); color: var(--acento-texto); }
  button:active:not(:disabled) { transform: translateY(1px); }
  button:disabled { opacity: .45; cursor: default; }
  button.primario {
    background: var(--acento); border-color: var(--acento); color: #fff;
    font-weight: 600; padding: 11px 22px; min-height: 44px;
  }
  button.primario:hover:not(:disabled) { background: var(--acento-fuerte); color: #fff; }
  [data-modo="oscuro"] button.primario, [data-modo="oscuro"] button.primario:hover { color: #0f1319; }
  @media (prefers-color-scheme: dark) {
    [data-modo="auto"] button.primario, [data-modo="auto"] button.primario:hover { color: #0f1319; }
  }

  input[type=text], input[type=email], select, textarea {
    font: inherit; font-size: 14px; width: 100%; min-height: 38px;
    padding: 8px 11px; border: 1px solid var(--borde);
    border-radius: var(--r); background: var(--superficie); color: var(--tinta);
  }
  input:hover, select:hover { border-color: var(--borde-firme); }
  input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--acento);
    box-shadow: 0 0 0 3px var(--acento-tinte);
  }
  input::placeholder { color: var(--tenue); }
  label { display: block; font-size: 12.5px; color: var(--suave); margin-bottom: 5px; }

  .campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 18px; }
  .ancho { grid-column: 1 / -1; }
  #info-formato { margin: 7px 0 0; font-size: 13px; color: var(--suave); white-space: pre-line; }

  /* ------------------------------------------------------------- tabla */
  .barra-lista { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
  #resumen-lista { color: var(--suave); font-size: 13px; margin-right: auto; }
  .marco { border: 1px solid var(--borde); border-radius: var(--r); overflow: auto; }
  table { width: 100%; border-collapse: collapse; font-size: var(--texto); }
  th {
    position: sticky; top: 0; z-index: 1;
    background: var(--hundido); text-align: left;
    font-size: 11.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; color: var(--suave);
    padding: 9px 12px; border-bottom: 1px solid var(--borde);
  }
  td { padding: var(--alto-fila) 12px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
  tbody tr:last-child td { border-bottom: 0; }
  tbody tr { border-left: 3px solid var(--ok); }
  tbody tr.falta { border-left-color: var(--falta); }
  tbody tr.revisar { border-left-color: var(--revisar); }
  tbody tr.fuera { border-left-color: var(--borde-firme); color: var(--tenue); }
  tbody tr.fuera .empresa { text-decoration: line-through; }
  tbody tr:hover { background: var(--hundido); }
  .tilde { width: 42px; text-align: center; }
  .tilde input { width: 17px; height: 17px; accent-color: var(--acento); cursor: pointer; }
  .empresa { font-weight: 500; }
  .estado-excel { color: var(--suave); font-size: 13.5px; }
  .avisos { font-size: 13px; }
  .marca-falta, .marca-revisar {
    display: inline-block; padding: 2px 9px; border-radius: 20px;
    font-size: 12.5px; line-height: 1.45; margin: 1px 4px 1px 0;
  }
  .marca-falta { background: var(--falta-bg); color: var(--falta); }
  .marca-revisar { background: var(--revisar-bg); color: var(--revisar); }
  .col-editar { width: 84px; text-align: right; }
  .col-editar button { min-height: 30px; padding: 3px 11px; font-size: 13px; }

  /* --------------------------------------------------------- barra fija */
  .barra-inf {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    display: flex; align-items: center; gap: 16px;
    padding: 12px 24px; background: var(--superficie);
    border-top: 1px solid var(--borde);
  }
  .barra-inf .adentro {
    max-width: 1120px; margin: 0 auto; width: 100%;
    display: flex; align-items: center; gap: 16px;
  }
  #estado { color: var(--suave); font-size: 13px; margin-right: auto; }

  /* ------------------------------------------------------------- tema */
  details.tema { position: relative; }
  details.tema > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px;
    min-height: 38px; padding: 8px 14px; font-size: 14px;
    border: 1px solid var(--borde-firme); border-radius: var(--r);
  }
  details.tema > summary::-webkit-details-marker { display: none; }
  details.tema > summary:hover { border-color: var(--acento); color: var(--acento-texto); }
  .punto-tema { width: 13px; height: 13px; border-radius: 50%; background: var(--acento); }
  .panel-tema {
    position: absolute; right: 0; top: calc(100% + 8px); width: 268px;
    background: var(--superficie); border: 1px solid var(--borde);
    border-radius: 12px; padding: 16px; z-index: 30;
    box-shadow: 0 10px 30px rgb(15 25 40 / 12%);
  }
  .panel-tema h3 {
    margin: 0 0 8px; font-size: 11.5px; font-weight: 600; color: var(--suave);
    text-transform: uppercase; letter-spacing: .08em;
  }
  .panel-tema h3:not(:first-child) { margin-top: 18px; }
  .opciones { display: flex; gap: 6px; flex-wrap: wrap; }
  .opciones button {
    flex: 1; min-width: 62px; min-height: 34px; padding: 6px 8px; font-size: 13px;
  }
  .opciones button[aria-pressed="true"] {
    border-color: var(--acento); background: var(--acento-tinte); color: var(--acento-texto);
    font-weight: 600;
  }
  .acentos { display: flex; gap: 10px; }
  .acentos button {
    width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 50%;
    border: 1px solid var(--borde); position: relative;
  }
  .acentos button span {
    display: block; width: 20px; height: 20px; border-radius: 50%; margin: 0 auto;
  }
  .acentos button[aria-pressed="true"] { border-color: var(--acento); border-width: 2px; }

  /* ------------------------------------------------------------ varios */
  #error {
    background: var(--falta-bg); border: 1px solid var(--falta);
    color: var(--falta); border-radius: 12px; padding: 16px 18px;
    margin-bottom: 18px; white-space: pre-wrap; font-size: 14px;
  }
  #control {
    white-space: pre-wrap; font: 12.5px/1.6 "Cascadia Mono", Consolas, monospace;
    background: var(--hundido); border: 1px solid var(--borde);
    border-radius: var(--r); padding: 15px; max-height: 440px; overflow: auto;
    margin: 0 0 14px; color: var(--tinta);
  }
  .nota { font-size: 13px; color: var(--suave); }
  .nota b { color: var(--tinta); font-weight: 600; }

  dialog {
    border: 1px solid var(--borde); border-radius: 14px; padding: 0;
    width: min(620px, 92vw); background: var(--superficie); color: var(--tinta);
    box-shadow: 0 24px 60px rgb(10 20 35 / 22%);
  }
  dialog::backdrop { background: rgb(10 18 30 / 45%); }
  .editor-cuerpo { padding: 22px 24px; }
  .editor-cuerpo h3 { margin: 0 0 18px; font-size: 17px; font-weight: 600; }
  .editor-cuerpo > div { margin-bottom: 12px; }
  .editor-pie {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 14px 24px; background: var(--hundido); border-top: 1px solid var(--borde);
  }
  textarea { resize: vertical; min-height: 76px; font-family: inherit; line-height: 1.5; }

  @media (max-width: 640px) {
    main { padding: 16px 14px 104px; }
    .barra-sup, .barra-inf { padding: 10px 14px; }
    .marca p { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
  }