:root {
    --black-body: #1a1a1a;
    --lcd-bg: #000a1a;
    --cyan: #00ffff;
}

body {
    display: flex; justify-content: center; align-items: center;
    height: 100dvh; background-color: #333; margin: 0; font-family: Arial, sans-serif;
    overflow: hidden;
}

.device-container {
    width: 95vw; max-width: 360px; height: 95dvh;
    background-color: var(--black-body); border-radius: 40px;
    border: 8px solid #dad7d7; padding: 20px; display: flex;
    flex-direction: column; gap: 15px; box-shadow: 0 10px 40px rgba(0,0,0,0.8);
}

.top-bar { width: 100%; display: flex; justify-content: center; margin-bottom: 5px; }
.indicator { width: 10px; height: 10px; background: #00ff00; border-radius: 50%; box-shadow: 0 0 8px #00ff00; }

/* SOLUCIÓN AL DESBORDE */
.screen {
    width: 100%; flex: 1; 
    background-color: var(--lcd-bg); border: 3px solid var(--cyan);
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 20px #000; overflow: hidden; /* El borde no se mueve */
}

#display-scroll-area {
    width: 100%; height: 90%; /* Un poco menos que el total para dejar margen */
    overflow-y: auto; /* Aquí ocurre el scroll si el texto es largo */
    padding: 5px;
}

#display-area { width: 100%; color: var(--cyan); text-align: center; }

#line1 { font-size: 0.85rem; border-bottom: 1px solid #004466; margin-bottom: 15px; padding-bottom: 5px; opacity: 0.6; }
#line2 { font-size: 1.3rem; font-weight: bold; line-height: 1.4; word-wrap: break-word; }
#line5 { font-size: 2.5rem; font-weight: 900; margin-top: 15px; text-shadow: 0 0 10px var(--cyan); }

#pin-input {
    background: transparent; border: 2px solid #004466; color: var(--cyan);
    font-size: 2.5rem; width: 100%; text-align: center; font-family: monospace; outline: none;
}

.buttons-grid {
    width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); 
    gap: 12px; padding: 10px 0;
}

.button {
    width: 100%; height: 65px; display: flex; justify-content: center;
    align-items: center; font-size: 0.8rem; font-weight: bold;
    border-radius: 15px; cursor: pointer; color: #fff;
    border: 2px solid rgba(0,0,0,0.4); box-shadow: 0 4px 0 #000;
    text-transform: uppercase; transition: 0.1s;
}

.button:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }
.function { background: linear-gradient(#4a4e69, #222); border-color: var(--cyan); }
.si { background: #27ae60; }
.no { background: #e74c3c; }
.abs { background: #f39c12; }
.exit { background: #2980b9; }

.footer-logo { color: #f8f5f5; font-size: 0.65rem; letter-spacing: 2px; text-align: center; margin-top: 5px; }

/* =========================================================
   📱 MODO CELULAR / TABLET (APP NATIVA)
   ========================================================= */
@media screen and (max-width: 768px) {
    /* 1. El fondo de la página se fusiona con el aparato */
    body {
        background-color: var(--black-body); 
    }

    /* 2. Le quitamos la carcasa de "plástico", bordes y curvas */
    .device-container {
        width: 100vw;
        max-width: 100%;
        height: 100dvh;
        border: none; 
        border-radius: 0; 
        box-shadow: none;
        padding: 15px; /* Margen nativo de celular */
    }

    /* 3. Escondemos el bombillito LED verde (ya no es un control físico) */
    .top-bar {
        display: none; 
    }

    /* 4. Ajustamos la pantalla negra para que no sea tan larga */
    .screen {
        border-width: 2px; /* Borde más fino para pantallas pequeñas */
        border-radius: 8px;
        flex: 0.55; /* Le roba un poco de altura a la pantalla para dársela a los botones */
    }

    /* Letra de la pregunta más grande para los abuelitos */
    #line2 {
        font-size: 1.6rem; 
    }

    /* 5. Botones gigantes tipo cajero automático */
    .buttons-grid {
        gap: 15px; /* Más espacio entre botones para no espichar dos a la vez */
        padding: 15px 0;
        flex: 0.45; /* Zona de botones más alta */
        align-content: end; /* Empuja los botones hacia abajo */
    }

    .button {
        height: 85px; /* ¡Botones bien altos! */
        font-size: 1rem; 
        border-radius: 12px;
    }

    .footer-logo {
        margin-bottom: 15px;
        font-size: 0.75rem;
    }
}