/* ───────────────────────────────────────────────────────────────────────────
   Estudio Bersta — panel de marketing.
   Colores tomados de bersta.mx para que el panel se sienta parte de la casa.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
    --azul:        #2B5198;
    --azul-oscuro: #1A4E90;
    --azul-deep:   #002855;
    --teal:        #03A6A8;
    --teal-texto:  #027A7C;
    --texto:       #2D3142;
    --muted:       #4b5563;
    --borde:       #e5e7eb;
    --fondo:       #f8f9fa;
    --blanco:      #ffffff;
    --mal:         #b42318;
    --bien:        #067647;
    --ojo:         #b54708;

    --radio: 12px;
    --sombra: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--texto);
    background: var(--fondo);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* ── Barra superior ─────────────────────────────────────────────────────── */

.barra {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding: 14px 20px;
    background: var(--blanco);
    border-bottom: 1px solid var(--borde);
}

.marca {
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: 600; color: var(--azul-deep); text-decoration: none;
    font-size: 1.05rem;
}
.marca b { color: var(--azul); font-weight: 700; }

/* Isotipo de Bersta en CSS: una lupa con el punto cyan al centro. Así no depende
   de un archivo de imagen que puede faltar en un despliegue. */
.lupa {
    width: 22px; height: 22px; border-radius: 50%;
    border: 3px solid var(--azul);
    position: relative; display: inline-block;
}
.lupa::before {
    content: ''; position: absolute;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--teal);
    top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.lupa::after {
    content: ''; position: absolute;
    width: 3px; height: 9px; border-radius: 2px;
    background: var(--azul);
    right: -4px; bottom: -6px; transform: rotate(-45deg);
}

/* ── Medidor de gasto, siempre visible ──────────────────────────────────── */

.medidor {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; border-radius: 999px;
    background: var(--fondo); border: 1px solid var(--borde);
    text-decoration: none; line-height: 1;
}
.medidor .cifra { font-weight: 700; color: var(--texto); font-size: .95rem; }
.medidor .mes   { font-size: .74rem; color: var(--muted); }
.medidor:hover  { border-color: var(--azul); }

/* Encendida: verde y latiendo, porque en este momento está costando dinero. */
.medidor.viva { background: #ecfdf3; border-color: #abefc6; }
.medidor.viva .foco { width: 9px; height: 9px; flex: 0 0 9px; }

/* Al 70% del tope el medidor cambia de color entero: un detalle pequeño no se nota
   en una barra que se ve todo el día. */
.medidor.alerta { background: #fef3f2; border-color: #fecdca; }
.medidor.alerta .cifra { color: var(--mal); }
.medidor .insignia {
    background: var(--mal); color: #fff;
    font-size: .68rem; font-weight: 700;
    padding: 3px 7px; border-radius: 999px;
}

.barra nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.barra nav a { color: var(--muted); text-decoration: none; font-size: .92rem; }
.barra nav a:hover { color: var(--azul); }
.barra .quien { font-size: .92rem; color: var(--texto); font-weight: 500; }
.barra .salir { color: var(--mal); }

/* ── Contenedores ───────────────────────────────────────────────────────── */

.contenido { max-width: 960px; margin: 0 auto; padding: 28px 20px 64px; }
.angosto   { max-width: 440px; margin: 0 auto; padding: 48px 20px 64px; }

h1 { font-size: 1.6rem; margin: 0 0 6px; letter-spacing: -.02em; }
h2 { font-size: 1.15rem; margin: 32px 0 12px; }
.sub { color: var(--muted); margin: 0 0 28px; }

/* ── Tarjetas ───────────────────────────────────────────────────────────── */

.tarjeta {
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 24px;
}

.rejilla {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.modulo { display: block; text-decoration: none; color: inherit; }
.modulo:hover { border-color: var(--azul); }
.modulo h3 { margin: 0 0 4px; font-size: 1rem; color: var(--azul-deep); }
.modulo p  { margin: 0; color: var(--muted); font-size: .9rem; }
.modulo .pronto {
    display: inline-block; margin-top: 10px;
    font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
    color: var(--teal-texto); background: #e6f7f7;
    padding: 3px 8px; border-radius: 999px;
}

/* ── Formularios ────────────────────────────────────────────────────────── */

label { display: block; font-size: .88rem; font-weight: 500; margin: 0 0 6px; }

input[type=text], input[type=email], input[type=password] {
    width: 100%; padding: 11px 13px;
    border: 1px solid var(--borde); border-radius: 10px;
    font: inherit; font-size: 1rem; color: var(--texto);
    background: var(--blanco);
}
input:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(43,81,152,.14);
}

.campo { margin-bottom: 18px; }
.pista { font-size: .82rem; color: var(--muted); margin: 6px 0 0; }

button {
    width: 100%; padding: 12px 16px;
    background: var(--azul); color: #fff;
    border: 0; border-radius: 10px;
    font: inherit; font-weight: 600; font-size: 1rem;
    cursor: pointer;
}
button:hover  { background: var(--azul-oscuro); }
button:disabled { opacity: .6; cursor: progress; }

/* ── Notas ──────────────────────────────────────────────────────────────── */

.nota {
    padding: 12px 14px; border-radius: 10px;
    font-size: .92rem; margin: 0 0 20px;
    border: 1px solid transparent;
}
.nota.mal  { background: #fef3f2; color: var(--mal);  border-color: #fecdca; }
.nota.bien { background: #ecfdf3; color: var(--bien); border-color: #abefc6; }
.nota.ojo  { background: #fffaeb; color: var(--ojo);  border-color: #fedf89; }

/* ── Tablas ─────────────────────────────────────────────────────────────── */

.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th {
    text-align: left; font-size: .74rem; text-transform: uppercase;
    letter-spacing: .05em; color: var(--muted); font-weight: 600;
    padding: 0 12px 10px; border-bottom: 1px solid var(--borde);
}
.tabla td { padding: 12px; border-bottom: 1px solid #f1f2f4; }
.tabla tr:last-child td { border-bottom: 0; }

.etiqueta {
    display: inline-block; font-size: .74rem; font-weight: 600;
    padding: 3px 9px; border-radius: 999px;
}
.etiqueta.temporal { background: #fffaeb; color: var(--ojo); }
.etiqueta.lista    { background: #ecfdf3; color: var(--bien); }

/* ── Estado de la máquina ───────────────────────────────────────────────── */

.estado { display: flex; align-items: center; gap: 14px; }
.estado strong { font-size: 1.1rem; }

/* El foco de "encendida" late a propósito: es lo único en el panel que cuesta
   dinero por minuto, y tiene que llamar la atención al entrar. */
.foco { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 14px; }
.foco.encendida { background: #12b76a; box-shadow: 0 0 0 4px rgba(18,183,106,.18); animation: late 2s ease-in-out infinite; }
.foco.apagada   { background: #d0d5dd; }

@keyframes late { 50% { box-shadow: 0 0 0 9px rgba(18,183,106,.05); } }

/* Quien prefiere menos movimiento en pantalla no tiene por qué aguantarlo. */
@media (prefers-reduced-motion: reduce) { .foco.encendida { animation: none; } }

/* El gasto acumulado se pinta en grande y aparte: es el dato que hace que alguien
   decida apagar. Escondido en una fila de tabla, nadie lo mira. */
.gastado {
    margin-top: 18px; padding: 16px 18px;
    background: linear-gradient(180deg, #fffaeb, #fffdf5);
    border: 1px solid #fedf89; border-radius: var(--radio);
    display: flex; flex-direction: column; gap: 2px;
}
.gastado .rotulo {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--ojo); font-weight: 600;
}
.gastado .cifra { font-size: 1.8rem; font-weight: 700; letter-spacing: -.02em; color: var(--texto); }
.gastado .equivale { font-size: .92rem; color: var(--muted); }

/* El mismo bloque en rojo cuando se pasa el umbral de alerta. */
.gastado.peligro { background: linear-gradient(180deg, #fef3f2, #fffbfa); border-color: #fecdca; }
.gastado.peligro .rotulo { color: var(--mal); }
.gastado.peligro .cifra  { color: var(--mal); }

.barra-tope {
    margin-top: 10px; height: 7px; border-radius: 999px;
    background: rgba(16,24,40,.09); overflow: hidden;
}
.barra-tope span { display: block; height: 100%; background: var(--ojo); border-radius: 999px; }
.gastado.peligro .barra-tope span { background: var(--mal); }

button.peligro { background: var(--mal); }
button.peligro:hover { background: #912018; }
button.secundario { background: var(--teal-texto); }
button.secundario:hover { background: #016062; }

.miga { margin: 0 0 12px; font-size: .9rem; }
.miga a { color: var(--muted); text-decoration: none; }
.miga a:hover { color: var(--azul); }

hr.separa { border: 0; border-top: 1px solid var(--borde); margin: 22px 0; }

.vacio { text-align: center; color: var(--muted); }

/* ── Grabadora y consola ────────────────────────────────────────────────── */

.grabadora { display: flex; align-items: center; gap: 14px; margin: 18px 0 8px; }
button.grabar { width: auto; padding: 11px 20px; background: var(--teal-texto); }
button.grabar.grabando { background: var(--mal); }
.reloj { font-variant-numeric: tabular-nums; font-size: 1.3rem; font-weight: 600; color: var(--muted); }
.reloj.suficiente { color: var(--bien); }

.consola { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.perilla { margin-bottom: 20px; }
.perilla label { display: flex; justify-content: space-between; align-items: baseline; }
.perilla output {
    font-variant-numeric: tabular-nums; font-weight: 700;
    color: var(--azul); font-size: 1rem;
}
.perilla input[type=range] { width: 100%; accent-color: var(--azul); margin: 4px 0 2px; }

textarea {
    width: 100%; padding: 11px 13px; font: inherit; font-size: 1rem;
    border: 1px solid var(--borde); border-radius: 10px; color: var(--texto);
    resize: vertical;
}
textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(43,81,152,.14); }

button.enlace {
    width: auto; background: none; color: var(--azul);
    padding: 0; font-weight: 600; font-size: .9rem; text-decoration: underline;
}
button.enlace:hover { background: none; color: var(--azul-oscuro); }

.prueba { padding: 12px 0; border-bottom: 1px solid #f1f2f4; }
.prueba:last-of-type { border-bottom: 0; }

.confirmar {
    display: flex; align-items: flex-start; gap: 10px;
    font-weight: 400; font-size: .92rem; margin-bottom: 16px;
}
.confirmar input { width: auto; margin-top: 3px; flex: 0 0 auto; }

.tabla .pista { display: block; }

/* ── Acceso ─────────────────────────────────────────────────────────────── */

.entrada-marca { text-align: center; margin-bottom: 28px; }
.entrada-marca .lupa { width: 34px; height: 34px; border-width: 4px; }
.entrada-marca p { margin: 12px 0 0; color: var(--muted); font-size: .92rem; }

/* ── Teléfono ───────────────────────────────────────────────────────────── */

@media (max-width: 560px) {
    .contenido, .angosto { padding-left: 16px; padding-right: 16px; }
    .barra { padding: 12px 16px; }
    .barra nav { gap: 14px; width: 100%; }
    h1 { font-size: 1.35rem; }
    .tarjeta { padding: 18px; }

    /* En pantalla chica la tabla se vuelve ilegible: se apilan las celdas y cada
       una dice a qué columna pertenece. */
    .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
    .tabla thead { display: none; }
    .tabla tr { border-bottom: 1px solid var(--borde); padding: 10px 0; }
    .tabla td { border: 0; padding: 4px 0; }
    .tabla td::before {
        content: attr(data-col) ': ';
        font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
        color: var(--muted); font-weight: 600;
    }
}

/* El acento mexicano se marca en verde: es el que sirve para casi todo el trabajo
   de esta casa, y el que hay que poder distinguir de un vistazo. */
.modulo .pronto.bueno { background: #ecfdf3; color: var(--bien); }

/* ── Ventana modal ──────────────────────────────────────────────────────── */

.modal {
    width: min(620px, 94vw); padding: 0; border: 0;
    border-radius: 14px; box-shadow: 0 20px 48px rgba(16,24,40,.22);
    color: var(--texto);
}
.modal::backdrop { background: rgba(16,24,40,.55); }

.modal-cab {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; border-bottom: 1px solid var(--borde);
}
.modal-cab h3 { margin: 0; font-size: 1.05rem; }

.cerrar {
    width: auto; padding: 0 6px; background: none; color: var(--muted);
    font-size: 1.6rem; line-height: 1;
}
.cerrar:hover { background: none; color: var(--texto); }

/* Cuerpo con altura acotada: en una laptop el diálogo no debe pasarse de la
   pantalla, o el botón de guardar queda fuera y nadie lo encuentra. */
.modal-cuerpo { padding: 22px; max-height: min(64vh, 560px); overflow-y: auto; }

.modal-pie {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 22px; border-top: 1px solid var(--borde); background: var(--fondo);
    border-radius: 0 0 14px 14px;
}
.modal-pie button { width: auto; padding: 11px 22px; }

/* ── Guion tipo karaoke ─────────────────────────────────────────────────── */

.guion-cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ritmo { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--muted); font-weight: 400; margin: 0; }
.ritmo input[type=range] { width: 110px; accent-color: var(--azul); }

.guion {
    margin: 10px 0 4px; padding: 16px 18px;
    max-height: 190px; overflow-y: auto;
    background: var(--fondo); border: 1px solid var(--borde); border-radius: 10px;
    /* Texto grande y con aire: se lee a medio metro de la pantalla, de corrido. */
    font-size: 1.12rem; line-height: 1.85;
}
.guion span { transition: color .15s, background-color .15s; }

/* Lo ya leído se apaga; la palabra actual se marca. El contraste entre las tres
   capas es lo que deja ver de un vistazo dónde va uno. */
.guion span.leida  { color: #9aa2ae; }
.guion span.activa {
    background: var(--azul); color: #fff;
    border-radius: 5px; padding: 1px 3px; font-weight: 600;
}

/* Género junto al nombre de la voz: es el primer filtro mental al elegir una. */
.modulo h3 .genero {
    font-weight: 400; font-size: .82rem; color: var(--muted);
    margin-left: 4px;
}

/* ── Indicador de generación ────────────────────────────────────────────── */

.progreso {
    display: flex; align-items: center; gap: 14px;
    margin-top: 14px; padding: 14px 16px;
    background: var(--fondo); border: 1px solid var(--borde); border-radius: 10px;
}
.progreso strong { display: block; font-size: .95rem; }
.progreso .transcurrido {
    font-size: .85rem; color: var(--muted);
    font-variant-numeric: tabular-nums;   /* el número no "baila" al cambiar */
}

.rueda {
    width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%;
    border: 3px solid rgba(43,81,152,.2); border-top-color: var(--azul);
    animation: gira .8s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

/* Quien prefiere menos movimiento ve un punto que late en vez de girar. */
@media (prefers-reduced-motion: reduce) {
    .rueda { animation: late 1.6s ease-in-out infinite; border-top-color: rgba(43,81,152,.2); background: var(--azul); }
}

/* ── Galería de piezas ──────────────────────────────────────────────────── */

.galeria {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.pieza {
    background: var(--blanco); border: 1px solid var(--borde);
    border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra);
}

/* Proporción fija: sin ella la cuadrícula da saltos según va cargando cada
   imagen, y se vuelve incómoda de mirar. */
.lienzo {
    aspect-ratio: 1 / 1; background: var(--fondo);
    display: flex; align-items: center; justify-content: center;
}
.lienzo img, .lienzo video { width: 100%; height: 100%; object-fit: cover; display: block; }

.esperando { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.esperando .que { font-size: .8rem; color: var(--muted); }

.fallo { padding: 14px; font-size: .8rem; color: var(--mal); text-align: center; }

.pie { margin: 0; padding: 10px 12px; font-size: .82rem; color: var(--muted); }
.pie .tipo {
    display: inline-block; margin-right: 6px;
    font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
    padding: 2px 7px; border-radius: 999px; font-weight: 700;
}
.pie .tipo.imagen { background: #e6f7f7; color: var(--teal-texto); }
.pie .tipo.video  { background: #eef2ff; color: var(--azul); }

select {
    width: 100%; padding: 11px 13px; font: inherit; font-size: 1rem;
    border: 1px solid var(--borde); border-radius: 10px;
    background: var(--blanco); color: var(--texto);
}
select:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(43,81,152,.14); }

/* ⚠️ EL ATRIBUTO `hidden` DEBE GANARLE A CUALQUIER `display` DE CLASE.
   El navegador aplica `[hidden] { display: none }` con la especificidad más baja que
   existe, así que un simple `.progreso { display: flex }` lo pisa y el elemento se ve
   aunque el HTML diga que está oculto. Pasó con el indicador de "Generando…", que
   aparecía nada más entrar a la consola sin que nadie hubiera pulsado nada.
   Esta regla va AL FINAL a propósito, para cubrir también lo que se agregue después. */
[hidden] { display: none !important; }

/* La grabación original va arriba del todo y visualmente aparte: es la referencia
   contra la que se compara todo lo demás, no una pieza más de la consola. */
.muestra-orig { margin-bottom: 20px; border-left: 3px solid var(--teal); }
.muestra-orig strong { font-size: .95rem; }