/* Hoja de estilo del panel. Sin frameworks: son ocho páginas y una placa. */

:root {
  --fondo: #14161a;
  --panel: #1d2027;
  --borde: #2b3039;
  --texto: #dfe3ea;
  --suave: #97a0b0;
  --acento: #6aa9ff;
  --bien: #4ec98a;
  --mal: #f0736a;
  --ojo: #e5b95c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  align-items: center;
  padding: .8rem 1.4rem;
  background: var(--panel);
  border-bottom: 1px solid var(--borde);
}
nav a { color: var(--suave); text-decoration: none; }
nav a:hover { color: var(--texto); }
nav .marca { color: var(--texto); font-weight: 600; margin-right: .6rem; }
nav .derecha { margin-left: auto; }

main { max-width: 60rem; margin: 0 auto; padding: 1.6rem 1.4rem 4rem; }

h1 { font-size: 1.5rem; margin: 0 0 .3rem; }
h2 { font-size: 1.1rem; margin: 1.8rem 0 .6rem; color: var(--suave);
     text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
p.pie { color: var(--suave); margin-top: 0; }

.tarjeta {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
}
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .8rem; }

.aviso { padding: .7rem 1rem; border-radius: 6px; margin-bottom: .8rem;
         background: #23272f; border-left: 3px solid var(--acento); }
.aviso.success { border-color: var(--bien); }
.aviso.error   { border-color: var(--mal); }
.aviso.warning { border-color: var(--ojo); }

.estado { font-weight: 600; }
.estado.activo  { color: var(--bien); }
.estado.parado  { color: var(--suave); }
.estado.fallido { color: var(--mal); }

/* La barra de la reindexación. No es un <progress>: quería el mismo borde y el
   mismo radio que las tarjetas, y darle estilo al elemento nativo obliga a
   pelearse con tres pseudoelementos distintos según el navegador. */
.barra { height: 8px; margin: .6rem 0 .35rem; border-radius: 999px;
         background: #12141a; border: 1px solid var(--borde); overflow: hidden; }
.barra > span { display: block; height: 100%; width: 0;
                background: var(--acento); transition: width .3s ease; }

/* El color del triaje clínico: verde/amarillo/rojo, siempre como distintivo
   visible en el registro de cada llamada. */
.triaje { display: inline-block; padding: .05rem .6rem; border-radius: 999px;
          font-size: 12.5px; font-weight: 700; text-transform: uppercase;
          letter-spacing: .05em; border: 1.5px solid; }
.triaje.verde    { color: var(--bien); border-color: var(--bien); }
.triaje.amarillo { color: var(--ojo);  border-color: var(--ojo); }
.triaje.rojo     { color: var(--mal);  border-color: var(--mal); }
.triaje.sin      { color: var(--suave); border-color: var(--suave); font-weight: 600;
                   text-transform: none; letter-spacing: 0; }

label { display: block; margin: .9rem 0 .25rem; font-weight: 600; }
input[type=text], input[type=url], input[type=number], input[type=password],
input[type=file], select, textarea {
  width: 100%; padding: .5rem .6rem; background: #12141a;
  border: 1px solid var(--borde); border-radius: 5px; color: var(--texto);
  font: inherit;
}
textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.ayuda { color: var(--suave); font-size: 13px; margin: .2rem 0 0; }
.errores { color: var(--mal); font-size: 13px; margin: .3rem 0 0; }

button, .boton {
  padding: .5rem .9rem; border-radius: 6px; border: 1px solid var(--borde);
  background: #2a2f39; color: var(--texto); font: inherit; cursor: pointer;
  text-decoration: none; display: inline-block;
}
button:hover, .boton:hover { background: #333947; }
button.principal { background: var(--acento); border-color: var(--acento); color: #0d1017; font-weight: 600; }
button.peligro { border-color: var(--mal); color: var(--mal); }
button.enlace { background: none; border: none; color: var(--suave); padding: 0; }
button[disabled] { opacity: .5; cursor: not-allowed; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { color: var(--suave); font-size: 13px; text-transform: uppercase; letter-spacing: .03em; }

code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
pre { background: #12141a; border: 1px solid var(--borde); border-radius: 6px;
      padding: .8rem; overflow-x: auto; }

.acciones { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.acciones form { display: inline; }

#consola {
  background: #0c0e12; border: 1px solid var(--borde); border-radius: 6px;
  padding: .8rem; height: 32rem; overflow-y: auto; white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
}

/* La transcripción de un ensayo de calidad: burbujas por interlocutor. */
.turno { border-radius: 8px; padding: .5rem .8rem; margin: .5rem 0; max-width: 85%;
         white-space: pre-wrap; border: 1px solid var(--borde); }
.turno .quien { font-size: 12px; font-weight: 700; color: var(--suave);
                text-transform: uppercase; letter-spacing: .04em; display: block; }
.turno.clara     { background: #1a2230; margin-right: auto; }
.turno.paciente  { background: #241d24; margin-left: auto; }
.turno.herramienta { background: #12141a; color: var(--suave); max-width: 100%;
                     font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }

/* La barra de filtros de Evaluaciones. Es el único formulario GET del panel, y
   tiene que serlo: un filtro que no sobrevive a recargar ni a compartir el
   enlace no sirve de nada. */
.filtros { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: flex-end; }
.filtros .campo { display: flex; flex-direction: column; }
.filtros label { margin: 0 0 .2rem; font-size: 13px; }
.filtros select, .filtros input[type=date] { width: auto; min-width: 9.5rem; }
.filtros .acciones { margin-top: 0; }

/* Una llamada por fila: la lista es un índice, no un expediente. El detalle
   entero vive en su propia página, que es lo que la deja legible con cien
   llamadas dentro. */
.fila-exp { display: grid; gap: .7rem; align-items: baseline;
            grid-template-columns: auto auto 1fr auto auto;
            padding: .55rem .7rem; border-bottom: 1px solid var(--borde);
            color: inherit; text-decoration: none; }
.fila-exp:hover { background: var(--panel); }
.fila-exp .momento { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                     font-size: 13px; color: var(--suave); }
.fila-exp .quien { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-exp .ayuda { margin: 0; white-space: nowrap; }

/* Distintivo neutro para la cobertura, el procedimiento y la dirección: misma
   geometría que .triaje, pero sin robarle el color, que en esta casa significa
   gravedad clínica y solo eso. */
.etiqueta { display: inline-block; padding: .05rem .55rem; border-radius: 999px;
            font-size: 12px; border: 1px solid var(--borde); color: var(--suave); }
.etiqueta.cubierta    { color: var(--bien); }
.etiqueta.no_cubierta { color: var(--mal); }
.etiqueta.ambigua     { color: var(--ojo); }

/* La traza documental de una llamada: un bloque por consulta al RAG, con los
   pasajes que devolvió de verdad. */
.traza { border-left: 2px solid var(--borde); padding-left: .8rem; margin: .8rem 0; }
.traza .consulta { font-weight: 600; margin: 0 0 .3rem; }
.traza table { font-size: 13px; }
.traza .pasaje td { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                    color: var(--suave); }

@media (max-width: 40rem) {
  .fila-exp { grid-template-columns: 1fr; gap: .25rem; }
}