/* ================================================================
   stylesEscritor.css — Módulo del Escritor Braille
   Complementa styles.css y stylesTraductor.css (reutiliza .btn-export,
   .braille-toast) · Solo afecta a escritorBraille.html
   Misma paleta del proyecto:
     #2f2c2b  → oscuro (celdas, cajetín)
     #4a3728  → marrón medio (puntos inactivos)
     #fd8d32  → naranja (acento principal)
     aliceblue → texto claro
   ================================================================ */


/* ── Contenedor: cajetín a la izquierda, salida a la derecha ──── */

.escritor-layout {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: 24px;
    margin-top: 20px;
    align-items: start;
}


/* ── Panel del cajetín interactivo ─────────────────────────────── */

.escritor-panel {
    background: #2f2c2b;
    border: 2px solid #fd8d32;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.escritor-cajetin {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 14px;
    padding: 22px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
}

/* Cada punto es un <button> real: operable por teclado y anunciado
   como presionado/no presionado por lectores de pantalla. */
.punto-interactivo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #4a3728;
    background: #4a3728;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
}

.punto-interactivo:hover {
    border-color: rgba(253, 141, 50, 0.6);
}

.punto-interactivo:active {
    transform: scale(0.94);
}

.punto-interactivo.activo {
    background: #fd8d32;
    border-color: #fd8d32;
}

.punto-interactivo:focus-visible {
    outline: 3px solid aliceblue;
    outline-offset: 2px;
}

.escritor-acciones {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.escritor-acciones-fila {
    display: flex;
    gap: 10px;
    width: 100%;
}

.escritor-acciones-fila .btn-export {
    flex: 1;
    justify-content: center;
    padding: 9px 12px;
}

/* Variante de acento peligroso para "Borrar última celda" */
.btn-export.btn-danger {
    border-color: #d85a30;
}

.btn-export.btn-danger:hover {
    background-color: #d85a30;
}


/* ── Panel de resultado ────────────────────────────────────────── */

.escritor-resultado-panel {
    background: #2f2c2b;
    border: 2px solid #fd8d32;
    border-radius: 8px;
    padding: 20px;
}

.escritor-contador {
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;
    color: #ffffff;
    margin: 0 0 10px;
}

#escritor-salida {
    min-height: 90px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    font-size: 40px;
    letter-spacing: 6px;
    line-height: 1.6;
    word-break: break-all;
    color: aliceblue;
}

#escritor-salida:empty::after {
    content: 'Las celdas insertadas aparecerán aquí…';
    color: #6a5540;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-style: italic;
    letter-spacing: normal;
}


/* ── Responsive: cajetín arriba, resultado debajo en móvil ──────── */

@media (max-width: 768px) {
    .escritor-layout {
        grid-template-columns: 1fr;
    }

    .escritor-panel,
    .escritor-resultado-panel {
        padding: 16px;
    }

    .punto-interactivo {
        width: 44px;
        height: 44px;
    }

    #escritor-salida {
        font-size: 30px;
        letter-spacing: 4px;
    }
}