/* Consola de pruebas de Kairo.
   Sin framework y sin build: se edita y se recarga. Para una herramienta de
   prueba, una tuberia de compilacion es tiempo que no se gasta en probar. */

:root {
  --fondo: #0f1115;
  --fondo-2: #161a21;
  --fondo-3: #1d222b;
  --borde: #2a313d;
  --texto: #e6e9ef;
  --tenue: #8b95a7;
  --acento: #4ade80;
  --acento-oscuro: #16613a;
  --aviso: #fbbf24;
  --peligro: #f87171;
  --radio: 10px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  /* `dvh` sigue a la barra de direcciones del movil cuando se encoge. Con
     `100vh` a secas, el campo de escribir queda DEBAJO de esa barra: se ve el
     chat y no se ve donde escribir. */
  height: 100dvh;
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body { display: flex; overflow: hidden; }

/* Solo aparecen en movil; en escritorio estorban. */
.solo-movil { display: none; }

/* ------------------------------------------------------------------ rail */

#rail {
  width: 250px;
  flex: 0 0 250px;
  background: var(--fondo-2);
  border-right: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  gap: 14px;
}

#rail h1 { margin: 0; font-size: 20px; letter-spacing: -0.3px; }
#rail .sub { margin: 2px 0 0; color: var(--tenue); font-size: 12px; }

#lista-atletas { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }

.item-atleta {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px;
  border-radius: var(--radio);
  border: 1px solid transparent;
  background: none;
  color: var(--texto);
  cursor: pointer;
  text-align: left;
  font: inherit;
  width: 100%;
}
.item-atleta:hover { background: var(--fondo-3); }
.item-atleta.activo { background: var(--fondo-3); border-color: var(--acento-oscuro); }

.inicial {
  width: 26px; height: 26px; flex: 0 0 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600;
  color: #0f1115;
}

.item-atleta .nombre { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#rail footer { border-top: 1px solid var(--borde); padding-top: 12px; }
.nota { color: var(--tenue); font-size: 11px; margin: 0 0 8px; }

/* --------------------------------------------------------------- botones */

button { cursor: pointer; font: inherit; }

.primario {
  background: var(--acento);
  color: #06220f;
  border: none;
  padding: 10px 14px;
  border-radius: var(--radio);
  font-weight: 600;
}
.primario:disabled { opacity: 0.5; cursor: progress; }

.enlace {
  background: none; border: none; color: var(--tenue);
  padding: 2px 0; font-size: 12px; text-decoration: underline;
}
.enlace:hover { color: var(--texto); }
.enlace.peligro:hover { color: var(--peligro); }

/* -------------------------------------------------------------- pantallas */

#principal { flex: 1; min-width: 0; display: flex; }
#principal > section { flex: 1; min-width: 0; display: flex; }

/* 🔴 ESTA LINEA NO ES OPCIONAL. La de arriba declara `display: flex` sobre las
   tres pantallas, y un `display` del autor GANA SIEMPRE al `[hidden]
   { display: none }` de la hoja del navegador -- da igual la especificidad,
   las reglas del autor mandan sobre las del agente de usuario.
   Resultado: `mostrar()` ponia y quitaba el atributo `hidden` y NO PASABA
   NADA. Las tres pantallas -- alta, vacia y chat -- salian a la vez, una al
   lado de la otra. En escritorio se leia como "raro pero usable"; en un
   telefono son tres columnas de 120 px y no se puede ni navegar. */
#principal > section[hidden] { display: none; }

#pantalla-alta, #pantalla-vacia { align-items: center; justify-content: center; padding: 24px; }

.tarjeta {
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 26px;
}
.ancho-medio { width: min(520px, 100%); }
.centrado { text-align: center; }

h2 { margin: 0 0 6px; font-size: 19px; }
.ayuda { color: var(--tenue); font-size: 13px; margin: 0 0 18px; }

form label { display: block; margin-bottom: 13px; }
form label > span { display: block; font-size: 12px; color: var(--tenue); margin-bottom: 5px; }
form label em { font-style: normal; opacity: 0.65; }

input, textarea {
  width: 100%;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto);
  padding: 10px 12px;
  font: inherit;
}
input:focus, textarea:focus { outline: 1px solid var(--acento-oscuro); border-color: var(--acento-oscuro); }

details { margin: 6px 0 16px; }
summary { color: var(--tenue); font-size: 12px; cursor: pointer; margin-bottom: 10px; }

.fila-botones { display: flex; align-items: center; gap: 16px; }
.error { color: var(--peligro); font-size: 13px; margin: 12px 0 0; }

/* ------------------------------------------------------------------ chat */

#pantalla-chat { display: flex; }

#columna-chat {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--borde);
}

#cabecera-atleta {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 16px 22px;
  border-bottom: 1px solid var(--borde);
}
#cabecera-atleta h2 { margin: 0; font-size: 16px; }
#cabecera-atleta .sub { margin: 2px 0 0; color: var(--tenue); font-size: 12px; }

#mensajes {
  flex: 1;
  overflow-y: auto;
  padding: 22px;
  display: flex; flex-direction: column; gap: 16px;
}

.turno { max-width: 82%; }
.turno.user { align-self: flex-end; }
.turno.assistant { align-self: flex-start; }

.burbuja {
  padding: 11px 14px;
  border-radius: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.turno.user .burbuja { background: var(--acento-oscuro); border-bottom-right-radius: 4px; }
.turno.assistant .burbuja { background: var(--fondo-2); border: 1px solid var(--borde); border-bottom-left-radius: 4px; }
.burbuja strong { color: #fff; }
.burbuja ul { margin: 8px 0 0; padding-left: 20px; }

.meta { font-size: 11px; color: var(--tenue); margin-top: 5px; display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  background: var(--fondo-3); border: 1px solid var(--borde);
  padding: 1px 7px; border-radius: 999px;
}
.chip.tool { color: var(--acento); border-color: var(--acento-oscuro); }
.chip.mal { color: var(--aviso); border-color: #6b4e0a; }

.escribiendo { color: var(--tenue); font-size: 13px; font-style: italic; }

#form-mensaje {
  display: flex; gap: 10px; align-items: flex-end;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--borde);
}
#entrada { resize: none; max-height: 160px; }

/* ----------------------------------------------------------------- panel */

#columna-panel {
  width: 340px; flex: 0 0 340px;
  display: flex; flex-direction: column;
  background: var(--fondo-2);
}
.panel-cabecera {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--borde);
}
.acciones-panel { display: flex; align-items: center; gap: 12px; }
.panel-cabecera h3 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--tenue); }

#panel { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 20px; }

.bloque h4 {
  margin: 0 0 9px; font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--tenue);
}

.dato { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 3px 0; }
.dato .k { color: var(--tenue); }
.dato .v { text-align: right; overflow-wrap: anywhere; }
.dato .v.nulo { color: #5b6475; font-style: italic; }

.pendiente {
  background: #2a2313; border: 1px solid #6b4e0a;
  border-radius: var(--radio); padding: 10px 12px; font-size: 12px;
}
.pendiente ul { margin: 6px 0 0; padding-left: 18px; }
.pendiente li { margin-bottom: 3px; }

.dia { display: flex; gap: 10px; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--borde); }
.dia:last-child { border-bottom: none; }
.dia .fecha { flex: 0 0 78px; color: var(--tenue); font-size: 12px; }
.dia.hoy .fecha { color: var(--acento); font-weight: 600; }
.dia .libre { color: #5b6475; font-style: italic; }

.freno { border-radius: var(--radio); padding: 10px 12px; font-size: 12px; }
.freno.ninguna { background: var(--fondo-3); }
.freno.leve, .freno.moderada { background: #2a2313; border: 1px solid #6b4e0a; }
.freno.alta, .freno.veto { background: #2c1717; border: 1px solid #7f2222; }

/* ==========================================================================
   MOVIL  (<= 900 px)
   ==========================================================================
   EL BUG QUE ESTO ARREGLA, y no era cosmetico: en un telefono de 390 px, el
   rail (250 fijos) mas el panel (340 fijos) sumaban mas que la pantalla, asi
   que la columna del chat se quedaba con CERO pixeles de ancho. No es que se
   viera mal: es que NO HABIA DONDE ESCRIBIR.

   La solucion es la de siempre en un telefono: solo una cosa a la vez. El chat
   ocupa todo, y el rail y el panel se abren ENCIMA. */

@media (max-width: 900px) {

  .solo-movil { display: inline-flex; }

  /* --- el rail, como cajon --- */
  #rail {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: min(280px, 82vw);
    flex-basis: auto;
    z-index: 30;
    transform: translateX(-100%);
    transition: transform 0.18s ease-out;
  }
  body.rail-abierto #rail { transform: none; }

  #velo {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 20;
    border: none;
  }

  /* --- el chat se queda con toda la pantalla --- */
  #columna-chat { border-right: none; }

  #cabecera-atleta {
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    /* Debajo de la muesca / barra de estado en pantalla completa. */
    padding-top: max(10px, env(safe-area-inset-top));
  }
  #cabecera-atleta .quien { flex: 1; min-width: 0; }
  #cabecera-atleta h2 { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #cabecera-atleta .sub { display: none; }   /* el correo no aporta en movil */
  #btn-borrar-atleta { font-size: 11px; flex: 0 0 auto; }

  #mensajes { padding: 14px 12px; gap: 12px; }
  .turno { max-width: 92%; }

  /* --- el boton que abre el panel --- */
  #btn-abrir-panel {
    position: absolute;
    right: 12px;
    bottom: 84px;
    z-index: 10;
    background: var(--fondo-3);
    border: 1px solid var(--acento-oscuro);
    color: var(--acento);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.45);
  }
  #columna-chat { position: relative; }

  /* --- el panel, como hoja a pantalla completa --- */
  #columna-panel {
    position: fixed;
    inset: 0;
    width: auto; flex-basis: auto;
    z-index: 30;
    transform: translateX(100%);
    transition: transform 0.18s ease-out;
    padding-top: env(safe-area-inset-top);
  }
  body.panel-abierto #columna-panel { transform: none; }
  .panel-cabecera { padding: 14px 16px; }
  .panel-cabecera h3 { font-size: 14px; }

  /* --- escribir --- */
  #form-mensaje {
    padding: 10px 12px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    gap: 8px;
  }
  /* ⚠️ 16 px o iOS hace zoom al enfocar el campo y deja la pagina descuadrada
     para el resto de la sesion. No es preferencia tipografica. */
  input, textarea { font-size: 16px; }
  #btn-enviar { flex: 0 0 auto; padding: 10px 16px; }

  /* --- alta y pantalla vacia --- */
  #pantalla-alta, #pantalla-vacia { padding: 14px; align-items: flex-start; }
  .tarjeta { padding: 20px 18px; }
  #pantalla-alta { overflow-y: auto; }

  /* --- el boton de icono --- */
  .icono {
    background: none;
    border: 1px solid var(--borde);
    color: var(--texto);
    border-radius: 9px;
    width: 34px; height: 34px;
    align-items: center; justify-content: center;
    font-size: 15px;
    flex: 0 0 auto;
  }
}