/* RENG — sistema de diseño
   Referente: teléfono público de calle (caseta azul, carcasa de acero, display de fósforo ámbar) */
:root{
    --asfalto:#14181d;        /* noche de calle */
    --asfalto-2:#1a2027;
    --acero:#2a323b;          /* carcasa */
    --acero-claro:#3d4854;
    --borde:#3d4854;
    --ladatel:#1268b3;        /* azul de caseta telefónica */
    --ladatel-claro:#2f8fe0;
    --fosforo:#ffb62e;        /* LCD ámbar */
    --fosforo-tenue:#7a5a1e;
    --lcd-fondo:#231a08;
    --ok:#4bd47b;
    --peligro:#e5484d;
    --texto:#dbe3ea;
    --texto-tenue:#8a97a5;
    --f-display:'Chakra Petch',sans-serif;
    --f-mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    background:var(--asfalto);
    background-image:radial-gradient(ellipse 80% 50% at 50% -10%, rgba(18,104,179,.18), transparent);
    color:var(--texto);
    font:15px/1.5 var(--f-mono);
    min-height:100vh;
}
a{color:var(--ladatel-claro);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--ladatel-claro);outline-offset:2px}

/* ------- barra superior tipo señalética ------- */
.barra{
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 18px;border-bottom:1px solid var(--borde);
    background:linear-gradient(180deg, #1c232b, #171d23);
}
.barra .logo{
    font:700 20px var(--f-display);letter-spacing:4px;color:#fff;
    display:flex;align-items:center;gap:10px;
}
.barra .logo .punto{
    width:12px;height:12px;border-radius:50%;background:var(--ladatel);
    box-shadow:0 0 10px var(--ladatel-claro);
}
.barra nav{display:flex;gap:18px;font-size:13px;text-transform:uppercase;letter-spacing:1px}

/* ------- carcasa de teléfono ------- */
.telefono{
    width:min(380px, 94vw);
    margin:28px auto 60px;
    background:linear-gradient(180deg, #333d48, #262e37 30%, #222932);
    border:1px solid #47535f;
    border-radius:18px;
    padding:22px 20px 26px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 30px 80px rgba(0,0,0,.6);
    position:relative;
}
.telefono::before{ /* tornillos */
    content:'';position:absolute;inset:10px;pointer-events:none;
    background:
        radial-gradient(circle 4px at 6px 6px, #10151a 40%, #4a5663 45%, transparent 60%),
        radial-gradient(circle 4px at calc(100% - 6px) 6px, #10151a 40%, #4a5663 45%, transparent 60%),
        radial-gradient(circle 4px at 6px calc(100% - 6px), #10151a 40%, #4a5663 45%, transparent 60%),
        radial-gradient(circle 4px at calc(100% - 6px) calc(100% - 6px), #10151a 40%, #4a5663 45%, transparent 60%);
}
.placa{
    text-align:center;margin-bottom:14px;
    font:700 13px var(--f-display);letter-spacing:5px;color:#9fb4c7;
    text-transform:uppercase;
}
.placa b{color:#fff}

/* ------- display LCD ------- */
.lcd{
    background:var(--lcd-fondo);
    border:1px solid #4a3a14;
    border-radius:8px;
    padding:14px 16px;
    min-height:92px;
    box-shadow:inset 0 4px 14px rgba(0,0,0,.7);
    display:flex;flex-direction:column;justify-content:center;gap:6px;
    position:relative;overflow:hidden;
}
.lcd::after{ /* barrido sutil de fósforo */
    content:'';position:absolute;inset:0;pointer-events:none;
    background:repeating-linear-gradient(0deg, rgba(255,182,46,.03) 0 1px, transparent 1px 3px);
}
.lcd .linea1{font:600 12px var(--f-mono);color:var(--fosforo-tenue);letter-spacing:2px;text-transform:uppercase;min-height:16px}
.lcd .linea2{font:600 30px var(--f-mono);color:var(--fosforo);letter-spacing:6px;min-height:38px;text-shadow:0 0 14px rgba(255,182,46,.4)}
.lcd .linea3{font:400 12px var(--f-mono);color:var(--fosforo-tenue);letter-spacing:1px;min-height:16px}
.lcd.parpadeo .linea2{animation:parp 1s steps(2) infinite}
@keyframes parp{50%{opacity:.35}}

/* ------- teclado metálico ------- */
.teclado{
    display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
    margin-top:18px;
}
.tecla{
    aspect-ratio:1.35;
    border-radius:10px;
    border:1px solid #4a5663;
    background:linear-gradient(180deg, #46525f, #313b45 55%, #2a333c);
    color:#eef3f8;
    font:600 22px var(--f-display);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 3px 0 #171d23, 0 5px 8px rgba(0,0,0,.4);
    position:relative;
    transition:transform .04s, box-shadow .04s, filter .1s;
    user-select:none;
}
.tecla small{display:block;font:400 8px var(--f-mono);letter-spacing:2px;color:#9fb4c7;margin-top:-2px}
.tecla:active, .tecla.presionada{
    transform:translateY(3px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 #171d23, 0 1px 3px rgba(0,0,0,.4);
    filter:brightness(1.1);
}

/* ------- botones de acción ------- */
.acciones{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.btn{
    padding:14px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.12);
    font:700 15px var(--f-display);letter-spacing:2px;color:#fff;
    box-shadow:0 3px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);
    transition:transform .04s, box-shadow .04s, filter .1s;
}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 rgba(0,0,0,.5)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-llamar{background:linear-gradient(180deg,#3fbb6c,#2c9152)}
.btn-colgar{background:linear-gradient(180deg,#e5484d,#b23036)}
.btn-azul{background:linear-gradient(180deg,var(--ladatel-claro),var(--ladatel))}
.btn-gris{background:linear-gradient(180deg,#4a5663,#39434e)}
.btn.ancho{grid-column:1 / -1}

/* ------- pie de placa ------- */
.pie-tel{
    margin-top:16px;text-align:center;
    font:400 10px var(--f-mono);color:#6b7885;letter-spacing:2px;text-transform:uppercase;
}
.pie-tel a{color:#9fb4c7}

/* ------- estado (píldora) ------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:11px;letter-spacing:1px;text-transform:uppercase;border:1px solid var(--borde)}
.pill::before{content:'';width:8px;height:8px;border-radius:50%}
.pill.libre{color:var(--ok)} .pill.libre::before{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.pill.ocupado{color:var(--fosforo)} .pill.ocupado::before{background:var(--fosforo);box-shadow:0 0 8px var(--fosforo)}
.pill.fuera{color:var(--texto-tenue)} .pill.fuera::before{background:#5a6673}

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