/* Armonía GT — estilos base
   Paleta inspirada en los tejidos guatemaltecos: jade, terracota, oro.
   Accesible en claro y oscuro, alto contraste. */

:root {
    --jade:      #0f7d6b;
    --jade-d:    #0a5c4f;
    --terra:     #c65a3a;
    --oro:       #d99a2b;
    --tinta:     #1c2321;
    --papel:     #f7f4ee;
    --papel-2:   #efe9df;
    --linea:     #ddd4c6;
    --texto:     #1c2321;
    --texto-2:   #5c6660;
    --ok:        #2e7d32;
    --alerta:    #c62828;
    --aviso:     #b26a00;
    --radio:     14px;
    --sombra:    0 2px 10px rgba(28,35,33,.08), 0 8px 30px rgba(28,35,33,.06);
    --fuente:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
    :root {
        --papel:   #171b1a;
        --papel-2: #1f2523;
        --linea:   #333b39;
        --texto:   #eef1ef;
        --texto-2: #a8b2ae;
        --tinta:   #eef1ef;
        --sombra:  0 2px 10px rgba(0,0,0,.3), 0 8px 30px rgba(0,0,0,.35);
    }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--fuente);
    background: var(--papel);
    color: var(--texto);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--jade); }

/* Encabezado */
.top {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px;
    background: linear-gradient(100deg, var(--jade-d), var(--jade));
    color: #fff;
    box-shadow: var(--sombra);
}
.top .logo {
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--oro); color: var(--tinta);
    display: grid; place-items: center; font-weight: 800; font-size: 20px;
}
.top h1 { font-size: 1.15rem; margin: 0; font-weight: 700; letter-spacing: .2px; }
.top .sub { font-size: .78rem; opacity: .9; }
.top .spacer { flex: 1; }

/* Indicador del servicio de voz */
.estado-voz {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .8rem; padding: 6px 12px; border-radius: 999px;
    background: rgba(255,255,255,.15);
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: #999; }
.dot.on  { background: #7be0a0; box-shadow: 0 0 0 3px rgba(123,224,160,.25); }
.dot.off { background: #ff8a8a; box-shadow: 0 0 0 3px rgba(255,138,138,.2); }

.wrap { max-width: 1100px; margin: 0 auto; padding: 22px 20px 60px; }

/* Tarjetas y controles */
.card {
    background: var(--papel-2); border: 1px solid var(--linea);
    border-radius: var(--radio); padding: 18px; box-shadow: var(--sombra);
}
label { font-size: .82rem; color: var(--texto-2); font-weight: 600; }
input[type=text], select, textarea {
    width: 100%; padding: 11px 13px; margin-top: 5px;
    border: 1px solid var(--linea); border-radius: 10px;
    background: var(--papel); color: var(--texto); font-size: 1rem;
    font-family: inherit;
}
textarea { resize: vertical; min-height: 60px; }
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 18px; border: none; border-radius: 10px;
    background: var(--jade); color: #fff; font-weight: 700; font-size: .95rem;
    cursor: pointer; font-family: inherit; transition: filter .15s, transform .05s;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn.sec { background: var(--papel); color: var(--texto); border: 1px solid var(--linea); }
.btn.terra { background: var(--terra); }
.btn.grande { padding: 16px 24px; font-size: 1.05rem; border-radius: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Consola de dos columnas */
.consola { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 820px) { .consola { grid-template-columns: 1fr; } }

.col h2 { font-size: 1rem; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.col .quien { font-size: .78rem; color: var(--texto-2); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }

/* Candidatos de frase */
.cand {
    border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px;
    margin-top: 10px; background: var(--papel); cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.cand:hover { border-color: var(--jade); box-shadow: var(--sombra); }
.cand .es { font-weight: 600; }
.cand .maya { color: var(--jade); font-size: .95rem; margin-top: 4px; }
.cand .meta { display: flex; gap: 8px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.tag {
    font-size: .7rem; padding: 3px 9px; border-radius: 999px; font-weight: 700;
    background: var(--papel-2); border: 1px solid var(--linea); color: var(--texto-2);
}
.tag.validado { background: #e4f4e6; color: var(--ok); border-color: #bfe3c4; }
.tag.borrador { background: #fff3d9; color: var(--aviso); border-color: #f0dca6; }
.tag.pendiente { background: #fdecec; color: var(--alerta); border-color: #f4c9c9; }
.tag.num { background: #eaf0fb; color: #2555b0; border-color: #cbdbf5; }
@media (prefers-color-scheme: dark) {
    .tag.validado { background: #14361c; border-color: #235c2e; }
    .tag.borrador { background: #3a2e10; border-color: #6b5316; }
    .tag.pendiente { background: #3a1717; border-color: #6b2626; }
    .tag.num { background: #14233f; border-color: #274b86; }
}

/* Panel de números en pantalla (montos, fechas, cuentas) */
.numeros {
    margin-top: 14px; border: 2px dashed var(--oro); border-radius: 12px;
    padding: 14px; background: rgba(217,154,43,.06);
}
.numeros .grande { font-size: 2rem; font-weight: 800; letter-spacing: 1px; }
.numeros .etq { font-size: .78rem; color: var(--texto-2); font-weight: 600; }

/* Transcripción del cliente */
.transcripcion {
    margin-top: 10px; padding: 14px; border-radius: 12px; background: var(--papel);
    border: 1px solid var(--linea); min-height: 60px;
}
.confianza { height: 8px; border-radius: 999px; background: var(--linea); overflow: hidden; margin-top: 8px; }
.confianza > i { display: block; height: 100%; background: var(--jade); }

/* Registro / acta */
.turnos { margin-top: 10px; }
.turno { padding: 10px 14px; border-radius: 10px; margin-top: 8px; max-width: 85%; }
.turno.asesor  { background: #e7f1ef; border: 1px solid #cfe4df; }
.turno.cliente { background: #faefe6; border: 1px solid #f0dbc9; margin-left: auto; }
.turno.sistema { background: var(--papel-2); border: 1px dashed var(--linea); font-size: .88rem; color: var(--texto-2); }
@media (prefers-color-scheme: dark) {
    .turno.asesor  { background: #14302b; border-color: #235049; }
    .turno.cliente { background: #33241a; border-color: #5c4130; }
}
.turno .m { color: var(--jade); font-size: .9rem; }

/* Avisos */
.banner {
    padding: 12px 16px; border-radius: 12px; margin-bottom: 16px;
    display: flex; gap: 10px; align-items: flex-start; font-size: .9rem;
}
.banner.info { background: #eaf0fb; color: #23457e; border: 1px solid #cbdbf5; }
.banner.warn { background: #fff3d9; color: var(--aviso); border: 1px solid #f0dca6; }
@media (prefers-color-scheme: dark) {
    .banner.info { background: #14233f; color: #a9c4f5; border-color: #274b86; }
    .banner.warn { background: #3a2e10; color: #e8c877; border-color: #6b5316; }
}

.muted { color: var(--texto-2); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .grid2 { grid-template-columns: 1fr; } }
.mt { margin-top: 16px; }
.rec-on { animation: pulse 1.1s infinite; }
@keyframes pulse { 0%,100% { filter: brightness(1);} 50% { filter: brightness(1.25);} }