/* Panel de agentes Iberk.IA · registro producto · tema claro único · tokens en DESIGN.md */
:root {
  --fondo: #f3f6f7;
  --superficie: #fdfefe;
  --superficie-2: #edf2f3;
  --texto: #1b2a33;
  --texto-suave: #5b6b74;
  --texto-tenue: #8393a0;
  --borde: #dde5e8;
  --borde-fuerte: #c3cfd4;
  --teal: #125b5c;
  --teal-osc: #0d4546;
  --teal-claro: #e4efef;
  --teal-tinte: #f1f7f7;
  --aqua: #2ab4a8;
  --naranja: #da5528;
  --naranja-claro: #fdeee8;
  --ambar: #f08823;
  --ambar-claro: #fff2e0;
  --verde: #2f7d3b;
  --verde-claro: #e3f3e6;
  --rojo: #a8322a;
  --rojo-claro: #fbecea;
  --navy: #16232c;
  --radio: 6px;
  --sombra-menu: 0 8px 24px rgba(27, 42, 51, .14);
  --anillo-foco: 0 0 0 3px rgba(42, 180, 168, .35);
  --sans: "Source Sans 3", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ancho: 1120px;
  --t: 160ms cubic-bezier(.22, 1, .36, 1);
}
@supports (color: oklch(50% 0.1 200)) {
  :root {
    --fondo: oklch(97.2% 0.006 200);
    --superficie: oklch(99.3% 0.003 200);
    --superficie-2: oklch(95.6% 0.008 200);
    --texto: oklch(24% 0.02 230);
    --texto-suave: oklch(50% 0.02 220);
    --texto-tenue: oklch(64% 0.015 220);
    --borde: oklch(91% 0.01 210);
    --borde-fuerte: oklch(83% 0.014 210);
    --teal: oklch(42% 0.07 195);
    --teal-osc: oklch(34% 0.06 195);
    --teal-claro: oklch(94% 0.02 195);
    --teal-tinte: oklch(97% 0.01 195);
    --navy: oklch(22% 0.025 235);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--texto); background: var(--fondo); min-height: 100vh; display: flex; flex-direction: column; font-feature-settings: "tnum" 0; }
h1 { font-family: var(--serif); font-weight: 600; font-size: 1.75rem; line-height: 1.2; margin: 0 0 .4em; color: var(--texto); letter-spacing: -.005em; }
h2 { font-family: var(--sans); font-weight: 700; font-size: 1.15rem; line-height: 1.3; margin: 0 0 .6em; color: var(--texto); }
h3 { font-family: var(--sans); font-weight: 600; font-size: 1rem; line-height: 1.3; margin: 0 0 .5em; color: var(--texto); }
p { margin: 0 0 1em; }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
b, strong { font-weight: 600; }
.oculto-visual { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--navy); color: #fff; padding: 8px 12px; z-index: 100; }
.saltar:focus { left: 8px; }
:focus-visible { outline: none; box-shadow: var(--anillo-foco); border-radius: var(--radio); }
.ico { width: 1.1em; height: 1.1em; vertical-align: -.18em; flex: none; }

/* Barra superior */
/* La barra usa el mismo carbón que el fondo del logotipo (#1E2327) para que el lockup se funda sin bordes. */
.barra { background: #1e2327; color: #fff; }
.barra-int { max-width: var(--ancho); margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; }
.marca { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; padding: 4px 0; min-width: 0; }
.marca:hover { text-decoration: none; }
.marca-lockup { height: 40px; width: auto; display: block; }
.marca-icono { display: none; width: 40px; height: 40px; flex: none; }
.marca-sub { color: rgba(255,255,255,.6); font-size: .92rem; font-weight: 400; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.2); white-space: nowrap; line-height: 1.2; }
.barra-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.barra-nav a, .barra-nav .enlace-boton { color: rgba(255,255,255,.78); padding: 8px 10px; border-radius: var(--radio); font-weight: 600; font-size: .92rem; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; transition: background var(--t), color var(--t); }
.barra-nav a:hover, .barra-nav .enlace-boton:hover { background: rgba(255,255,255,.08); text-decoration: none; color: #fff; }
.barra-nav a.activo { color: #fff; background: rgba(255,255,255,.1); }
.barra-nav .btn { min-height: 34px; }
.enlace-boton { background: none; border: 0; font: inherit; cursor: pointer; }
.en-linea { display: inline; }
.subnav-admin { background: var(--superficie); border-bottom: 1px solid var(--borde); }
.subnav-admin .barra-int { min-height: 44px; justify-content: flex-start; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.subnav-admin .barra-int::-webkit-scrollbar { display: none; }
.subnav-admin a { color: var(--texto-suave); padding: 12px 10px; font-weight: 600; font-size: .92rem; white-space: nowrap; display: inline-flex; align-items: center; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subnav-admin a.activo { color: var(--teal); border-bottom-color: var(--teal); }
.subnav-admin a:hover { text-decoration: none; color: var(--texto); }
.banda-ver-como { background: var(--ambar-claro); color: var(--texto); border-bottom: 1px solid #f3d7ae; font-size: .92rem; }
.banda-ver-como .barra-int { min-height: 40px; padding-top: 4px; padding-bottom: 4px; }

/* Contenido */
.contenido { flex: 1; width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 24px 20px 48px; }
.contenido--simple { display: flex; flex-direction: column; align-items: center; padding-top: 40px; }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; }
.tarjeta + .tarjeta { margin-top: 16px; }
.tarjeta--auth { width: 100%; max-width: 420px; padding: 28px 24px; }
.tarjeta--estrecha { max-width: 600px; margin: 0 auto 16px; }
.tarjeta--suave { background: var(--superficie-2); border-color: transparent; }
.centrado { text-align: center; }
.cab-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.cab-pagina h1 { margin: 0; }
.intro { color: var(--texto-suave); max-width: 66ch; }
.meta { color: var(--texto-suave); font-size: .88rem; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0; }
.ref { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; color: var(--texto-suave); }
.volver { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .92rem; margin-bottom: 10px; }
.codigo-error { font-family: var(--serif); font-size: 3rem; color: var(--teal); margin: 0; }
.detalle-error { text-align: left; background: var(--superficie-2); padding: 12px; font-size: .8rem; overflow: auto; border-radius: var(--radio); }
.ayuda { color: var(--texto-suave); font-size: .88rem; margin: 0; }

/* Avisos */
.flashes { margin-bottom: 16px; }
.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--radio); border: 1px solid var(--borde); background: var(--superficie); margin-bottom: 10px; font-size: .95rem; }
.aviso .ico { margin-top: .2em; }
.aviso--ok { border-color: #bfe3c6; background: var(--verde-claro); color: #1f4d27; }
.aviso--error { border-color: #f0c4be; background: var(--rojo-claro); color: #7a2a14; }
.aviso--info { border-color: #c8dede; background: var(--teal-claro); color: var(--teal-osc); }
.aviso--aviso { border-color: #f3d7ae; background: var(--ambar-claro); color: #6b3e0a; }
.aviso p:last-child { margin: 0; }
.errores { border: 1px solid #f0c4be; background: var(--rojo-claro); color: #7a2a14; padding: 10px 14px; border-radius: var(--radio); margin-bottom: 14px; font-size: .95rem; }
.errores ul { margin: 0; padding-left: 18px; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 6px 14px; border-radius: var(--radio); border: 1px solid transparent; font: inherit; font-size: .92rem; font-weight: 600; line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--t), border-color var(--t), color var(--t), transform var(--t); }
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn--primario { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn--primario:hover { background: var(--teal-osc); border-color: var(--teal-osc); }
.btn--secundario { background: var(--superficie); color: var(--teal); border-color: var(--teal); }
.btn--secundario:hover { background: var(--teal-tinte); }
.btn--fantasma { background: var(--superficie); color: var(--texto); border-color: var(--borde-fuerte); }
.btn--fantasma:hover { background: var(--superficie-2); border-color: var(--texto-tenue); }
.btn--texto { background: transparent; color: var(--teal); border-color: transparent; padding-left: 8px; padding-right: 8px; }
.btn--texto:hover { background: var(--teal-tinte); }
.btn--peligro { background: transparent; color: var(--rojo); border-color: transparent; }
.btn--peligro:hover { background: var(--rojo-claro); border-color: #f0c4be; }
.btn--claro { background: #fff; color: var(--texto); border-color: var(--borde-fuerte); }
.btn--peq { min-height: 30px; padding: 3px 10px; font-size: .86rem; }
.btn--icono { padding: 0; width: 34px; min-height: 34px; }
.btn--grande { font-size: 1.1rem; padding: 14px 28px; min-height: 54px; width: 100%; border-radius: 8px; }
.btn--bloque { width: 100%; }
/* Botón de identidad de Google: fondo blanco, borde neutro, logo a la izquierda y texto centrado */
.btn-google { display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; width: 100%; min-height: 44px; padding: 8px 14px; background: #fff; color: #1f1f1f; border-color: #dadce0; font-weight: 600; font-size: .98rem; letter-spacing: .01em; }
.btn-google .logo-google { width: 20px; height: 20px; display: block; }
.btn-google span { grid-column: 2; text-align: center; }
.btn-google:hover { background: #f8f9fa; border-color: #c6c9cc; box-shadow: 0 1px 2px rgba(60,64,67,.12); }
.btn-google:active { background: #f1f3f4; box-shadow: none; }
.btn-google:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* Nota de demo gratuita: informativa y permanente, más suave que un aviso */
.nota-demo { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin: 0 0 16px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); color: var(--texto-suave); }
.nota-demo .ico { flex: none; width: 20px; height: 20px; color: var(--teal); margin-top: 1px; }
.nota-demo p { margin: 0; font-size: .94rem; line-height: 1.5; }
.nota-demo b { color: var(--texto); }
.nota-demo a { font-weight: 600; white-space: nowrap; }
.probar .nota-demo { margin: 0 0 16px; }
/* TPV virtual */
.lista-operaciones { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lista-operaciones li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; background: var(--superficie-2); border-radius: var(--radio); font-size: .92rem; }
.lista-operaciones b { font-variant-numeric: tabular-nums; }
.meta--error { color: var(--rojo); flex-basis: 100%; }
.valor--fuerte { font-weight: 700; font-variant-numeric: tabular-nums; }
.formulario--fila { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.formulario--fila .campo { flex: 1 1 200px; margin: 0; }
.formulario--fila .campo--corto { flex: 0 1 140px; }
/* Opciones excluyentes como tarjetas (motivo de la ayuda) */
.campo--radios { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.campo--radios legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.radios-tarjeta { display: grid; gap: 8px; grid-template-columns: 1fr; }
.radio-tarjeta { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: var(--superficie); cursor: pointer; transition: border-color var(--t), background var(--t), box-shadow var(--t); }
.radio-tarjeta:hover { border-color: var(--texto-tenue); }
.radio-tarjeta input { margin: 3px 0 0; accent-color: var(--teal); flex: none; }
.radio-tarjeta:has(input:checked) { border-color: var(--teal); background: var(--teal-tinte); box-shadow: inset 0 0 0 1px var(--teal); }
.radio-tarjeta:has(input:focus-visible) { box-shadow: var(--anillo-foco); }
.radio-tarjeta-cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.radio-tarjeta-cuerpo b { color: var(--texto); }
.radio-tarjeta-cuerpo small { color: var(--texto-suave); font-size: .88rem; line-height: 1.35; }
.ayuda--centrada { text-align: center; max-width: 600px; margin: 0 auto; }
/* Enlace de vuelta a la web principal (barra de acceso) */
.barra-web { margin-left: auto; color: rgba(255,255,255,.72); font-size: .92rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: var(--radio); white-space: nowrap; transition: background var(--t), color var(--t); }
.barra-web:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.barra-web .ico { width: 16px; height: 16px; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.acciones--derecha { justify-content: flex-end; }

/* Menú de acciones (details/summary, sin JS) */
.menu { position: relative; display: inline-block; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: ""; display: inline-block; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); margin-left: 4px; opacity: .7; }
.menu[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.menu-lista { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 230px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-menu); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.menu-lista form { display: contents; }
.menu-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 0; border-radius: 4px; padding: 8px 10px; font: inherit; font-size: .92rem; color: var(--texto); cursor: pointer; min-height: 36px; }
.menu-item:hover { background: var(--superficie-2); text-decoration: none; }
.menu-item--peligro { color: var(--rojo); }
.menu-item--peligro:hover { background: var(--rojo-claro); }
.menu-sep { height: 1px; background: var(--borde); margin: 4px 2px; }
.menu-grupo { display: flex; gap: 6px; padding: 6px 10px 4px; align-items: center; }
.menu-grupo select { flex: 1; min-height: 32px; padding: 4px 8px; font: inherit; font-size: .88rem; border: 1px solid var(--borde-fuerte); border-radius: 4px; background: #fff; color: var(--texto); }
.menu-etiqueta { padding: 6px 10px 0; font-size: .78rem; color: var(--texto-tenue); font-weight: 600; }
.menu-lista--form { min-width: 300px; max-width: 340px; padding: 14px; }
.menu-lista--form form { display: flex; gap: 10px; }
.menu-lista--form .ayuda { margin-bottom: 2px; }
.menu-fondo { position: fixed; inset: 0; z-index: 19; }

/* Formularios */
.formulario { display: flex; flex-direction: column; gap: 14px; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo label, .campo .etiqueta { font-weight: 600; font-size: .92rem; color: var(--texto); }
.campo input[type="text"], .campo input[type="email"], .campo input[type="password"], .campo input[type="url"], .campo input[type="tel"], .campo input[type="number"], .campo input[type="time"], .campo input[type="search"], .campo select, .campo textarea,
.tabla-edit input, .tabla-edit select, .campo-inline input { width: 100%; font: inherit; font-size: .95rem; padding: 8px 11px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: var(--superficie); color: var(--texto); min-height: 40px; transition: border-color var(--t), box-shadow var(--t); }
.campo select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6b74' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }
.campo textarea { min-height: 110px; resize: vertical; line-height: 1.45; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .tabla-edit input:focus, .campo-inline input:focus { border-color: var(--aqua); box-shadow: var(--anillo-foco); outline: none; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--texto-tenue); }
.campo--check { flex-direction: row; align-items: flex-start; gap: 10px; }
.campo--check input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--teal); }
.campo--check label { font-weight: 400; }
.campo-inline { flex: 1; min-width: 180px; }
.contador-car { font-size: .8rem; color: var(--texto-tenue); text-align: right; }
.contador-car.pasado { color: var(--rojo); font-weight: 600; }
.separador { display: flex; align-items: center; gap: 12px; color: var(--texto-tenue); font-size: .85rem; margin: 2px 0; }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--borde); }
fieldset { border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; margin: 0; min-width: 0; }
legend { font-weight: 600; color: var(--texto); padding: 0 6px; font-size: .95rem; }
.rejilla-2 { display: grid; gap: 14px; grid-template-columns: 1fr; }
.dias { display: flex; gap: 6px; flex-wrap: wrap; }
.dias label { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 36px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); cursor: pointer; font-weight: 600; font-size: .9rem; padding: 0 8px; background: var(--superficie); }
.dias input { position: absolute; opacity: 0; }
.dias label:has(input:checked) { background: var(--teal); border-color: var(--teal); color: #fff; }

/* Barra de alta / filtros */
.barra-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.barra-form .campo { flex: 1; min-width: 160px; }
.barra-form .campo input, .barra-form .campo select { min-height: 38px; padding: 6px 10px; }
.barra-form .btn { min-height: 38px; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.filtros .campo { min-width: 150px; flex: 1; }
.filtros .campo label { font-size: .85rem; color: var(--texto-suave); }
.filtros .campo input, .filtros .campo select { min-height: 36px; padding: 5px 10px; font-size: .92rem; }
.filtros .btn { min-height: 36px; }

/* Lista de agentes */
.lista-agentes { display: flex; flex-direction: column; gap: 8px; }
.fila-agente { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; color: inherit; text-decoration: none; transition: border-color var(--t), background var(--t); }
.fila-agente:hover { text-decoration: none; border-color: var(--borde-fuerte); background: #fff; }
.fila-agente h2 { font-size: 1.05rem; margin: 0 0 2px; }
.fila-agente .meta { font-size: .88rem; }
.fila-agente-datos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fila-agente .barra-minutos { max-width: 240px; }
.vacio { text-align: center; padding: 36px 16px; color: var(--texto-suave); }
.vacio h2 { margin-bottom: 8px; color: var(--texto); }
.pasos { list-style: none; padding: 0; margin: 16px auto 24px; max-width: 420px; text-align: left; counter-reset: paso; }
.pasos li { position: relative; padding-left: 40px; margin-bottom: 10px; counter-increment: paso; color: var(--texto); }
.pasos li::before { content: counter(paso); position: absolute; left: 0; top: -1px; width: 28px; height: 28px; border-radius: 50%; background: var(--teal-claro); color: var(--teal-osc); display: grid; place-items: center; font-weight: 700; font-size: .9rem; }

/* Anillo de estado */
.anillo { width: 36px; height: 36px; border-radius: 50%; border: 4px solid var(--borde-fuerte); display: inline-block; flex: none; position: relative; background: var(--superficie); }
.anillo--creando { border-color: var(--teal-claro); border-top-color: var(--teal); animation: girar 1.1s linear infinite; }
.anillo--lista { border-color: var(--teal); background: var(--teal); box-shadow: inset 0 0 0 5px var(--superficie); }
.anillo--produccion { border-color: var(--verde); background: var(--verde); box-shadow: inset 0 0 0 4px var(--superficie), inset 0 0 0 7px var(--verde); }
.anillo--pendiente_revision { border-color: var(--ambar); border-style: dashed; }
.anillo--sin_respuesta { border-color: var(--naranja); border-style: dotted; }
.anillo--archivada, .anillo--oculto { border-color: var(--borde-fuerte); background: repeating-linear-gradient(45deg, var(--superficie-2) 0 3px, var(--superficie) 3px 6px); }
@keyframes girar { to { transform: rotate(360deg); } }
.agente-cab .anillo:not(.anillo--mini) { width: 44px; height: 44px; }

/* Logo del agente con el anillo de estado como insignia */
.avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; }
.avatar--lg { width: 56px; height: 56px; }
.avatar--lg .anillo:not(.anillo--mini) { width: 44px; height: 44px; }
.avatar-logo { width: 100%; height: 100%; object-fit: contain; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 3px; display: block; }
.anillo--mini { position: absolute; right: -5px; bottom: -5px; width: 16px; height: 16px; border-width: 3px; box-shadow: 0 0 0 2px var(--superficie); background: var(--superficie); }
.anillo--mini.anillo--lista { background: var(--teal); box-shadow: inset 0 0 0 2px var(--superficie), 0 0 0 2px var(--superficie); }
.anillo--mini.anillo--produccion { background: var(--verde); box-shadow: inset 0 0 0 2px var(--superficie), 0 0 0 2px var(--superficie); }
.anillo--mini.anillo--creando { background: var(--superficie); }
.avatar--lg .anillo--mini { width: 18px; height: 18px; right: -6px; bottom: -6px; }
.celda-logo { display: flex; align-items: center; gap: 10px; }
.logo-mini { width: 28px; height: 28px; object-fit: contain; background: #fff; border: 1px solid var(--borde); border-radius: 4px; padding: 2px; flex: none; }

/* Insignias */
.insignia { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--superficie-2); color: var(--texto-suave); white-space: nowrap; line-height: 1.6; }
.insignia--lista, .insignia--creando { background: var(--teal-claro); color: var(--teal-osc); }
.insignia--produccion, .insignia--activa, .insignia--atendida { background: var(--verde-claro); color: #1f5a29; }
.insignia--pendiente_revision, .insignia--pedida, .insignia--pendiente_prueba, .insignia--configurada, .insignia--abierta { background: var(--ambar-claro); color: #7a4a05; }
.insignia--sin_respuesta, .insignia--error { background: var(--naranja-claro); color: #8a2e10; }
.insignia--archivada, .insignia--oculto, .insignia--descartada { background: var(--superficie-2); color: var(--texto-suave); }
.insignia--eliminada { background: #eceff1; color: #5b6b74; text-decoration: line-through; text-decoration-color: rgba(91,107,116,.5); }
.anillo--eliminada { border-color: var(--borde-fuerte); background: var(--superficie-2); }

/* Barra de minutos */
.barra-minutos { height: 6px; background: var(--superficie-2); border-radius: 999px; overflow: hidden; }
.barra-minutos span { display: block; height: 100%; background: var(--teal); border-radius: 999px; transition: width 400ms cubic-bezier(.22, 1, .36, 1); }
.barra-minutos--alerta span { background: linear-gradient(90deg, var(--teal) 70%, var(--naranja)); }
.barra-minutos--tope span { background: var(--naranja); }
.minutos-texto { font-size: .88rem; color: var(--texto-suave); margin: 6px 0 0; }
.minutos-texto b { font-size: 1rem; color: var(--texto); font-variant-numeric: tabular-nums; }

/* Ficha del agente */
.agente-cab { margin-bottom: 18px; }
.agente-cab-fila { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.agente-cab h1 { margin: 0; font-size: 1.5rem; }
.pestanas { display: flex; gap: 2px; border-bottom: 1px solid var(--borde); overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a { padding: 9px 12px; font-weight: 600; font-size: .95rem; color: var(--texto-suave); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; }
.pestanas a:hover { text-decoration: none; color: var(--texto); }
.pestanas a.activa { color: var(--teal); border-bottom-color: var(--teal); }
.probar { display: grid; gap: 16px; grid-template-columns: 1fr; }
.probar-llamar { text-align: center; padding: 28px 20px; }
.probar-llamar .btn--grande { max-width: 400px; margin: 0 auto 10px; }
.probar-llamar .ayuda { margin: 0; }
.preguntas { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.preguntas li { background: var(--superficie-2); border-radius: var(--radio); padding: 10px 14px; color: var(--texto); }
/* Panel oscuro: es el único bloque en navy de la página, así que se ve de lejos sin competir con el botón de llamar */
.consejos { background: var(--navy); border-color: var(--navy); color: rgba(255,255,255,.74); }
.consejos-cab { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.consejos-marca { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--aqua); color: #0a2027; }
.consejos-marca .ico { width: 20px; height: 20px; }
.consejos h2 { font-size: 1.12rem; color: #fff; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.consejos-cab p { margin: 3px 0 0; color: rgba(255,255,255,.6); font-size: .92rem; }
.consejos-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px 24px; grid-template-columns: 1fr; font-size: .92rem; color: rgba(255,255,255,.74); }
.consejos-lista li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.45; }
.consejos-lista b { display: block; color: #fff; font-size: .96rem; margin-bottom: 2px; }
.consejos-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: var(--aqua); }
.consejos-ico .ico { width: 17px; height: 17px; }
@media (min-width: 720px) { .consejos-lista { grid-template-columns: 1fr 1fr; } }
.datos-clave { display: grid; gap: 10px; grid-template-columns: 1fr; }
.dato { background: var(--superficie-2); border-radius: var(--radio); padding: 12px 14px; }
.dato .etiqueta { font-size: .8rem; color: var(--texto-suave); display: block; margin-bottom: 4px; font-weight: 600; }
.dato .valor { font-size: 1.15rem; color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.espera { text-align: center; padding: 40px 20px; }
.espera .anillo { width: 72px; height: 72px; border-width: 6px; margin: 0 auto 20px; display: block; }
.espera-vivo { min-height: 1.5em; color: var(--texto-suave); font-size: .9rem; }

/* Tablas */
.tabla-env { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th, .tabla td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla th { font-weight: 600; font-size: .82rem; color: var(--texto-suave); white-space: nowrap; background: var(--superficie-2); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: var(--teal-tinte); }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla td .acciones { flex-wrap: nowrap; justify-content: flex-end; }
.tabla-edit { width: 100%; border-collapse: collapse; }
.tabla-edit th { text-align: left; font-size: .82rem; color: var(--texto-suave); padding: 4px 6px; font-weight: 600; }
.tabla-edit td { padding: 3px 6px; }
.tabla-edit input { min-height: 36px; padding: 6px 10px; font-size: .92rem; }
.detalle-json { background: var(--superficie-2); padding: 8px 10px; border-radius: var(--radio); font-size: .8rem; white-space: pre-wrap; word-break: break-word; margin: 0; max-height: 200px; overflow: auto; }

/* Rejillas del panel interno */
.contadores { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); margin-bottom: 16px; }
.contador { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; }
.contador .n { font-size: 1.7rem; font-weight: 600; color: var(--texto); line-height: 1; display: block; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.contador .l { color: var(--texto-suave); font-size: .88rem; }
.dos-columnas { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; }
.lista-simple { list-style: none; padding: 0; margin: 0; }
.lista-simple li { padding: 9px 0; border-bottom: 1px solid var(--borde); display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; font-size: .95rem; }
.lista-simple li:last-child { border-bottom: 0; }
.lista-simple .cuando { color: var(--texto-tenue); font-size: .85rem; white-space: nowrap; }

/* Integraciones */
.modulos { display: grid; gap: 12px; grid-template-columns: 1fr; }
.modulo { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; }
.modulo-cab { display: flex; gap: 12px; align-items: flex-start; }
.modulo-cab .ico { width: 1.5em; height: 1.5em; color: var(--teal); margin-top: 2px; }
.modulo-cab h2 { margin: 0 0 2px; font-size: 1.05rem; }
.modulo-cab .meta { margin: 0; }
.modulo-cuerpo { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borde); }
.opciones { display: flex; gap: 8px; flex-wrap: wrap; }
.opcion { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: var(--superficie); font-weight: 600; font-size: .9rem; color: var(--texto); min-height: 36px; }
.opcion:hover { text-decoration: none; border-color: var(--teal); }
.opcion--peticion { border-style: dashed; color: var(--texto-suave); font-weight: 500; }
.opcion.activa { border-color: var(--teal); background: var(--teal-claro); color: var(--teal-osc); }
.modulo--inactivo { opacity: .7; }
.modulo--abierto { grid-column: 1 / -1; order: -1; }
.modulo--abierto .modulo-cuerpo form { max-width: 720px; }
.etiqueta-peq { font-size: .78rem; color: var(--texto-tenue); font-weight: 600; }

/* Llamadas */
.llamada { display: grid; gap: 8px; grid-template-columns: 1fr; padding: 12px 0; border-bottom: 1px solid var(--borde); }
.llamada:last-child { border-bottom: 0; }
.llamada audio { width: 100%; max-width: 420px; height: 40px; }
.turnos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.turno { max-width: 85%; padding: 10px 14px; border-radius: 10px; background: var(--superficie-2); }
.turno--agente { align-self: flex-start; background: var(--teal-claro); border-bottom-left-radius: 4px; }
.turno--cliente { align-self: flex-end; border-bottom-right-radius: 4px; }
.turno .quien { display: block; font-size: .75rem; color: var(--texto-suave); font-weight: 600; margin-bottom: 2px; }
.paginacion { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; }

/* Compartir y creatividades */
.copiar-grupo { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 6px 0 10px; }
.copiar-grupo input { flex: 1 1 320px; min-height: 40px; font: inherit; font-size: .95rem; padding: 8px 11px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: var(--superficie-2); color: var(--texto); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.btn.copiado { background: var(--verde); border-color: var(--verde); color: #fff; }
.creatividades { display: grid; gap: 16px; grid-template-columns: 1fr; }
.creatividad { padding: 0; overflow: hidden; }
.creatividad-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 18px 10px; }
.creatividad-cab h3 { margin: 0 0 2px; }
.creatividad-vista { padding: 28px 18px; display: flex; justify-content: center; align-items: center; background: var(--superficie-2); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.creatividad-vista > div:has(> iframe) { width: 100%; max-width: 360px; }
.creatividad-vista--oscuro { background: #1e2327; }
.codigo { margin: 0; padding: 12px 18px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; line-height: 1.5; color: var(--texto-suave); white-space: pre-wrap; word-break: break-all; max-height: 150px; overflow: auto; background: var(--superficie); }

/* Historial */
.version { padding: 12px 0; border-bottom: 1px solid var(--borde); display: grid; gap: 8px; }
.version:last-child { border-bottom: 0; }
.version .cambios { font-size: .92rem; }
.diff { display: grid; gap: 4px; font-size: .88rem; }
.diff .antes { color: var(--texto-tenue); text-decoration: line-through; }
.diff .despues { color: var(--texto); }

/* Legal */
.legal { max-width: 760px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 28px 24px; }
.legal h1 { font-size: 1.6rem; }
.legal h2 { font-size: 1.1rem; margin-top: 1.4em; }
.legal .fecha { color: var(--texto-suave); font-size: .9rem; }

/* Pie */
.pie { color: var(--texto-suave); font-size: .85rem; margin-top: auto; border-top: 1px solid var(--borde); }
.pie-int { max-width: var(--ancho); margin: 0 auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.pie-enlaces { display: flex; gap: 6px 16px; flex-wrap: wrap; }
.pie-enlaces a { color: var(--texto-suave); font-weight: 600; }
.pie-enlaces a:hover { color: var(--teal); }
.pie-idioma select { font: inherit; font-size: .88rem; padding: 5px 10px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: var(--superficie); color: var(--texto); min-height: 34px; }
.pie-empresa { margin: 0; color: var(--texto-tenue); }
.pie-empresa a { color: var(--texto-suave); font-weight: 600; }
.pie-empresa a:hover { color: var(--teal); }

/* Móvil */
@media (max-width: 560px) {
  .barra--simple .barra-web { font-size: .86rem; padding: 8px 6px; }
  .btn { min-height: 44px; }
  .btn--peq { min-height: 36px; }
  .marca-sub { display: none; }
  .marca-lockup { height: 34px; }
  /* La navegación pasa a una segunda fila con desplazamiento horizontal: nunca se parte una etiqueta. */
  .barra > .barra-int { flex-wrap: wrap; row-gap: 0; padding-bottom: 2px; }
  .subnav-admin .barra-int { flex-wrap: nowrap; }
  .subnav-admin a { padding: 12px 8px; font-size: .9rem; }
  .barra-nav { width: 100%; margin-left: 0; gap: 0; overflow-x: auto; scrollbar-width: none; }
  .barra-nav::-webkit-scrollbar { display: none; }
  .barra-nav a, .barra-nav .enlace-boton { padding: 8px 10px 10px; font-size: .9rem; min-height: 40px; white-space: nowrap; border-radius: 0; border-bottom: 2px solid transparent; }
  .barra-nav a.activo { background: none; border-bottom-color: var(--aqua); }
  .barra-nav a:hover, .barra-nav .enlace-boton:hover { background: none; }
  .barra-nav .enlace-boton { margin-left: auto; }
  .tabla th, .tabla td { padding: 10px 10px; }
}
@media (min-width: 720px) {
  h1 { font-size: 1.9rem; }
  .contenido { padding: 28px 24px 56px; }
  .tarjeta { padding: 22px 24px; }
  .rejilla-2 { grid-template-columns: 1fr 1fr; }
  .radios-tarjeta { grid-template-columns: repeat(3, 1fr); }
  .fila-agente { grid-template-columns: 40px 1fr auto; }
  .fila-agente-derecha { text-align: right; min-width: 200px; }
  .probar { grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); }
  .datos-clave { grid-template-columns: 1fr 1fr; }
  .datos-clave--3 { grid-template-columns: repeat(3, 1fr); }
  .contadores { grid-template-columns: repeat(4, 1fr); }
  .dos-columnas { grid-template-columns: 1fr 1fr; }
  .modulos { grid-template-columns: 1fr 1fr; }
  .llamada { grid-template-columns: 150px 1fr auto; align-items: center; }
  .pie-int { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .btn--grande { width: auto; min-width: 320px; }
}
@media (min-width: 1000px) {
  .modulos { grid-template-columns: 1fr 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .anillo--creando { border-top-color: var(--teal); }
}
@media print {
  .barra, .pie, .pestanas, .btn, .menu { display: none !important; }
}