/* MY GENIE On Set · negro y amarillo, blanco para leer, rojo solo para riesgo.
   Una acción principal por pantalla; todo alcanzable con el pulgar. */
:root {
  --fondo: #080808; --panel: rgba(255,255,255,.06); --panel-2: rgba(255,255,255,.10); --borde: rgba(255,255,255,.14);
  --tinta: #F7F7F5; --tinta-2: #C9C9C4; --tinta-3: #8E8E88; --genie: #FFD400; --riesgo: #FF4D4D; --ok: #37D67A;
  --r: 18px; --r-sm: 12px; --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { color-scheme: dark; }
body { min-height: 100svh; background: radial-gradient(900px 500px at 50% -10%, rgba(255,212,0,.10), transparent 60%), var(--fondo); color: var(--tinta); font: 15px/1.5 var(--fuente); -webkit-font-smoothing: antialiased; }
.pantalla { max-width: 560px; margin: 0 auto; padding: 18px 18px 40px; min-height: 100svh; display: flex; flex-direction: column; }
.marca { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 28px 0 22px; }
.marca img { height: 26px; filter: brightness(0) invert(1); }
.marca span { font-size: 11px; font-weight: 800; letter-spacing: .22em; color: var(--genie); }
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r); padding: 22px; backdrop-filter: blur(18px); }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; background: rgba(0,0,0,.35); border-radius: 999px; margin-bottom: 18px; }
.tabs button { border: 0; background: transparent; color: var(--tinta-3); font: inherit; font-weight: 700; font-size: 13px; padding: 10px; border-radius: 999px; cursor: pointer; }
.tabs button.on { background: var(--genie); color: #111; }
.form { display: grid; gap: 14px; }
.form h1 { font-size: 24px; letter-spacing: -.02em; line-height: 1.15; }
.form > p { color: var(--tinta-2); font-size: 14px; margin-top: -6px; }
label { display: grid; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
label small { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--tinta-3); }
input { width: 100%; padding: 15px 16px; border: 1px solid var(--borde); border-radius: var(--r-sm); background: rgba(0,0,0,.35); color: var(--tinta); font: inherit; font-size: 17px; }
input:focus { outline: 2px solid var(--genie); outline-offset: 1px; border-color: transparent; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 20px; border-radius: 999px; border: 1px solid var(--borde); background: var(--panel-2); color: var(--tinta); font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; text-decoration: none; transition: transform .1s ease, background .15s ease; }
.btn:active { transform: scale(.97); }
.btn.principal { background: var(--genie); color: #111; border-color: transparent; }
.btn.grande { padding: 18px 22px; font-size: 17px; width: 100%; }
.btn.chico { padding: 9px 14px; font-size: 13px; }
.btn.fantasma { background: transparent; }
.btn.riesgo { color: var(--riesgo); border-color: rgba(255,77,77,.4); }
.btn[disabled] { opacity: .5; cursor: default; }
.error { margin-top: 14px; padding: 12px 14px; border-radius: var(--r-sm); background: rgba(255,77,77,.14); color: #FFB3B3; font-size: 14px; }
.legal { margin-top: auto; text-align: center; font-size: 11px; color: var(--tinta-3); padding-top: 24px; }

.cab { display: flex; align-items: center; gap: 12px; padding: 6px 0 18px; }
.cab img { height: 22px; filter: brightness(0) invert(1); }
.cab div { flex: 1; display: grid; line-height: 1.2; }
.cab strong { font-size: 14px; } .cab small { font-size: 12px; color: var(--tinta-3); }
main { display: grid; gap: 14px; }
.pie { margin-top: auto; padding-top: 26px; display: grid; gap: 10px; justify-items: center; }
.pie-nota { font-size: 11px; color: var(--tinta-3); text-align: center; }

/* El llamado de hoy: lo único que importa cabe en una pantalla. */
.rotulo { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--genie); }
.llamado { background: linear-gradient(160deg, rgba(255,212,0,.16), rgba(255,255,255,.04)); border: 1px solid rgba(255,212,0,.35); border-radius: var(--r); padding: 22px; display: grid; gap: 14px; }
.llamado h2 { font-size: 22px; letter-spacing: -.02em; line-height: 1.15; }
.llamado .cuando { font-size: 15px; color: var(--tinta-2); }
.hora { display: grid; gap: 2px; }
.hora b { font-size: 56px; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hora span { font-size: 13px; color: var(--tinta-2); }
.datos { display: grid; gap: 10px; }
.dato { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 14px; color: var(--tinta-2); }
.dato b { color: var(--tinta); display: block; }
.dato i { font-style: normal; font-size: 16px; line-height: 1.3; }
.acciones { display: grid; gap: 10px; }
.acciones .fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.estado { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(55,214,122,.14); color: var(--ok); font-size: 13px; font-weight: 800; }
.estado.riesgo { background: rgba(255,77,77,.14); color: var(--riesgo); }
.estado.camino { background: rgba(255,212,0,.16); color: var(--genie); }

.bloque { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r); padding: 18px; display: grid; gap: 10px; }
.bloque h3 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.agenda { list-style: none; display: grid; gap: 8px; }
.agenda li { display: grid; grid-template-columns: 54px 1fr; gap: 10px; font-size: 14px; }
.agenda time { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--genie); }
.agenda span { color: var(--tinta-2); } .agenda b { display: block; color: var(--tinta); }
.contacto { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; }
.contacto small { display: block; color: var(--tinta-3); }
.lista { display: grid; gap: 10px; }
.prox { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r-sm); color: inherit; text-decoration: none; }
.prox b { display: block; } .prox small { color: var(--tinta-3); }
.vacio { text-align: center; padding: 40px 20px; color: var(--tinta-2); display: grid; gap: 8px; justify-items: center; }
.vacio strong { color: var(--tinta); font-size: 18px; }

.avisos { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; gap: 8px; width: min(92vw, 420px); z-index: 50; }
.aviso { padding: 12px 16px; border-radius: 14px; background: #1A1A1A; border: 1px solid var(--borde); box-shadow: 0 12px 40px rgba(0,0,0,.5); font-size: 14px; animation: sube .25s ease; }
.aviso b { display: block; color: var(--genie); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
@keyframes sube { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }