/* La bandeja hereda el look de la Platform de MARKINTAI: fondo oscuro azulado,
   teal de acento, pastillas de estado con su color. Todo en un archivo porque
   la app es una sola pantalla. */
:root {
  --bg: #03080D; --surface: #071824; --panel: rgba(255,255,255,.05);
  --border: rgba(255,255,255,.10); --text: #EAF6F8; --muted: #90A8AE;
  --teal: #009DA4; --teal-bright: #00B1B9;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text);
  font: 14px/1.45 'Segoe UI', system-ui, sans-serif; min-height: 100vh; }
header { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 22px; border-bottom: 1px solid var(--border); background: var(--surface); }
.logo { font-weight: 800; letter-spacing: .04em; color: var(--teal-bright); }
.logo span { color: var(--muted); font-weight: 600; }
main { padding: 18px 22px; max-width: 1400px; margin: 0 auto; }

.login { max-width: 360px; margin: 12vh auto; display: grid; gap: 12px; text-align: center; }
/* display:grid le gana al atributo hidden — la salida se cierra explícita
   (la misma trampa que ya está documentada en la Platform). */
.login[hidden] { display: none; }
.login h1 { font-size: 22px; }
.login p { color: var(--muted); }
.login input { background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 10px; padding: 12px 14px; font: inherit; }
.login button { background: linear-gradient(135deg, #00B1B9, #009DA4); color: #00232E;
  border: 0; border-radius: 999px; padding: 12px; font-weight: 800; cursor: pointer; font: inherit; }
.error { background: rgba(255,90,90,.12); border: 1px solid rgba(255,90,90,.4); color: #FFB9B9;
  border-radius: 10px; padding: 10px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.chip { border: 1px solid var(--border); background: var(--panel); border-radius: 999px;
  padding: 6px 14px; color: var(--muted); }
.chip b { color: var(--teal-bright); }
.mini-btn { border: 1px solid var(--border); background: var(--panel); border-radius: 999px;
  padding: 6px 14px; color: var(--text); text-decoration: none; cursor: pointer; font: inherit; }
.mini-btn:hover { border-color: var(--teal); }
.link-btn { background: none; border: 0; color: var(--teal-bright); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; font: inherit; padding: 0; }
.empty { color: var(--muted); text-align: center; padding: 60px 0; line-height: 1.7; }

.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal-bright); padding: 10px 12px; background: var(--surface);
  position: sticky; top: 0; }
.tabla td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.mini { display: block; color: var(--muted); font-size: 11.5px; margin-top: 3px; line-height: 1.4; }
a { color: var(--teal-bright); }

select.estado { appearance: none; -webkit-appearance: none; --c: var(--muted);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c);
  border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
select.estado option { color: var(--text); background: var(--surface); }
.pe-nueva { --c: #58B7FF; } .pe-preseleccionada { --c: #E8C468; }
.pe-entrevista { --c: #C792EA; } .pe-descartada { --c: #8FA7B5; }
.pe-contratada { --c: #3BD68A; font-weight: 800; }
.rechazo { margin-top: 6px; }
.rechazo[hidden] { display: none; }

.det > td { background: var(--panel); padding: 14px 16px; }
.cajas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.caja h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin-bottom: 6px; }
.caja > div { white-space: pre-wrap; font-size: 13px; line-height: 1.5; }
.trabajos { margin-bottom: 14px; }
/* El recuadro se arma con plantilla indentada: sin el normal, el pre-wrap
   heredado de .caja pinta cada salto del código como hueco real. */
.caja > div.trabajo { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  margin-top: 6px; font-size: 13px; white-space: normal; }
.trabajo .logro { white-space: pre-wrap; }
.nota { width: 100%; min-height: 60px; margin-top: 12px; resize: vertical; font: inherit;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.meta { margin-top: 8px; font-size: 11px; color: var(--muted); }

#aviso { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--teal); border-radius: 999px;
  padding: 8px 18px; opacity: 0; transition: opacity .3s; pointer-events: none; }
#aviso.on { opacity: 1; }

@media (max-width: 900px) {
  .cajas { grid-template-columns: 1fr; }
  main { padding: 12px; }
  .tabla th:nth-child(1), .tabla td:nth-child(1) { display: none; } /* fecha fuera en celular */
}