/* ===========================================================================
   Copiloto — sistema visual "alta visibilidad"
   ---------------------------------------------------------------------------
   El material sale de la obra: chaleco reflectivo (amarillo-verde fluorescente
   sobre plata y carbón) y señalética de seguridad, que es de donde ya venía la
   metáfora del semáforo.

   Dos ambientes a propósito:
   - Carcasa oscura: es la app. Se usa encima de una videollamada y no tiene que
     tirar luz a la cara ni competir con la reunión.
   - Papel: los documentos (plan, investigación, ficha de producto) se ven como
     documentos, porque lo son. No es decoración: marca qué se lee y qué se opera.
   =========================================================================== */

:root {
  /* Campo */
  --carbon:   #14171a;   /* fondo de la página */
  --acero:    #1c2126;   /* superficie elevada */
  --hueco:    #101316;   /* campos y zonas hundidas */
  --canto:    #2b333b;   /* bordes */
  --canto-vivo: #3d4852;

  /* Texto */
  --tinta:    #e4e9ed;
  --plata:    #7e8b98;   /* la banda reflectiva: secundario, etiquetas */

  /* Acento: el amarillo-verde del chaleco. Se usa poco, a propósito. */
  --hivis:    #d8e64b;
  --hivis-op: #a8b32f;

  /* Señales. Verde, ámbar y rojo de señalética, no de terminal. */
  --verde:    #57c08a;  --verde-piso: #14312a;  --verde-canto: #235c48;
  --ambar:    #f0b429;  --ambar-piso: #33280c;  --ambar-canto: #6b5216;
  --rojo:     #e8695a;  --rojo-piso:  #331b19;  --rojo-canto:  #6b332c;

  /* Papel: para documentos */
  --papel:    #eae6dc;
  --papel-2:  #ded9cc;
  --papel-tinta: #22262a;
  --papel-plata: #6c6a62;

  --radio:    10px;
  --radio-ch: 7px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Barlow', -apple-system, system-ui, sans-serif;
  background: var(--carbon);
  color: var(--tinta);
  font-size: 15px;
  line-height: 1.55;
  font-feature-settings: 'tnum' 0;
  -webkit-font-smoothing: antialiased;
}

/* La app siempre respira igual */
.hoja { max-width: 1120px; margin: 0 auto; padding: 0 22px 72px; }
.hoja.angosta { max-width: 880px; }

a { color: var(--hivis); text-decoration-color: color-mix(in srgb, var(--hivis) 40%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--hivis); }

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

/* ---------------------------------------------------------------------------
   Riel superior. Es el cartel de obra: la app siempre dice dónde estás.
   --------------------------------------------------------------------------- */
.riel {
  border-bottom: 1px solid var(--canto);
  background: linear-gradient(var(--acero), #191e23);
  margin-bottom: 26px;
}
.riel .interior {
  max-width: 1120px; margin: 0 auto; padding: 0 22px;
  display: flex; align-items: center; gap: 20px; min-height: 56px; flex-wrap: wrap;
}
.marca {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 700; font-size: 19px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta); text-decoration: none; display: flex; align-items: center; gap: 9px;
}
/* La franja reflectiva del chaleco, reducida a su mínima expresión */
.marca::before {
  content: ''; width: 4px; height: 19px; border-radius: 1px;
  background: linear-gradient(var(--hivis), var(--hivis-op));
}
.riel nav { display: flex; gap: 3px; margin-left: auto; flex-wrap: wrap; }
.riel nav a {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600; font-size: 14px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--plata); text-decoration: none; padding: 7px 13px; border-radius: var(--radio-ch);
}
.riel nav a:hover { color: var(--tinta); background: #ffffff08; }
.riel nav a[aria-current] { color: var(--carbon); background: var(--hivis); }

/* ---------------------------------------------------------------------------
   Encabezados
   --------------------------------------------------------------------------- */
h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 34px; font-weight: 700; letter-spacing: -.005em; line-height: 1.1;
  text-transform: uppercase;
}
h2 { font-family: 'Barlow Condensed', sans-serif; font-size: 21px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.bajada { color: var(--plata); font-size: 14.5px; margin: 5px 0 24px; max-width: 62ch; }

/* Etiqueta de sección: la voz de la señalética */
.rotulo {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--plata); margin-bottom: 12px; display: flex; align-items: center; gap: 9px;
}
.rotulo::after { content: ''; flex: 1; height: 1px; background: var(--canto); }

/* ---------------------------------------------------------------------------
   Superficies
   --------------------------------------------------------------------------- */
.caja {
  background: var(--acero); border: 1px solid var(--canto);
  border-radius: var(--radio); padding: 17px 18px; margin-bottom: 14px;
}
.rejilla { display: grid; gap: 10px; }
.rejilla.dos { grid-template-columns: 1fr 1fr; }
.fila { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.fila.punta { justify-content: space-between; }

/* ---------------------------------------------------------------------------
   Campos
   --------------------------------------------------------------------------- */
input, select, textarea {
  width: 100%; background: var(--hueco); border: 1px solid var(--canto);
  color: var(--tinta); border-radius: var(--radio-ch); padding: 10px 12px;
  font-family: inherit; font-size: 14px; transition: border-color .12s;
}
input:hover, select:hover, textarea:hover { border-color: var(--canto-vivo); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--hivis); }
input::placeholder, textarea::placeholder { color: #5d6873; }
textarea { min-height: 150px; resize: vertical; line-height: 1.6; font-size: 13.5px; }
select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--plata) 50%), linear-gradient(135deg, var(--plata) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px;
}
input[type=file] { padding: 10px; cursor: pointer; color: var(--plata); font-size: 13px; }
input[type=file]::file-selector-button {
  background: var(--acero); border: 1px solid var(--canto); color: var(--tinta);
  border-radius: 5px; padding: 6px 12px; margin-right: 11px; cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
}
.apilado > * + * { margin-top: 9px; }

/* ---------------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------------- */
button {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600; font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  border-radius: var(--radio-ch); padding: 10px 18px; cursor: pointer;
  background: transparent; border: 1px solid var(--canto); color: var(--plata);
  transition: color .12s, border-color .12s, background .12s;
}
button:hover:not(:disabled) { color: var(--tinta); border-color: var(--canto-vivo); background: #ffffff06; }
button:disabled { opacity: .35; cursor: not-allowed; }
button.primario { background: var(--hivis); border-color: var(--hivis); color: #191c07; }
button.primario:hover:not(:disabled) { background: #e2f05c; border-color: #e2f05c; color: #191c07; }
button.chico { padding: 6px 11px; font-size: 13px; }
button.peligro:hover:not(:disabled) { color: var(--rojo); border-color: var(--rojo-canto); background: var(--rojo-piso); }

/* ---------------------------------------------------------------------------
   Datos y texto menor
   --------------------------------------------------------------------------- */
.dato, .reloj { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.menor { font-size: 12.5px; color: var(--plata); }
.nota { font-size: 12.5px; color: var(--plata); line-height: 1.5; margin-top: 7px; }
.vacio { color: var(--plata); font-size: 13.5px; }

/* Chips: señalética chica */
.chip {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600; font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 4px; border: 1px solid var(--canto);
  color: var(--plata); background: var(--hueco); white-space: nowrap;
}
.chip.verde    { color: var(--verde); border-color: var(--verde-canto); background: var(--verde-piso); }
.chip.caliente { color: var(--verde); border-color: var(--verde-canto); background: var(--verde-piso); }
.chip.ambar, .chip.tibio { color: var(--ambar); border-color: var(--ambar-canto); background: var(--ambar-piso); }
.chip.rojo, .chip.frio, .chip.urgente { color: var(--rojo); border-color: var(--rojo-canto); background: var(--rojo-piso); }

/* ---------------------------------------------------------------------------
   Documentos.
   El plan, la investigación y la ficha de producto se leen, no se operan.
   Por eso van sobre papel: el cambio de material dice qué tipo de cosa es.
   --------------------------------------------------------------------------- */
.documento {
  display: none; background: var(--papel); color: var(--papel-tinta);
  border-radius: var(--radio-ch); padding: 18px 20px; margin-top: 12px;
  font-size: 13.5px; line-height: 1.65; white-space: pre-wrap;
  max-height: 380px; overflow-y: auto;
  box-shadow: 0 1px 0 var(--papel-2) inset, 0 10px 26px #0006;
}
.documento.ver { display: block; }
.documento::-webkit-scrollbar-thumb { background: #c9c4b6; }

/* ---------------------------------------------------------------------------
   Estados y avisos
   --------------------------------------------------------------------------- */
.aviso {
  background: var(--ambar-piso); border: 1px solid var(--ambar-canto); color: var(--ambar);
  border-radius: var(--radio-ch); padding: 11px 13px; font-size: 13px; margin-top: 11px; display: none;
}
.aviso.ver { display: block; }
.listo { color: var(--verde); } .falta { color: var(--rojo); }

/* ---------------------------------------------------------------------------
   Barras de nivel de audio
   --------------------------------------------------------------------------- */
.canal + .canal { margin-top: 11px; }
.canal-cab { display: flex; align-items: baseline; gap: 9px; margin-bottom: 5px; }
.canal-nom {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: .12em; width: 62px; flex-shrink: 0;
}
.vos .canal-nom { color: var(--plata); }
.cliente .canal-nom { color: var(--hivis); }
.medidor { height: 6px; background: var(--hueco); border-radius: 3px; overflow: hidden; border: 1px solid var(--canto); }
.barra { height: 100%; width: 0%; background: var(--hivis); transition: width .07s linear; }
.barra.mudo { background: var(--canto-vivo); }

/* ---------------------------------------------------------------------------
   Transcripción
   --------------------------------------------------------------------------- */
.turno { display: flex; gap: 11px; margin-bottom: 7px; font-size: 13.5px; }
.quien {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: .11em; flex-shrink: 0; width: 54px; padding-top: 3px;
}
.turno.cliente .quien, .turno.CLIENTE .quien { color: var(--hivis); }
.turno.vos .quien, .turno.VOS .quien { color: var(--plata); }
.turno.vos .dicho, .turno.VOS .dicho { color: var(--plata); }
.parcial { opacity: .45; font-style: italic; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--canto); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--canto-vivo); }

@media (max-width: 640px) {
  .rejilla.dos { grid-template-columns: 1fr; }
  h1 { font-size: 27px; }
  .hoja { padding: 0 16px 56px; }
  .riel .interior { padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}