:root {
  --tinta: #1E2A5A;
  --papel: #F6F7FB;
  --hoja: #FFFFFF;
  --lapiz: #545B70;
  --linea: #D9DCE6;
  --subrayador: #FFE45C;
  --sobre-subrayador: #1E2A5A;
  --bien: #1E7044;
  --mal: #A8261D;
  --sobre-tinta: #FFFFFF;
  --foco: #3A56D4;
  --fuente: "Avenir Next", Avenir, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #E6E9F5;
    --papel: #11152A;
    --hoja: #1A2040;
    --lapiz: #A9B0C8;
    --linea: #2E3660;
    --bien: #5FCF93;
    --mal: #FF8A80;
    --sobre-tinta: #11152A;
    --foco: #9DB0FF;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fuente); font-size: 16px; line-height: 1.5; color: var(--tinta); background: var(--papel); }
h1, h2, h3 { line-height: 1.25; margin: 0; }
h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 20px; font-weight: 700; }
h3 { font-size: 16px; font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

.saltar { position: absolute; left: -999px; top: 8px; background: var(--hoja); padding: 8px 12px; z-index: 10; }
.saltar:focus { left: 8px; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

mark {
  background: linear-gradient(transparent 35%, var(--subrayador) 35%, var(--subrayador) 92%, transparent 92%);
  color: inherit; padding: 0 2px;
}
@media (prefers-color-scheme: dark) { mark { background: var(--subrayador); color: var(--sobre-subrayador); border-radius: 2px; } }

/* Cabecera */
.cabecera { background: var(--hoja); border-bottom: 1px solid var(--linea); }
.cabecera-in { max-width: 1180px; margin: 0 auto; padding: 12px 16px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.marca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.marca-nombre { font-weight: 700; font-size: 20px; letter-spacing: 0.02em; }
.marca-sub { color: var(--lapiz); font-size: 14px; }
.nota-demo { color: var(--lapiz); font-size: 14px; }

/* Marco */
.marco { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .marco { grid-template-columns: 240px 1fr; } }

.agentes { padding: 16px 16px 0; }
.agentes-titulo, #lista-agentes { display: none; }
.agentes-movil { margin: 0 0 8px; }
.agentes > .btn { width: 100%; }
@media (max-width: 899px) {
  .agentes > #duplicar { width: auto; border: 0; background: none; padding: 0 2px; text-decoration: underline; font-size: 14px; }
}
@media (min-width: 900px) {
  .agentes { padding: 24px 16px; border-right: 1px solid var(--linea); min-height: calc(100vh - 60px); }
  .agentes-titulo { display: block; font-size: 16px; color: var(--lapiz); font-weight: 600; margin-bottom: 8px; }
  #lista-agentes { display: block; margin-bottom: 16px; }
  .agentes-movil { display: none; }
}
.agente-btn {
  all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; padding: 10px 12px; border-radius: 6px; min-height: 44px;
  border-left: 3px solid transparent;
}
.agente-btn:hover { background: color-mix(in srgb, var(--tinta) 6%, transparent); }
.agente-btn:focus-visible { outline: 3px solid var(--foco); outline-offset: 0; }
.agente-btn[aria-current="page"] { border-left-color: var(--tinta); background: var(--hoja); }
.agente-nombre { display: block; font-weight: 600; }
.agente-estado { display: block; font-size: 14px; color: var(--lapiz); }

.principal { padding: 16px 16px 64px; min-width: 0; }
@media (min-width: 900px) { .principal { padding: 24px 24px 64px 32px; } }

/* Barra del agente */
.barra { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.barra-texto { min-width: 0; }
.estado-agente { color: var(--lapiz); margin-top: 4px; }
.aviso-publicar:empty { display: none; }
.aviso-publicar { margin-top: 12px; padding: 10px 12px; border-left: 4px solid var(--tinta); background: var(--hoja); }
.aviso-publicar.mal { border-left-color: var(--mal); }
.aviso-publicar.bien { border-left-color: var(--bien); }
.aviso-publicar p + p, .aviso-publicar p + .btn { margin-top: 8px; }

.secciones { margin: 20px -16px 0; border-bottom: 1px solid var(--linea); overflow-x: auto; }
@media (min-width: 900px) { .secciones { margin: 20px 0 0; } }
.secciones-in { display: flex; gap: 2px; padding: 0 12px; width: max-content; }
@media (min-width: 900px) { .secciones-in { padding: 0; width: auto; flex-wrap: wrap; } }
.secciones button {
  min-height: 44px; padding: 0 10px; border: 0; background: none; cursor: pointer; white-space: nowrap;
  color: var(--lapiz); font-weight: 600; border-bottom: 3px solid transparent;
}
.secciones button:focus-visible { outline-offset: -3px; }
.secciones button[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--tinta); }

.seccion { padding-top: 20px; max-width: 760px; }
.seccion > h2 { margin-bottom: 4px; }
.intro { color: var(--lapiz); margin-bottom: 16px; max-width: 64ch; }

/* Botones */
.btn { min-height: 44px; padding: 0 18px; border-radius: 8px; cursor: pointer; font-weight: 600; border: 2px solid var(--tinta); }
.btn-principal { background: var(--tinta); color: var(--sobre-tinta); }
.btn-principal:hover { filter: brightness(1.15); }
.btn-sec { background: transparent; color: var(--tinta); }
.btn-sec:hover { background: color-mix(in srgb, var(--tinta) 8%, transparent); }
.btn-peq { padding: 0 12px; font-size: 14px; border-width: 1px; }
.btn-texto { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--tinta); font-weight: 600; text-decoration: underline; cursor: pointer; font-size: 14px; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Formularios */
.campo { margin: 12px 0; }
.campo > label, .etiqueta { display: block; font-weight: 600; margin-bottom: 4px; }
input[type="text"], select, textarea {
  width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--lapiz); border-radius: 6px; background: var(--hoja);
}
textarea { resize: vertical; line-height: 1.5; }
.ayuda { font-size: 14px; color: var(--lapiz); margin-top: 4px; }
.fila-campos { display: grid; gap: 0 12px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .fila-campos { grid-template-columns: 1fr 1fr; } .fila-campos.tres { grid-template-columns: 1.2fr 1fr 1.6fr; } }
.check { display: flex; gap: 10px; align-items: center; min-height: 44px; cursor: pointer; }
fieldset .check { align-items: flex-start; padding: 6px 0; }
fieldset .check input { margin-top: 2px; }
.check input { width: 20px; height: 20px; accent-color: var(--tinta); flex: none; margin: 0; }
.check.desactivado { cursor: not-allowed; }
input[type="range"] { width: 100%; accent-color: var(--tinta); min-height: 44px; }

.bloque { border-top: 1px solid var(--linea); padding: 16px 0; margin-top: 16px; }
.cambiado { box-shadow: inset 4px 0 0 var(--subrayador); }
.paso, .items li { padding-left: 12px; }
.tag-cambio { display: inline-block; font-size: 13px; font-weight: 600; line-height: 1.4; padding: 0 4px; background: var(--subrayador); color: var(--sobre-subrayador); border-radius: 2px; vertical-align: middle; }
.paso-n .tag-cambio { display: block; margin-top: 2px; width: max-content; }

.vars-fija { position: sticky; top: 0; z-index: 2; background: var(--papel); padding: 4px 0; }
@media (max-width: 599px) {
  .vars-fija .variables { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
  .vars-fija .var { flex: none; }
  .variables .etiqueta { flex: none; }
}
.extremos { display: flex; justify-content: space-between; font-size: 14px; color: var(--lapiz); }
.bloque > h3 { margin-bottom: 4px; }

/* Variables */
.variables { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 4px; }
.variables .etiqueta { margin: 0 6px 0 0; font-size: 14px; }
.var { min-height: 44px; padding: 0 12px; border-radius: 22px; border: 1px dashed var(--lapiz); background: var(--hoja); cursor: pointer; font-size: 14px; font-variant-numeric: tabular-nums; }

/* Pasos */
.pasos { counter-reset: paso; }
.paso { display: grid; grid-template-columns: 72px 1fr; gap: 0 12px; padding: 14px 0; border-top: 1px solid var(--linea); }
.paso-n { font-weight: 700; font-size: 20px; line-height: 44px; color: var(--lapiz); font-variant-numeric: tabular-nums; }
.paso .campo { margin: 0 0 8px; }
.paso-acciones { display: flex; flex-wrap: wrap; gap: 6px; }

/* Listas de elementos */
.items li { padding: 12px 0; border-top: 1px solid var(--linea); }
.items li:last-child { border-bottom: 1px solid var(--linea); }
.item-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; align-items: baseline; }
.item-titulo { font-weight: 600; }
.item-sub { color: var(--lapiz); font-size: 14px; }
.pild { font-size: 14px; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.pild::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pild.bien { color: var(--bien); }
.pild.mal { color: var(--mal); }
.pild.neutro { color: var(--lapiz); }
.pild.neutro::before { background: transparent; border: 2px solid currentColor; width: 6px; height: 6px; }
.pild.cargando::before { animation: latido 1s ease-in-out infinite; }
@keyframes latido { 50% { opacity: 0.2; } }
.motivo { font-size: 14px; margin-top: 4px; }
.motivo.mal { color: var(--mal); }
.formulario-add { padding: 12px 0 0; }
.formulario-add .btn { margin-top: 4px; }
.vacio { padding: 20px 0; }
.vacio p { color: var(--lapiz); margin: 4px 0 12px; max-width: 56ch; }

/* Acciones */
.accion { border-top: 1px solid var(--linea); padding: 12px 0; }
.accion-cab { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.accion-desc { color: var(--lapiz); font-size: 14px; }
.accion-op { margin: 4px 0 0 0; padding-left: 12px; border-left: 2px solid var(--linea); }
.interruptor { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-weight: 600; font-size: 14px; white-space: nowrap; }
.interruptor input { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: 13px; background: var(--lapiz); position: relative; cursor: pointer; margin: 0; flex: none; }
.interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--hoja); transition: left 0.15s; }
.interruptor input:checked { background: var(--tinta); }
.interruptor input:checked::after { left: 21px; }
.interruptor input:disabled { opacity: 0.5; cursor: not-allowed; }
.interruptor:has(input:disabled) { cursor: not-allowed; color: var(--lapiz); }

/* Registro */
.llamada-btn { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; padding: 12px 8px 12px 12px; min-height: 44px; }
.llamada-btn:focus-visible { outline: 3px solid var(--foco); }
.llamada-btn:hover .item-titulo { text-decoration: underline; }
.llamada-btn[aria-expanded="true"] { box-shadow: inset 4px 0 0 var(--tinta); background: var(--hoja); }
#registro-lista li { padding-left: 0; }
.llamada-btn .item-titulo { text-decoration: underline; text-decoration-color: var(--linea); text-underline-offset: 3px; }
#registro-lista li { padding: 0; }
.detalle-llamada { margin-top: 20px; padding: 16px; background: var(--hoja); border: 1px solid var(--linea); border-radius: 8px; }
.datos { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 8px 0 0; }
.datos dt { color: var(--lapiz); }
.datos dd { margin: 0; font-weight: 600; }
.transcripcion li { padding: 8px 0; display: grid; grid-template-columns: 4.5em 1fr; gap: 0 8px; border: 0; }
.transcripcion .quien { color: var(--lapiz); font-size: 14px; padding-top: 2px; }
.transcripcion .marcada .texto { text-decoration: underline wavy var(--mal); text-underline-offset: 4px; }
.marcar-form { grid-column: 1 / -1; margin-top: 8px; padding: 12px; border-left: 4px solid var(--mal); background: var(--papel); }
.marcar-form .acciones-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.leyenda { font-size: 14px; color: var(--lapiz); margin: 4px 0 8px; }
.ok-texto { color: var(--bien); font-weight: 600; margin-top: 8px; }

.nueva { animation: aparece 0.3s ease-out; }
@keyframes aparece { from { opacity: 0; transform: translateY(3px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 599px) {
  .paso { grid-template-columns: 1fr; }
  .paso-n { line-height: 1.4; display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
  .paso-n .tag-cambio { margin: 0; }
}