/* Panel — consola de recepción. Jerarquía con líneas finas y tono; sin sombras decorativas.
   Referencias: Linear (estructura y densidad), Attio (tablas y fichas), Aircall (llamadas). */
:root { --serie-1: #2F5FD8; --serie-2: #0E9F9A; }
:root[data-tema="oscuro"] { --serie-1: #7FA1F5; --serie-2: #3FC1BB; }
*, *::before, *::after { box-sizing: border-box; }
body { line-height: 1.45; overflow-x: hidden; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: var(--t-20); }
h2 { font-size: var(--t-14); }
h3 { font-size: var(--t-13); }
p { margin: 0; }
.ic { flex: none; display: inline-block; vertical-align: middle; }
.oculto { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.suave { color: var(--tinta-2); }
.tenue { color: var(--tinta-3); }
.peq { font-size: var(--t-12); }
.mediano { font-size: var(--t-13); }
.negrita { font-weight: 600; }
.fila { display: flex; align-items: center; gap: var(--esp-2); }
.fila-espacio { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); flex-wrap: wrap; }
.apilado { display: flex; flex-direction: column; gap: var(--esp-3); }
.derecha { text-align: right; }
.truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { white-space: nowrap; }

/* ---------- Estructura ---------- */
.shell { display: grid; grid-template-columns: var(--riel) 1fr; min-height: 100vh; }
.riel { position: sticky; top: 0; height: 100vh; background: var(--superficie-2); display: flex; flex-direction: column; padding: 14px 12px; gap: 4px; }
.riel-marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; }
.riel-marca .marca-nombre { font-weight: 600; font-size: var(--t-13); line-height: 1.25; }
.riel-marca .marca-sub { font-size: var(--t-12); color: var(--tinta-3); }
.nav { display: flex; flex-direction: column; gap: 1px; }
.nav a { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: var(--radio-control); color: var(--tinta-2); font-weight: 500; font-size: var(--t-13); border: 1px solid transparent; }
.nav a:hover { color: var(--tinta); background: var(--superficie-3); text-decoration: none; }
.nav a.activo { background: var(--superficie); color: var(--tinta); border-color: var(--borde); }
.nav a .ic { width: 16px; height: 16px; color: var(--tinta-3); }
.nav a.activo .ic, .nav a:hover .ic { color: var(--tinta); }
.riel-pie { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--borde); }
.riel-usuario { display: flex; align-items: center; gap: 10px; padding: 4px 8px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--superficie); border: 1px solid var(--borde-fuerte); color: var(--tinta); display: grid; place-items: center; font-weight: 600; font-size: 11px; flex: none; }
.riel-usuario .nombre { font-weight: 500; line-height: 1.2; }
.riel-usuario .rol { font-size: var(--t-12); color: var(--tinta-3); }
.riel-acciones { display: flex; gap: 2px; }
.riel-acciones .btn { flex: 1; justify-content: flex-start; }

.principal { min-width: 0; display: flex; flex-direction: column; background: var(--lienzo); }
.cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: 0 var(--esp-6); height: var(--cab); border-bottom: 1px solid var(--borde); background: var(--lienzo); position: sticky; top: 0; z-index: 5; }
.cabecera-acciones { display: flex; gap: var(--esp-2); align-items: center; flex-wrap: wrap; }
.contenido { padding: var(--esp-5) var(--esp-6) var(--esp-7); flex: 1; min-width: 0; }
.cabecera .volver { display: none; }
.barra-inferior { display: none; }

/* ---------- Controles ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: var(--radio-control); border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--tinta); font-weight: 500; font-size: var(--t-13); cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--superficie-2); border-color: var(--tinta-3); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primario { background: var(--tinta); border-color: var(--tinta); color: var(--tinta-inversa); }
.btn-primario:hover { background: #000; border-color: #000; }
:root[data-tema="oscuro"] .btn-primario:hover { background: #fff; border-color: #fff; }
.btn-peligro { color: var(--error); border-color: var(--borde-fuerte); }
.btn-peligro:hover { background: var(--error-suave); border-color: var(--error); }
.btn-fantasma { border-color: transparent; background: transparent; color: var(--tinta-2); }
.btn-fantasma:hover { background: var(--superficie-3); color: var(--tinta); border-color: transparent; }
.btn-icono { width: 32px; padding: 0; }
.btn-peq { height: 28px; padding: 0 9px; font-size: var(--t-12); }
.btn-peq.btn-icono { width: 28px; }
.btn-grande { height: 40px; padding: 0 18px; font-size: var(--t-14); }
.btn .ic { width: 16px; height: 16px; }

.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo > label, .etiqueta { font-size: var(--t-12); color: var(--tinta-2); font-weight: 500; }
.campo .ayuda { font-size: var(--t-12); color: var(--tinta-3); line-height: 1.45; }
.entrada, .campo input:not([type=checkbox]):not([type=radio]):not([type=file]), .campo select, .campo textarea {
  width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-control); background: var(--superficie); color: var(--tinta); outline: none; font-size: var(--t-13); }
.campo textarea { height: auto; min-height: 96px; padding: 8px 10px; resize: vertical; line-height: 1.5; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .entrada:focus { border-color: var(--tinta); box-shadow: none; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { box-shadow: var(--foco); }
.campo input:disabled, .campo select:disabled { background: var(--superficie-2); color: var(--tinta-3); }
.campo select { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A919C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; }
.campo.compacto input, .campo.compacto select { height: 30px; font-size: var(--t-12); }
.campo-casilla { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--t-13); }
.campo-casilla input { width: 15px; height: 15px; accent-color: var(--tinta); margin: 0; }
.rejilla-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-4); }
.rejilla-form .ancho { grid-column: 1 / -1; }
.rejilla-form.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.buscador { position: relative; min-width: 220px; }
.buscador .ic { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); width: 15px; height: 15px; }
.buscador input { padding-left: 30px; }
.filtros { display: flex; gap: var(--esp-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--esp-4); }
.filtros .campo { flex-direction: row; align-items: center; gap: 6px; }
.filtros select { width: auto; height: 30px; font-size: var(--t-12); min-width: 120px; }
.filtros input[type=date] { height: 30px; font-size: var(--t-12); width: auto; }
.filtros .separador { flex: 1; }
.segmentos { display: inline-flex; background: var(--superficie-2); border-radius: var(--radio-control); padding: 2px; }
.segmentos button { height: 26px; padding: 0 10px; border: 0; background: transparent; color: var(--tinta-2); cursor: pointer; font-size: var(--t-12); font-weight: 500; border-radius: 4px; }
.segmentos button.activo { background: var(--superficie); color: var(--tinta); box-shadow: 0 0 0 1px var(--borde); }
.dias { display: flex; gap: 4px; flex-wrap: wrap; }
.dias label { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 30px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-control); cursor: pointer; font-size: var(--t-12); font-weight: 500; color: var(--tinta-2); user-select: none; }
.dias input { position: absolute; opacity: 0; width: 0; height: 0; }
.dias label:has(input:checked) { background: var(--tinta); border-color: var(--tinta); color: var(--tinta-inversa); }
.interruptor { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.interruptor .pista { width: 34px; height: 20px; border-radius: 10px; background: var(--borde-fuerte); position: relative; transition: background .15s; flex: none; }
.interruptor .pista::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.interruptor input:checked + .pista { background: var(--exito); }
.interruptor input:checked + .pista::after { transform: translateX(14px); }
.interruptor input:focus-visible + .pista { box-shadow: var(--foco); }

/* ---------- Superficies ---------- */
.panel { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); }
.panel-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: 12px 16px; border-bottom: 1px solid var(--borde); flex-wrap: wrap; min-height: 46px; }
.panel-cab h2 { font-size: var(--t-13); font-weight: 600; }
.panel-cuerpo { padding: 16px; }
.seccion { margin-bottom: var(--esp-5); }
.seccion-titulo { font-size: var(--t-14); font-weight: 600; margin-bottom: var(--esp-3); }
.nota { display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--radio-control); border: 1px solid var(--borde); background: var(--superficie-2); font-size: var(--t-13); color: var(--tinta-2); align-items: flex-start; line-height: 1.5; }
.nota .ic { color: var(--tinta-3); margin-top: 2px; width: 16px; height: 16px; }
.nota-aviso { background: var(--aviso-suave); border-color: transparent; color: var(--tinta); }
.nota-aviso .ic { color: var(--aviso); }
.nota-error { background: var(--error-suave); border-color: transparent; color: var(--tinta); }
.nota-error .ic { color: var(--error); }
.nota-exito { background: var(--exito-suave); border-color: transparent; color: var(--tinta); }
.nota-exito .ic { color: var(--exito); }
.nota-info { background: var(--acento-suave); border-color: transparent; color: var(--tinta); }
.nota-info .ic { color: var(--acento); }
.datos { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; font-size: var(--t-13); }
.datos dt { color: var(--tinta-3); }
.datos dd { margin: 0; color: var(--tinta); min-width: 0; overflow-wrap: anywhere; }

/* ---------- Tablas ---------- */
.tabla-marco { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); overflow: hidden; }
.tabla-scroll { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-13); }
.tabla th { text-align: left; font-weight: 500; color: var(--tinta-3); font-size: var(--t-12); padding: 0 12px; height: 34px; border-bottom: 1px solid var(--borde); background: var(--superficie-2); white-space: nowrap; }
.tabla td { padding: 0 12px; height: var(--fila); border-bottom: 1px solid var(--borde); vertical-align: middle; white-space: nowrap; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr { cursor: pointer; }
.tabla tbody tr:hover { background: var(--superficie-2); }
.tabla tbody tr.sel { background: var(--acento-suave); }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla td.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--t-12); }
.tabla .celda-principal { font-weight: 500; color: var(--tinta); }
.tabla td.ancho { white-space: normal; min-width: 240px; }
.tabla .acciones-fila { display: flex; gap: 4px; justify-content: flex-end; }
.tabla-pie { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: 8px 12px; border-top: 1px solid var(--borde); font-size: var(--t-12); color: var(--tinta-2); flex-wrap: wrap; }
.paginacion { display: flex; gap: 4px; align-items: center; }
.tabla-marco > .vacio { border: 0; }
.tabla.recientes { width: 100%; table-layout: fixed; }
.tabla.recientes td.celda-principal { max-width: 0; overflow: hidden; }
.tabla.recientes td.celda-principal .truncar { overflow: hidden; text-overflow: ellipsis; }
.tabla.recientes td:nth-child(3) { width: 108px; }
.tabla.recientes td:nth-child(4) { width: 56px; }
.tabla.recientes td:nth-child(5) { width: 92px; overflow: hidden; text-overflow: ellipsis; }
.tabla.recientes td.celda-direccion { width: 96px; padding-right: 0; }

/* ---------- Etiquetas y chips ---------- */
.et, .etq { display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 7px; border-radius: 5px; font-size: var(--t-12); font-weight: 500; background: var(--superficie-2); color: var(--tinta-2); border: 1px solid var(--borde); white-space: nowrap; }
.et .ic { width: 12px; height: 12px; }
.et .punto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.et-exito, .etq-exito { background: var(--exito-suave); color: var(--exito); border-color: transparent; }
.et-aviso { background: var(--aviso-suave); color: var(--aviso); border-color: transparent; }
.et-error { background: var(--error-suave); color: var(--error); border-color: transparent; }
.et-acento { background: var(--acento-suave); color: var(--acento); border-color: transparent; }
.et-caliente, .etq-caliente { background: var(--caliente-suave); color: var(--caliente); border-color: transparent; }
.et-tibio { background: var(--tibio-suave); color: var(--tibio); border-color: transparent; }
.et-frio { background: var(--frio-suave); color: var(--frio); border-color: transparent; }
.et-neutro { background: transparent; }
.chip-h { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--borde-fuerte); color: var(--tinta-2); font-size: var(--t-12); max-width: 100%; }
.chip-h .ic { width: 13px; height: 13px; color: var(--tinta-3); }
.chip-h b { color: var(--tinta); font-weight: 500; white-space: nowrap; }

/* ---------- Métricas: una tira con divisiones finas ---------- */
.metricas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); margin-bottom: var(--esp-5); }
.metrica { padding: 16px 20px 16px 0; margin-right: 20px; border-right: 1px solid var(--borde); min-width: 0; }
.metrica:last-child { border-right: 0; margin-right: 0; }
.metrica .m-etiqueta { font-size: var(--t-12); color: var(--tinta-2); margin-bottom: 8px; }
.metrica .m-valor { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.metrica .m-valor small { font-size: var(--t-13); font-weight: 500; color: var(--tinta-3); margin-left: 2px; letter-spacing: 0; }
.metrica .m-sub { font-size: var(--t-12); color: var(--tinta-3); margin-top: 8px; }
.metrica .m-sub .mejor { color: var(--exito); }
.metrica .m-sub .peor { color: var(--error); }

/* ---------- Inicio ---------- */
.inicio-rejilla { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--esp-4); margin-bottom: var(--esp-4); }
.inicio-rejilla > *, .inicio-rejilla-3 > * { min-width: 0; overflow: hidden; }
.inicio-rejilla-3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--esp-4); }
.leyenda { display: flex; gap: 14px; font-size: var(--t-12); color: var(--tinta-2); flex-wrap: wrap; }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.grafica { position: relative; width: 100%; }
.grafica svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafica .eje text { font-size: 11px; fill: var(--tinta-3); font-family: var(--fuente); }
.grafica .rejilla line { stroke: var(--borde); stroke-width: 1; }
.grafica .barra-hit { fill: transparent; }
.grafica .barra-hit:hover + g rect, .grafica g.col:hover rect { opacity: .85; }
.tooltip { position: absolute; pointer-events: none; background: var(--tinta); color: var(--tinta-inversa); font-size: var(--t-12); padding: 6px 9px; border-radius: 6px; white-space: nowrap; transform: translate(-50%, -100%); z-index: 3; opacity: 0; transition: opacity .1s; }
.tooltip.visible { opacity: 1; }
.tooltip b { font-weight: 600; }
.embudo { display: flex; flex-direction: column; gap: 8px; }
.embudo-fila { display: grid; grid-template-columns: 96px 1fr 44px; align-items: center; gap: 10px; font-size: var(--t-13); }
.embudo-fila .barra { height: 16px; background: var(--superficie-2); border-radius: 3px; overflow: hidden; }
.embudo-fila .barra i { display: block; height: 100%; background: var(--tinta); border-radius: 0 3px 3px 0; min-width: 2px; }
.embudo-fila .barra i.perdido { background: var(--borde-fuerte); }
.embudo-fila .n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.temperaturas { display: flex; flex-direction: column; gap: 12px; }
.temp-fila { display: grid; grid-template-columns: 110px 1fr 44px; align-items: center; gap: 10px; font-size: var(--t-13); }
.temp-fila .nombre { display: inline-flex; align-items: center; gap: 6px; }
.temp-fila .barra { height: 6px; background: var(--superficie-2); border-radius: 3px; overflow: hidden; }
.temp-fila .barra i { display: block; height: 100%; border-radius: 3px; }
.temp-fila.caliente .ic, .temp-fila.caliente .barra i { color: var(--caliente); background: var(--caliente); }
.temp-fila.tibio .ic, .temp-fila.tibio .barra i { color: var(--tibio); background: var(--tibio); }
.temp-fila.frio .ic, .temp-fila.frio .barra i { color: var(--frio); background: var(--frio); }
.temp-fila .ic { background: transparent !important; }
.temp-fila .n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }

/* ---------- Lista + ficha lateral ---------- */
.con-ficha { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: var(--esp-4); align-items: start; }
.con-ficha.sin-ficha { grid-template-columns: minmax(0, 1fr); }
.con-ficha:not(.sin-ficha) .col-opc { display: none; }
.con-ficha:not(.sin-ficha) .tabla td.ancho { max-width: 220px; }
.ficha { position: sticky; top: calc(var(--cab) + var(--esp-4)); max-height: calc(100vh - var(--cab) - var(--esp-4) * 2); overflow-y: auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); display: flex; flex-direction: column; }
.ficha-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px 12px; border-bottom: 1px solid var(--borde); position: sticky; top: 0; background: var(--superficie); z-index: 2; }
.ficha-cab h2 { font-size: var(--t-14); font-weight: 600; line-height: 1.3; }
.ficha-cab .sub { font-size: var(--t-12); color: var(--tinta-2); margin-top: 2px; }
.ficha-cuerpo { padding: 16px; display: flex; flex-direction: column; gap: 18px; }
.ficha-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ficha-acciones .al-final { margin-left: auto; }
.ficha .tabla td { white-space: normal; height: auto; padding-top: 8px; padding-bottom: 8px; }
.ficha-seccion h3 { font-size: var(--t-12); color: var(--tinta-3); font-weight: 500; margin-bottom: 8px; }
.ficha-vacia { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 24px; color: var(--tinta-3); gap: 8px; min-height: 320px; }
.ficha-vacia .ic { width: 24px; height: 24px; }

/* Estados vacíos y carga */
.vacio { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 56px 24px; gap: 8px; border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-tarjeta); background: var(--superficie); }
.vacio .ic { width: 24px; height: 24px; color: var(--tinta-3); }
.vacio h3 { font-size: var(--t-14); }
.vacio p { color: var(--tinta-2); max-width: 46ch; line-height: 1.5; }
.cargando { padding: 40px; text-align: center; color: var(--tinta-3); font-size: var(--t-12); }
.cargando::before { content: ''; display: block; width: 16px; height: 16px; margin: 0 auto 10px; border: 2px solid var(--borde-fuerte); border-top-color: var(--tinta); border-radius: 50%; animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Ficha de llamada ---------- */
.reproductor { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--borde); border-radius: var(--radio-control); background: var(--superficie-2); }
.reproductor .tiempo { font-family: var(--mono); font-size: var(--t-12); color: var(--tinta-2); min-width: 78px; text-align: center; font-variant-numeric: tabular-nums; }
.reproductor .pista { flex: 1; height: 24px; position: relative; cursor: pointer; }
.reproductor .pista::before { content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 3px; border-radius: 2px; background: var(--borde-fuerte); }
.reproductor .pista .avance { position: absolute; left: 0; top: 11px; height: 3px; border-radius: 2px; background: var(--tinta); width: 0; }
.reproductor .pista .marca { position: absolute; top: 8px; width: 2px; height: 9px; background: var(--acento); }
.reproductor .sin-audio { font-size: var(--t-12); color: var(--tinta-3); }
.dialogo { display: flex; flex-direction: column; gap: 10px; }
.turno { display: flex; flex-direction: column; gap: 3px; max-width: 86%; }
.turno .quien { font-size: var(--t-12); color: var(--tinta-3); display: flex; gap: 6px; align-items: baseline; }
.turno .quien .t { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.turno .texto { padding: 8px 12px; border-radius: 10px; font-size: var(--t-13); line-height: 1.5; }
.turno.cliente { align-self: flex-start; }
.turno.cliente .texto { background: var(--superficie); border: 1px solid var(--borde); color: var(--tinta); border-top-left-radius: 3px; }
.turno.agente { align-self: flex-end; align-items: flex-end; }
.turno.agente .texto { background: var(--superficie-2); color: var(--tinta); border-top-right-radius: 3px; }
.turno.activo .texto { box-shadow: 0 0 0 2px var(--acento-borde); }
.turno-herramienta { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 100%; }
.turno-herramienta .t { font-size: 11px; color: var(--tinta-3); font-family: var(--mono); }
.calificacion { display: flex; align-items: center; gap: 8px; }
.calificacion .puntos { display: flex; gap: 3px; }
.calificacion .puntos i { width: 14px; height: 5px; border-radius: 2px; background: var(--borde); }
.calificacion .puntos i.lleno { background: var(--tinta); }
.calificacion b { font-variant-numeric: tabular-nums; }

/* ---------- Prueba de voz ---------- */
.prueba-voz { display: grid; grid-template-columns: 240px 1fr; gap: var(--esp-5); align-items: center; }
.anillo-marco { display: grid; place-items: center; height: 220px; }
.anillo { position: relative; width: 150px; height: 150px; display: grid; place-items: center; }
.anillo .halo { position: absolute; inset: 0; border-radius: 50%; background: var(--superficie-2); transform: scale(var(--nivel, 1)); transition: transform .08s linear; }
.anillo .halo2 { position: absolute; inset: 14px; border-radius: 50%; border: 1px solid var(--borde-fuerte); transform: scale(calc(1 + (var(--nivel, 1) - 1) * .5)); transition: transform .08s linear; }
.anillo .centro { position: relative; width: 88px; height: 88px; border-radius: 50%; background: var(--superficie); border: 1px solid var(--borde-fuerte); display: grid; place-items: center; color: var(--tinta); }
.anillo .centro .ic { width: 28px; height: 28px; }
.anillo.escuchando .centro { border-color: var(--exito); color: var(--exito); }
.anillo.escuchando .halo { background: var(--exito-suave); }
.anillo.hablando .centro { border-color: var(--acento); color: var(--acento); }
.anillo.hablando .halo { background: var(--acento-suave); }
.anillo.conectando .halo { animation: respirar 1.6s ease-in-out infinite; }
.anillo.terminada .centro, .anillo.error .centro { color: var(--tinta-3); border-color: var(--borde); }
@keyframes respirar { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.estado-voz { display: flex; align-items: center; gap: 8px; font-size: var(--t-13); font-weight: 500; }
.estado-voz .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--tinta-3); }
.estado-voz.conectando .punto { background: var(--aviso); }
.estado-voz.escuchando .punto { background: var(--exito); }
.estado-voz.hablando .punto { background: var(--acento); }
.estado-voz.error .punto { background: var(--error); }
.transcripcion-viva { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; font-size: var(--t-13); padding: 10px 12px; border: 1px solid var(--borde); border-radius: var(--radio-control); background: var(--superficie-2); min-height: 80px; }
.transcripcion-viva .l { display: flex; gap: 8px; }
.transcripcion-viva .l b { color: var(--tinta-3); font-weight: 500; min-width: 52px; }

/* ---------- Pestañas ---------- */
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin-bottom: var(--esp-5); overflow-x: auto; }
.pestanas button { height: 36px; padding: 0 12px; border: 0; background: transparent; color: var(--tinta-2); font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-size: var(--t-13); }
.pestanas button:hover { color: var(--tinta); }
.pestanas button.activo { color: var(--tinta); border-bottom-color: var(--tinta); }

/* ---------- Modal y avisos ---------- */
.modal-fondo { position: fixed; inset: 0; background: rgba(26, 29, 33, .4); z-index: 40; display: grid; place-items: center; padding: 16px; }
.modal { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); width: min(640px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.modal.ancho { width: min(920px, 100%); }
.modal.estrecho { width: min(440px, 100%); }
.modal-cab { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--borde); }
.modal-cab h2 { font-size: var(--t-14); }
.modal-cuerpo { padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.modal-pie { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--borde); }
.avisos { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 60; max-width: min(420px, calc(100vw - 40px)); }
.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--radio-control); background: var(--tinta); color: var(--tinta-inversa); font-size: var(--t-13); border: 1px solid transparent; }
.aviso .ic { flex: none; margin-top: 1px; width: 16px; height: 16px; }
.aviso.error { background: var(--error); color: #fff; }
.aviso.exito { background: var(--exito); color: #fff; }

/* ---------- Calendario semanal ---------- */
.calendario { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); overflow: hidden; }
.cal-cab { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--borde); }
.cal-cab > div { padding: 10px 8px; font-size: var(--t-12); color: var(--tinta-2); text-align: center; border-left: 1px solid var(--borde); }
.cal-cab > div:first-child { border-left: 0; }
.cal-cab .dia-num { font-size: var(--t-16); font-weight: 600; color: var(--tinta); display: block; }
.cal-cab .hoy .dia-num { color: var(--acento); }
.cal-cuerpo { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); position: relative; overflow-y: auto; max-height: calc(100vh - 240px); min-height: 480px; padding-top: 8px; }
.cal-horas { display: grid; grid-auto-rows: 56px; }
.cal-horas div { font-size: 11px; color: var(--tinta-3); text-align: right; padding: 0 8px; transform: translateY(-6px); font-family: var(--mono); }
.cal-col { position: relative; border-left: 1px solid var(--borde); background-image: linear-gradient(to bottom, var(--borde) 1px, transparent 1px); background-size: 100% 56px; }
.cal-col.hoy { background-color: var(--superficie-2); }
.cal-col .libre { position: absolute; left: 0; right: 0; background: var(--exito-suave); opacity: .55; }
.cal-cita { position: absolute; left: 3px; right: 3px; border-radius: 5px; padding: 4px 6px; font-size: 11px; line-height: 1.3; overflow: hidden; cursor: pointer; background: var(--acento-suave); border-left: 3px solid var(--acento); color: var(--tinta); }
.cal-cita b, .cal-cita span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-cita b { font-weight: 600; }
.cal-cita.cancelada { background: var(--frio-suave); border-left-color: var(--frio); color: var(--tinta-3); text-decoration: line-through; }
.cal-cita.realizada { background: var(--exito-suave); border-left-color: var(--exito); }
.cal-cita.no_asistio { background: var(--error-suave); border-left-color: var(--error); }
.cal-cita.confirmada { border-left-color: var(--exito); }
.cal-lista { display: none; }

/* ---------- Fotos ---------- */
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.foto { position: relative; aspect-ratio: 4/3; border-radius: 6px; overflow: hidden; border: 1px solid var(--borde); background: var(--superficie-2); cursor: grab; }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto.arrastrando { opacity: .4; }
.foto.sobre { outline: 2px solid var(--acento); outline-offset: -2px; }
.foto .quitar { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 6px; border: 0; background: rgba(26,29,33,.72); color: #fff; display: grid; place-items: center; cursor: pointer; }
.foto .portada { position: absolute; left: 4px; bottom: 4px; font-size: 11px; background: rgba(26,29,33,.72); color: #fff; padding: 2px 6px; border-radius: 4px; }
.zona-soltar { border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-control); padding: 18px; text-align: center; color: var(--tinta-2); font-size: var(--t-13); cursor: pointer; background: var(--superficie-2); }
.zona-soltar.sobre { border-color: var(--acento); background: var(--acento-suave); }
.miniatura { width: 44px; height: 33px; object-fit: cover; border-radius: 4px; border: 1px solid var(--borde); background: var(--superficie-2); display: block; }
.miniatura-vacia { width: 44px; height: 33px; border-radius: 4px; border: 1px solid var(--borde); background: var(--superficie-2); display: grid; place-items: center; color: var(--tinta-3); }
.miniatura-vacia .ic { width: 14px; height: 14px; }

/* ---------- Configuración ---------- */
.config-rejilla { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--esp-6); align-items: start; }
.config-indice { position: sticky; top: calc(var(--cab) + var(--esp-5)); display: flex; flex-direction: column; gap: 1px; }
.config-indice a { height: 32px; display: flex; align-items: center; padding: 0 10px; border-radius: var(--radio-control); color: var(--tinta-2); font-size: var(--t-13); font-weight: 500; border: 1px solid transparent; }
.config-indice a:hover { background: var(--superficie-2); text-decoration: none; color: var(--tinta); }
.config-indice a.activo { background: var(--superficie-2); color: var(--tinta); border-color: var(--borde); }
.config-bloques { display: flex; flex-direction: column; gap: var(--esp-5); }
.llave { display: grid; grid-template-columns: 280px 1fr; gap: 10px 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--borde); }
.llave:last-child { border-bottom: 0; }
.llave .llave-nombre { font-weight: 500; }
.llave .llave-desc { font-size: var(--t-12); color: var(--tinta-3); line-height: 1.45; }
.llave .llave-estado { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.llave .llave-estado code { font-family: var(--mono); font-size: var(--t-12); color: var(--tinta-2); background: var(--superficie-2); padding: 2px 6px; border-radius: 4px; }
.llave .llave-form { display: flex; gap: 8px; }
.llave .llave-form input { flex: 1; }
.contrasena-nueva { font-family: var(--mono); font-size: var(--t-14); padding: 10px 12px; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio-control); display: flex; justify-content: space-between; align-items: center; gap: 8px; user-select: all; }

/* ---------- Login ---------- */
.login { display: grid; grid-template-columns: minmax(420px, 46fr) minmax(0, 54fr); min-height: 100vh; background: var(--superficie); }
.login-form { display: flex; flex-direction: column; padding: 40px 64px; background: var(--superficie); }
.login-marca { display: flex; align-items: center; gap: 12px; }
.login-marca .marca-nombre { font-weight: 600; font-size: var(--t-14); line-height: 1.2; }
.login-marca .marca-sub { font-size: var(--t-12); color: var(--tinta-3); }
.login-form form { width: min(400px, 100%); display: flex; flex-direction: column; gap: 20px; margin: auto 0; padding: 40px 0; }
.login-form h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.025em; }
.login-sub { color: var(--tinta-2); margin-top: 6px; font-size: var(--t-14); }
.login-form .campo { gap: 7px; }
.login-form .campo > label { font-size: var(--t-13); }
.login-form .campo input { height: 44px; font-size: var(--t-14); padding: 0 12px; border-radius: 8px; }
.login-form .btn-grande { height: 44px; font-size: var(--t-14); border-radius: 8px; margin-top: 4px; }
.ayuda-login { font-size: var(--t-12); color: var(--tinta-3); line-height: 1.5; margin: 0; }
.login-pie { display: flex; justify-content: flex-start; }
.login-visual { position: relative; overflow: hidden; background: #0A1A3F; background-image: radial-gradient(120% 90% at 100% 0%, #1E4FD6 0%, #12327F 42%, #0A1A3F 100%); color: #fff; display: flex; align-items: center; }
.login-visual::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 85%); }
.lv-cuerpo { position: relative; padding: 64px clamp(40px, 7vw, 112px); max-width: 720px; }
.lv-ceja { font-size: var(--t-12); font-weight: 500; letter-spacing: .04em; color: #9DB8FF; }
.lv-titulo { font-size: clamp(30px, 3.2vw, 44px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.12; margin-top: 14px; max-width: 14em; }
.lv-onda { display: flex; align-items: center; gap: 5px; height: 96px; margin: 44px 0 40px; }
.lv-onda i { flex: 1; min-width: 3px; max-width: 6px; height: 100%; border-radius: 3px; background: linear-gradient(180deg, #8FB4FF, #4F86F7); transform-origin: center; animation: onda 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.09s); opacity: .9; }
@keyframes onda { 0%, 100% { transform: scaleY(.18); } 30% { transform: scaleY(calc(.35 + .6 * var(--k, .6))); } 60% { transform: scaleY(.3); } }
.lv-onda i:nth-child(3n) { --k: .95; } .lv-onda i:nth-child(3n+1) { --k: .55; } .lv-onda i:nth-child(5n) { --k: .8; } .lv-onda i:nth-child(7n) { --k: .4; }
.lv-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.lv-lista li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--t-14); color: rgba(255,255,255,.86); line-height: 1.5; }
.lv-lista .ic { width: 18px; height: 18px; color: #9DB8FF; margin-top: 2px; }
.marca-ini { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--tinta); font-weight: 600; font-size: var(--t-12); letter-spacing: .02em; display: grid; place-items: center; flex: none; }
.marca-img { height: 30px; max-width: 140px; object-fit: contain; flex: none; }
@media (prefers-reduced-motion: reduce) { .lv-onda i { animation: none; transform: scaleY(calc(.25 + .5 * var(--k, .6))); } }
@media (max-width: 900px) { .login { grid-template-columns: 1fr; } .login-visual { display: none; } .login-form { padding: 28px 20px; } .login-form form { margin: 0; padding: 36px 0 24px; } }

/* ---------- Campañas ---------- */
.campana-progreso { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--superficie-2); gap: 2px; }
.campana-progreso i { display: block; height: 100%; }
.campana-progreso .c { background: var(--exito); }
.campana-progreso .s { background: var(--aviso); }
.campana-progreso .b { background: var(--frio); }
.campana-progreso .p { background: var(--borde-fuerte); }

/* ---------- Agente ---------- */
.variables { display: flex; gap: 6px; flex-wrap: wrap; }
.variables button { height: 26px; padding: 0 8px; border-radius: 5px; border: 1px solid var(--borde-fuerte); background: var(--superficie); font-family: var(--mono); font-size: var(--t-12); cursor: pointer; color: var(--tinta-2); }
.variables button:hover { border-color: var(--tinta); color: var(--tinta); }
.voces { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 8px; }
.voz { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: var(--radio-control); cursor: pointer; background: var(--superficie); }
.voz:hover { border-color: var(--borde-fuerte); }
.voz.sel { border-color: var(--tinta); }
.voz input { accent-color: var(--tinta); margin: 0; }
.voz .voz-nombre { font-weight: 500; }
.voz .voz-desc { font-size: var(--t-12); color: var(--tinta-3); }
.voz .btn { margin-left: auto; }

/* ---------- Responsivo ---------- */
@media (max-width: 1280px) {
  .metricas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metrica:nth-child(3n) { border-right: 0; margin-right: 0; }
  .metrica:nth-child(-n+3) { border-bottom: 1px solid var(--borde); }
  .con-ficha { grid-template-columns: minmax(0, 1fr) 400px; }
  .config-rejilla { grid-template-columns: 1fr; }
  .config-indice { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; }
}
@media (max-width: 1100px) {
  .inicio-rejilla, .inicio-rejilla-3 { grid-template-columns: 1fr; }
  .con-ficha { grid-template-columns: minmax(0, 1fr); }
  .con-ficha .ficha { position: fixed; inset: 0; z-index: 30; max-height: none; border-radius: 0; border: 0; }
  .prueba-voz { grid-template-columns: 1fr; }
}
@media (max-width: 900px) { .login { grid-template-columns: 1fr; } .login-muestra { display: none; } .login-form { padding: 28px 20px; border-right: 0; } .login-form form { margin: 0; padding: 32px 0 24px; } }
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .riel { display: none; }
  .cabecera { padding: 0 16px; height: auto; min-height: 56px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  .cabecera h1 { font-size: var(--t-16); }
  .cabecera .volver { display: inline-flex; }
  .cabecera-acciones { width: 100%; }
  .cabecera-acciones .btn:not(.btn-primario) span { display: none; }
  .cabecera-acciones .buscador { flex: 1; min-width: 150px; }
  .cabecera-acciones .campo { flex: 1; }
  .contenido { padding: 16px 16px calc(72px + env(safe-area-inset-bottom)); }
  .barra-inferior { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; height: calc(58px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--superficie); border-top: 1px solid var(--borde); z-index: 20; }
  .barra-inferior a, .barra-inferior button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; color: var(--tinta-3); border: 0; background: none; cursor: pointer; text-decoration: none; }
  .barra-inferior a .ic, .barra-inferior button .ic { width: 20px; height: 20px; }
  .barra-inferior a.activo, .barra-inferior button.activo { color: var(--tinta); }
  .metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrica { padding: 12px 12px 12px 0; margin-right: 12px; }
  .metrica .m-valor { font-size: 22px; }
  .metrica:nth-child(3n) { border-right: 1px solid var(--borde); margin-right: 12px; }
  .metrica:nth-child(2n) { border-right: 0; margin-right: 0; }
  .metrica:nth-child(-n+4) { border-bottom: 1px solid var(--borde); }
  .rejilla-form, .rejilla-form.tres { grid-template-columns: 1fr; }
  .tabla td.ancho { min-width: 180px; }
  .tabla-pie { justify-content: center; }
  .con-ficha .ficha { top: 0; padding-bottom: env(safe-area-inset-bottom); }
  .ficha { max-height: none; }
  .ficha-cab { padding-top: 14px; }
  .filtros { gap: 6px; }
  .filtros select { min-width: 0; }
  .calendario .cal-cab, .calendario .cal-cuerpo { display: none; }
  .cal-lista { display: flex; flex-direction: column; }
  .cal-lista .cal-dia { padding: 10px 14px; border-bottom: 1px solid var(--borde); }
  .cal-lista .cal-dia h3 { font-size: var(--t-12); color: var(--tinta-2); margin-bottom: 6px; }
  .cal-lista .cal-item { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 8px 0; font-size: var(--t-13); cursor: pointer; }
  .cal-lista .cal-item .h { font-family: var(--mono); color: var(--tinta-2); font-size: var(--t-12); }
  .llave { grid-template-columns: 1fr; }
  .anillo-marco { height: 190px; }
  .modal-fondo { padding: 0; align-items: end; }
  .modal { max-height: 100vh; border-radius: 0; height: 100vh; }
  .avisos { right: 12px; left: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); max-width: none; }
  .datos { grid-template-columns: 1fr; gap: 2px 0; }
  .datos dt { margin-top: 8px; }
  .datos dt:first-child { margin-top: 0; }
  .hoja-mas { position: fixed; left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom)); background: var(--superficie); border-top: 1px solid var(--borde); z-index: 19; padding: 8px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
  .hoja-mas a { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--radio-control); color: var(--tinta-2); font-weight: 500; }
  .hoja-mas a.activo { background: var(--superficie-2); color: var(--tinta); }
  .hoja-mas button { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--radio-control); border: 0; background: none; color: var(--tinta-2); font-weight: 500; cursor: pointer; text-align: left; }
}
@media (min-width: 761px) { .hoja-mas { display: none; } }
@media print { .riel, .barra-inferior, .cabecera-acciones, .avisos { display: none !important; } .shell { grid-template-columns: 1fr; } }

/* ---------- Puesta en marcha ---------- */
.pm { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--esp-4); align-items: start; }
.pm-lateral { display: flex; flex-direction: column; gap: var(--esp-4); position: sticky; top: calc(var(--cab) + var(--esp-5)); }
.pm-resumen { display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; align-items: center; padding: 20px 22px; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); }
.pm-resumen .pm-n { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.pm-resumen p { grid-column: 1 / -1; line-height: 1.5; }
.pm-barra { height: 6px; background: var(--superficie-2); border-radius: 3px; overflow: hidden; }
.pm-barra i { display: block; height: 100%; background: var(--exito); }
.pm-lista { display: flex; flex-direction: column; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); overflow: hidden; }
.paso-pm { display: grid; grid-template-columns: 28px 1fr auto; gap: 14px; align-items: start; padding: 16px 18px; border-bottom: 1px solid var(--borde); }
.paso-pm:last-child { border-bottom: 0; }
.paso-pm-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }
.paso-pm-ic .ic { width: 15px; height: 15px; }
.paso-pm.ok .paso-pm-ic { background: var(--exito-suave); color: var(--exito); }
.paso-pm.falta .paso-pm-ic { background: var(--aviso-suave); color: var(--aviso); }
.paso-pm-titulo { font-weight: 600; margin-bottom: 3px; }
.paso-pm-texto { color: var(--tinta-2); line-height: 1.5; }
.paso-pm .btn { margin-top: 2px; }
.llave-guia { grid-column: 1 / -1; }
.llave-guia summary { cursor: pointer; font-size: var(--t-12); color: var(--acento); font-weight: 500; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.llave-guia summary::-webkit-details-marker { display: none; }
.llave-guia[open] summary { margin-bottom: 8px; }
.llave-guia .guia-cuerpo { background: var(--superficie-2); border-radius: var(--radio-control); padding: 12px 14px; font-size: var(--t-13); line-height: 1.55; color: var(--tinta); }
.llave-guia .guia-cuerpo ol { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.llave-guia .guia-cuerpo code { font-family: var(--mono); font-size: var(--t-12); background: var(--superficie); border: 1px solid var(--borde); padding: 1px 5px; border-radius: 4px; }
.llave-guia .guia-costo { color: var(--tinta-2); margin-top: 8px; }
@media (max-width: 1100px) { .pm { grid-template-columns: 1fr; } .pm-lateral { position: static; } }
@media (max-width: 760px) { .paso-pm { grid-template-columns: 28px 1fr; } .paso-pm .btn { grid-column: 2; justify-self: start; } .pm-resumen { grid-template-columns: 1fr; } }

/* ---------- Diseño del sitio (Configuración) ---------- */
.paletas { display: flex; flex-wrap: wrap; gap: 8px; }
.paleta { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 6px; border: 1px solid var(--borde-fuerte); border-radius: 999px; background: var(--superficie); cursor: pointer; font-size: var(--t-12); font-weight: 500; color: var(--tinta-2); }
.paleta i { width: 16px; height: 16px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,.08); }
.paleta i + i { margin-left: -8px; }
.paleta.activa { border-color: var(--tinta); color: var(--tinta); }
.color-campo { display: flex; gap: 8px; align-items: center; }
.color-campo input[type=color] { width: 44px; height: 34px; padding: 2px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-control); background: var(--superficie); cursor: pointer; }
.color-campo input[type=text] { width: 120px; }
.vista-sitio { --m: #14352E; --m2: #1F4D43; --m3: #2C6A5C; --ms: #E8F0ED; --a: #C9A96A; --a2: #A88A4E; --tm: #fff; --ta: #17201D; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); overflow: hidden; background: #fff; color: #17201D; font-family: var(--fuente); max-width: 760px; }
.vs-top { background: var(--m); color: var(--tm); opacity: .95; font-size: 11px; padding: 6px 14px; display: flex; justify-content: space-between; }
.vs-cab { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #E1E5E2; font-size: 12px; }
.vs-sello { width: 24px; height: 24px; border-radius: 6px; background: var(--m); color: var(--tm); display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.vs-cab b { font-size: 13px; }
.vs-nav { margin-left: auto; color: #5F6B66; }
.vs-cta { background: var(--m); color: var(--tm); padding: 6px 10px; border-radius: 5px; font-weight: 500; }
.vs-hero { background: linear-gradient(90deg, var(--m) 0%, color-mix(in srgb, var(--m) 70%, #000 0%) 55%, var(--m3) 100%); color: var(--tm); padding: 26px 14px 22px; }
.vs-ceja { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--a); font-weight: 600; }
.vs-h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-top: 6px; max-width: 18em; line-height: 1.15; }
.vs-botones { display: flex; gap: 8px; margin-top: 12px; font-size: 11px; font-weight: 500; }
.vs-b1 { background: #fff; color: #17201D; padding: 7px 10px; border-radius: 4px; }
.vs-b2 { border: 1px solid rgba(255,255,255,.6); padding: 7px 10px; border-radius: 4px; }
.vs-banda { background: var(--m); display: flex; gap: 8px; padding: 12px 14px; align-items: center; }
.vs-banda span { flex: 1; height: 26px; background: #fff; border-radius: 4px; }
.vs-banda .vs-buscar { flex: none; background: var(--a); color: var(--ta); height: 26px; display: inline-flex; align-items: center; padding: 0 12px; font-size: 11px; font-weight: 500; }
.vs-fila { display: flex; gap: 12px; padding: 14px; align-items: center; }
.vs-fila i { width: 96px; height: 64px; border-radius: 6px; background: #ECEBE5; flex: none; }
.vs-zona { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--a2); font-weight: 600; }
.vs-titulo { font-size: 14px; font-weight: 600; margin-top: 3px; }
.vs-precio { font-size: 15px; font-weight: 700; margin-top: 4px; letter-spacing: -0.02em; }