/* ARCHIVO MONTADO por montar.js: estilos del panel de las webs + propio.css */
:root {
  --bg: #f3f6fb; --panel: #fff; --text: #1b2433; --muted: #667085; --line: #e6eaf0; --hover: #f1f5fb; --campo: #aab3c2; --campo-hover: #8a94a6; /* borde de los campos: más marcado que las líneas */
  --accent: #2563eb; --accent-fg: #fff; --accent-soft: #e8f0fe; --danger: #dc2626; --ok: #16a34a; --warn: #b45309;
  --radius: 14px; --shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06);
  /* colores de los iconos: fondo suave y trazo */
  --i-azul: #e0ecff; --t-azul: #2563eb; --i-verde: #dcfce7; --t-verde: #16a34a; --i-rosa: #fde7f3; --t-rosa: #db2777;
  --i-ambar: #fef3c7; --t-ambar: #d97706; --i-violeta: #ede9fe; --t-violeta: #7c3aed; --i-cian: #cffafe; --t-cian: #0891b2;
  --i-rojo: #fee2e2; --t-rojo: #dc2626; --i-gris: #eef1f5; --t-gris: #475467;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #11151c; --panel: #1a2029; --text: #e6e9ef; --muted: #98a2b3; --line: #2a323e; --hover: #222a35; --campo: #566173; --campo-hover: #6b7689;
    --accent: #6b9bff; --accent-fg: #0b1020; --accent-soft: #1d2b47; --danger: #f87171; --ok: #4ade80; --warn: #fbbf24; --shadow: none;
    --i-azul: #1d2f52; --t-azul: #93b8ff; --i-verde: #14391f; --t-verde: #86efac; --i-rosa: #45182f; --t-rosa: #f9a8d4;
    --i-ambar: #3f2e0c; --t-ambar: #fcd34d; --i-violeta: #2e2352; --t-violeta: #c4b5fd; --i-cian: #0e3540; --t-cian: #67e8f9;
    --i-rojo: #44191a; --t-rojo: #fca5a5; --i-gris: #262e3a; --t-gris: #cbd2dc;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.cargando { padding: 40px; color: var(--muted); }

/* iconos de color: cuadrado suave con el trazo del mismo tono */
.ico { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ico-azul, .ico-verde, .ico-rosa, .ico-ambar, .ico-violeta, .ico-cian, .ico-rojo, .ico-gris { width: 36px; height: 36px; border-radius: 10px; }
:is(.ico-azul, .ico-verde, .ico-rosa, .ico-ambar, .ico-violeta, .ico-cian, .ico-rojo, .ico-gris) svg { width: 20px; height: 20px; }
.ico-azul { background: var(--i-azul); color: var(--t-azul); } .ico-verde { background: var(--i-verde); color: var(--t-verde); }
.ico-rosa { background: var(--i-rosa); color: var(--t-rosa); } .ico-ambar { background: var(--i-ambar); color: var(--t-ambar); }
.ico-violeta { background: var(--i-violeta); color: var(--t-violeta); } .ico-cian { background: var(--i-cian); color: var(--t-cian); }
.ico-rojo { background: var(--i-rojo); color: var(--t-rojo); } .ico-gris { background: var(--i-gris); color: var(--t-gris); }

/* acceso: ilustración a la izquierda y formulario a la derecha */
.acceso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 520px); min-height: 100vh; }
.acceso-ilus { display: flex; align-items: center; justify-content: center; padding: 40px; background: linear-gradient(160deg, var(--accent-soft), var(--bg)); }
.acceso-ilus img { width: 100%; max-width: 440px; height: auto; border-radius: 24px; }
.acceso-form { display: flex; align-items: center; justify-content: center; padding: 32px 20px; background: var(--panel); }
.login { width: 100%; max-width: 380px; }
.login-logo .ico { width: 52px; height: 52px; border-radius: 14px; background: var(--accent); color: #fff; margin-bottom: 18px; box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent); }
.login-logo svg { width: 26px; height: 26px; }
.login h1 { font-size: 26px; margin: 0 0 4px; }
.login p { color: var(--muted); margin: 0 0 26px; }
.login .btn.grande { width: 100%; justify-content: center; padding: 12px; font-size: 16px; margin-top: 6px; }
@media (max-width: 860px) { .acceso { grid-template-columns: 1fr; } .acceso-ilus { display: none; } }

/* estructura: menú lateral sobre el fondo y contenido en tarjetas blancas */
.layout { display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 18px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.side .marca { display: flex; align-items: center; gap: 12px; padding: 4px 8px 18px; }
.side .logo { width: 42px; height: 42px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; background: linear-gradient(135deg, #3b82f6, #1d4ed8); box-shadow: 0 6px 14px rgba(37,99,235,.3); }
.side .marca strong { display: block; font-size: 17px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.side .marca small { display: block; color: var(--muted); font-size: 12.5px; }
.side .btn.nuevo { justify-content: flex-start; gap: 12px; padding: 13px 18px; font-size: 16px; border-radius: 12px; margin: 0 0 14px; box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent); }
.side .btn.nuevo .ico svg { width: 20px; height: 20px; }
.nav-lista { display: flex; flex-direction: column; gap: 2px; }
.side .nav-lista a { display: flex; align-items: center; gap: 12px; padding: 6px 10px; border-radius: 12px; text-decoration: none; color: var(--text); font-size: 15px; }
.side .nav-lista a > span:last-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .nav-lista a:hover { background: var(--hover); }
.side .nav-lista a.act { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.side .grupo { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; padding: 16px 12px 6px; border-top: 1px solid var(--line); margin-top: 8px; }
.side-pie { margin-top: auto; padding: 16px 12px 4px; font-size: 12.5px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.side-pie a { color: var(--muted); text-decoration: none; }
.main { padding: 16px 24px 28px 8px; min-width: 0; }

/* barra superior: buscador, ver web y cuenta */
.barra { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.buscador { flex: 1; max-width: 680px; display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 0 14px; box-shadow: var(--shadow); }
.buscador .ico { color: var(--muted); }
.buscador input[type=search] { border: 0; background: transparent; padding: 12px 0; outline: 0; box-shadow: none; }
.buscador:focus-within { border-color: var(--accent); }
.barra-der { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.btn-icono { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); background: transparent; border: 0; cursor: pointer; }
.btn-icono:hover { background: var(--panel); color: var(--text); }
.btn-icono svg { width: 22px; height: 22px; }
.menu-btn { display: none; }
.yo { position: relative; }
.avatar { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--panel); background: linear-gradient(135deg, #22c55e, #0ea5e9); color: #fff; font-weight: 700; cursor: pointer; box-shadow: 0 0 0 1px var(--line); }
.menu-yo { position: absolute; right: 0; top: 50px; z-index: 20; min-width: 240px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(16,24,40,.16); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.menu-yo-cab strong, .menu-yo-cab small { display: block; overflow: hidden; text-overflow: ellipsis; }
.menu-yo .btn { justify-content: center; }

/* cabecera de cada sección */
.top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.top-ico .ico { width: 44px; height: 44px; border-radius: 12px; }
.top-ico svg { width: 24px; height: 24px; }
.top h1 { font-size: 24px; margin: 0; flex: 1; min-width: 180px; letter-spacing: -.01em; }
.top-acc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.top-acc:empty { display: none; }
.velo { display: none; }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .side { position: fixed; z-index: 40; left: 0; top: 0; width: 290px; max-width: 86vw; background: var(--panel); transform: translateX(-105%); transition: transform .2s; box-shadow: 0 0 40px rgba(0,0,0,.2); }
  .menu-abierto .side { transform: none; }
  .menu-abierto .velo { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(15,23,42,.35); }
  .menu-btn { display: inline-flex; }
  .main { padding: 12px 16px 24px; }
  .barra .buscador { min-width: 0; }
}

/* elementos */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; margin-bottom: 18px; }
.btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--panel); padding: 9px 16px; border-radius: 10px; cursor: pointer; text-decoration: none; color: var(--text); white-space: nowrap; font-weight: 500; transition: background .15s, border-color .15s; }
.btn:hover { border-color: #c5cdd8; background: var(--hover); }
.btn.pri { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn.pri:hover { filter: brightness(1.06); background: var(--accent); }
.btn.peligro { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.btn:disabled { opacity: .5; cursor: default; }
.btn .ico svg { width: 18px; height: 18px; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], input[type=password], input[type=date], input[type=time], input[type=datetime-local], input[type=search], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--campo); border-radius: 10px; background: var(--panel); transition: border-color .15s, box-shadow .15s;
}
input:hover, select:hover, textarea:hover { border-color: var(--campo-hover); }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
textarea { min-height: 90px; resize: vertical; }
textarea.grande { min-height: 260px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; }
input[type=color] { width: 60px; height: 38px; padding: 2px; border: 1px solid var(--campo); border-radius: 8px; background: var(--panel); }
label.campo { display: block; margin-bottom: 16px; }
label.campo > span { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
label.campo > small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 4px; }
label.campo.error input, label.campo.error select, label.campo.error textarea { border-color: var(--danger); }
.check { display: flex; align-items: center; gap: 8px; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 18px; }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.aviso { padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line)); background: color-mix(in srgb, var(--warn) 8%, var(--panel)); }
.aviso.error { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); background: color-mix(in srgb, var(--danger) 7%, var(--panel)); color: var(--danger); }
.aviso.ok { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); background: color-mix(in srgb, var(--ok) 8%, var(--panel)); color: var(--ok); }
.aviso .mas-filas { margin-top: 10px; }
.muted { color: var(--muted); }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
pre { background: var(--bg); border: 1px solid var(--line); padding: 12px; border-radius: 10px; white-space: pre-wrap; word-break: break-all; }

/* tablas: filas como una bandeja de correo */
.tabla-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; }
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
tbody tr { cursor: pointer; transition: background .12s; }
tbody tr:hover td { background: var(--hover); }
tbody tr:focus-visible td, tbody tr:active td { background: var(--accent-soft); }
tbody tr td:first-child { border-radius: 10px 0 0 10px; } tbody tr td:last-child { border-radius: 0 10px 10px 0; }
tr:last-child td { border-bottom: 0; }
.con-av { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; }
.con-av strong { overflow: hidden; text-overflow: ellipsis; }
.av { width: 38px; height: 38px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #fff; }
.av-azul { background: #2563eb; } .av-verde { background: #16a34a; } .av-rosa { background: #e11d74; } .av-ambar { background: #ea8a0c; } .av-violeta { background: #7c3aed; } .av-cian { background: #0891b2; }
.vacio { padding: 26px 30px 34px; text-align: center; color: var(--muted); font-size: 15.5px; }
.vacio::before { content: ""; display: block; width: 170px; height: 170px; margin: 0 auto 6px; background: url(/admin/vacio.webp) center / contain no-repeat; }
.paginas { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--muted); flex-wrap: wrap; }
.busca { max-width: 280px; }
/* filtros como pestañas (Todos · No leídos · …) */
.filtros-pedidos { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.filtros-pedidos .btn { border: 0; background: none; border-radius: 0; padding: 10px 2px; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.filtros-pedidos .btn:hover { color: var(--text); background: none; }
.filtros-pedidos .btn.pri { color: var(--accent); border-bottom-color: var(--accent); background: none; font-weight: 600; filter: none; }

/* agenda */
.dia { margin-bottom: 18px; }
.dia h3 { font-size: 14px; margin: 0 0 8px; color: var(--muted); text-transform: capitalize; }
.dia h3.hoy { color: var(--accent); }
.cita { display: flex; gap: 14px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; padding: 10px 14px; margin-bottom: 6px; text-decoration: none; color: var(--text); }
.cita:hover { border-color: var(--muted); }
.cita .h { font-weight: 700; min-width: 105px; }
.cita .q { flex: 1; min-width: 0; }
.cita .q small { display: block; color: var(--muted); }
.cita.cancelada, .cita.no_presentado { opacity: .55; border-left-color: var(--muted); }
.cita.pendiente { border-left-color: var(--warn); }
.badge { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }

/* chat */
.burbuja { max-width: 80%; padding: 9px 12px; border-radius: 12px; margin-bottom: 8px; white-space: pre-wrap; }
.burbuja.usuario { background: var(--accent); color: var(--accent-fg); margin-left: auto; }
.burbuja.asistente { background: var(--bg); border: 1px solid var(--line); }
.burbuja small { display: block; opacity: .7; font-size: 11.5px; margin-top: 3px; }
.faq-item { border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-bottom: 10px; }

/* asistente: activación y datos en tiempo real */
.activar { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 18px; background: var(--bg); }
.activar small { display: block; margin-top: 4px; }
.dato { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.dato > small { display: block; margin: 4px 0 0 26px; }
.campos-dato { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0 26px; font-size: 14px; }
/* documentos y pruebas */
.fragmento { border-left: 3px solid var(--accent); padding: 6px 10px; margin: 10px 0; white-space: pre-wrap; font-size: 14px; }
.fragmento small { display: block; }
.probar-lista { max-height: 60vh; overflow-y: auto; }
.probar-form { display: flex; gap: 10px; align-items: flex-end; }
.probar-form textarea { min-height: 48px; }
.traza { margin: -2px 0 12px; font-size: 13px; color: var(--muted); }
.traza pre { max-height: 220px; overflow: auto; }
.dato > strong { display: block; margin-bottom: 6px; }
.sub-dato { border-top: 1px dashed var(--line); padding: 8px 0 4px; margin-top: 6px; }
.sub-dato > small, .sub-dato > input.dato-desc { display: block; margin: 4px 0 0 26px; width: calc(100% - 26px); }

/* Panel SEO de ilowy.com dentro del panel (viewSeo). */
.seo-frame { width: 100%; height: calc(100vh - 130px); min-height: 600px; border: 0; border-radius: 12px; background: var(--card, #fff); }

/* asistente: bloques desplegables, interruptor, vista previa y barra de guardar */
.form-asistente { display: flex; flex-direction: column; gap: 12px; }
.form-asistente .activar { margin-bottom: 4px; }
.interruptor { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor i { flex: none; width: 42px; height: 24px; border-radius: 999px; background: var(--line); position: relative; transition: background .2s; margin-top: 1px; }
.interruptor i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .2s; }
.interruptor input:checked + i { background: var(--ok); }
.interruptor input:checked + i::after { transform: translateX(18px); }
.interruptor input:focus-visible + i { outline: 3px solid var(--accent); outline-offset: 2px; }
.interruptor small { display: block; }
.bloque { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.bloque[open] { box-shadow: var(--shadow); }
.bloque > summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; user-select: none; }
.bloque > summary::-webkit-details-marker { display: none; }
.bloque > summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin: -4px 4px 0 0; transition: transform .2s; }
.bloque[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.bloque > summary:hover { background: var(--bg); }
.bl-titulo { flex: 1; min-width: 0; }
.bl-titulo strong { display: block; font-size: 15.5px; }
.bl-titulo small { display: block; font-size: 13px; }
.resumen { font-size: 12.5px; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; max-width: 45%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resumen.falta { color: var(--warn); border-color: var(--warn); }
.bl-cuerpo { padding: 4px 16px 16px; border-top: 1px solid var(--line); padding-top: 16px; }
.subtitulo { font-weight: 600; margin: 4px 0 8px; }
.aspecto { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.vista-chat { --c: #2563eb; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); box-shadow: 0 6px 24px rgba(0,0,0,.12); font-size: 13.5px; }
.vp-cab { background: var(--c); color: #fff; padding: 12px 14px; }
.vp-cab strong, .vp-cab small { display: block; }
.vp-cab small { opacity: .85; }
.vp-cuerpo { padding: 14px; min-height: 150px; background: var(--bg); }
.vp-saludo { background: var(--panel); border: 1px solid var(--line); border-radius: 12px 12px 12px 4px; padding: 8px 11px; max-width: 90%; white-space: pre-wrap; }
.vp-sug { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.vp-sug span { border: 1px solid var(--c); color: var(--c); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; background: var(--panel); }
.vp-pie { border-top: 1px solid var(--line); padding: 10px 14px; color: var(--muted); }
.guardar { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 12px 16px; margin-top: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 -4px 16px rgba(0,0,0,.06); }
@media (max-width: 900px) {
  .aspecto { grid-template-columns: 1fr; }
  .vista-chat { position: static; max-width: 340px; }
  .resumen { display: none; }
}
.form-asistente .activar { background: var(--panel); }

/* asistente: planes del chat y uso del mes */
.planes { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.uso { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.uso-txt { margin-bottom: 8px; }
.uso-barra { height: 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.uso-barra i { display: block; height: 100%; background: var(--ok); border-radius: 999px; }
.uso-barra.casi i { background: var(--warn); }
.uso-barra.lleno i { background: var(--danger); }
.uso .falta { display: block; margin-top: 8px; color: var(--danger); }
.planes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.plan { position: relative; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px 18px 18px; box-shadow: var(--shadow); }
.plan.destacado { border-color: var(--accent); }
.plan.activo { border: 2px solid var(--ok); }
.plan-etq { position: absolute; top: -11px; left: 18px; background: var(--accent); color: var(--accent-fg); font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; }
.plan h3 { margin: 0 0 6px; font-size: 17px; }
.plan-precio strong { font-size: 30px; line-height: 1.1; }
.plan-precio span { color: var(--muted); font-size: 13.5px; margin-left: 4px; }
.plan-sub { font-size: 13.5px; margin: 2px 0 12px; }
.plan-conv { background: var(--bg); border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; font-size: 14px; }
.plan-conv strong { font-size: 16px; }
.plan ul { margin: 0 0 16px; padding-left: 18px; font-size: 14px; flex: 1; }
.plan li { margin-bottom: 4px; }
.plan .btn { justify-content: center; }
.plan-actual { display: block; text-align: center; padding: 8px; border-radius: 8px; background: var(--bg); color: var(--ok); font-weight: 600; }
.plan-extra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--panel); border: 1px dashed var(--line); border-radius: var(--radius); padding: 12px 16px; }
.web-leida { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: center; background: var(--bg); border: 1px solid var(--line); border-left: 4px solid var(--ok); border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; }
.web-leida.falta { border-left-color: var(--warn); }
.web-leida small { grid-column: 1; font-size: 12.5px; }
.web-leida .btn { grid-column: 2; grid-row: 1 / span 2; }
.vista-col { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; }
.vista-inv.con-icono { display: flex; gap: 10px; align-items: flex-start; text-align: left; max-width: 270px; padding: 10px 14px 10px 10px; }
.vista-inv.con-icono img { width: 36px; height: 36px; flex: none; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.vista-inv strong { display: block; margin-bottom: 2px; }
.vp-cab { display: flex; gap: 10px; align-items: center; }
.vp-logo { width: 32px; height: 32px; flex: none; border-radius: 50%; background: #fff; padding: 3px; object-fit: contain; }
.icono-chat { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.icono-vista { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--panel); border: 1px solid var(--line); }
.icono-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.vista-inv {align-self: flex-end; max-width: 240px; text-align: center; white-space: pre-line; background: var(--panel); border: 2px solid var(--c, var(--line)); border-radius: 16px 16px 4px 16px; box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 10px 14px; font-size: 13.5px; }
.campo-invitacion { display: grid; grid-template-columns: 1fr auto; gap: 0 14px; align-items: center; }
.campo-invitacion .check { margin-bottom: 14px; }
@media (max-width: 900px) { .vista-col { position: static; max-width: 340px; } }

/* panel de clientes que solo tienen el chat: invitación a alojamiento y dominio */
.oferta-ilowy { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, var(--panel)), var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 18px; }
.oferta-ilowy strong { display: block; font-size: 15.5px; }
.oferta-ilowy span { font-size: 13.5px; }
.oferta-ilowy.destacada { border-color: var(--accent); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 20%, var(--panel)), var(--panel)); }
.oferta-ilowy .acciones { margin-top: 0; }

/* tablas: plantillas, campos nuevos; formularios del agente; claves y secretos */
.plantillas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
.plantilla { display: flex; flex-direction: column; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.plantilla p { margin: 0; font-size: 13.5px; flex: 1; }
.plantilla.hecha { border-color: var(--ok); }
.fila-campo { display: grid; grid-template-columns: minmax(160px, 2fr) minmax(130px, 1fr) minmax(140px, 1.5fr) auto auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.fila-campo .f-ops[hidden] { display: none; }
.fila-campo .f-desc { grid-column: 1 / -1; margin-bottom: 8px; }
.explicar-campos { margin-top: 10px; }
@media (max-width: 700px) { .fila-campo { grid-template-columns: 1fr 1fr; } }
.campos-crear { gap: 6px 18px; }
.campo-crear { display: inline-flex; align-items: center; gap: 6px; }
.campo-crear .oblig { font-size: 12px; color: var(--muted); }
.secreto pre { user-select: all; margin: 6px 0; }
.dato .badge { margin-left: 6px; }

/* tienda online */
.tienda-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.dato-num { display: flex; flex-direction: column; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; text-decoration: none; color: var(--text); }
.dato-num strong { font-size: 26px; }
.dato-num span { color: var(--muted); font-size: 13.5px; }
.fotos-producto { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.fotos-producto figure { margin: 0; width: 140px; display: flex; flex-direction: column; gap: 6px; }
.fotos-producto img { width: 140px; height: 140px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); }
.fotos-producto figcaption { display: flex; gap: 6px; flex-wrap: wrap; }
.fotos-producto .btn { padding: 4px 8px; font-size: 13px; }
.tabla-variantes, .tabla-pedido { margin-bottom: 12px; }
.tabla-variantes td, .tabla-pedido td { white-space: normal; }
input.mini { width: 80px; }
.fila-variante { display: grid; grid-template-columns: 2fr 1.4fr 0.7fr 1fr auto; gap: 8px; align-items: center; }
@media (max-width: 800px) { .fila-variante { grid-template-columns: 1fr 1fr; } }
.totales-pedido { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-bottom: 16px; }
.totales-pedido strong { font-size: 18px; }
.filtros-pedidos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.badge.estado-pendiente_pago { color: var(--warn); border-color: var(--warn); }
.badge.estado-pagado, .badge.estado-preparando { color: var(--accent); border-color: var(--accent); }
.badge.estado-enviado, .badge.estado-listo_recoger, .badge.estado-entregado { color: var(--ok); border-color: var(--ok); }
.badge.estado-cancelado, .badge.estado-devuelto { color: var(--danger); border-color: var(--danger); }

/* asistente: iconos de bloque, apartados con aire, muestras de color y sugerencias numeradas */
.bl-ico { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.bl-ico .ico svg { width: 20px; height: 20px; }
.bl-aspecto { background: #fde7f3; color: #be185d; }
.bl-saber { background: #e0edff; color: #1d4ed8; }
.bl-datos { background: #dcfce7; color: #15803d; }
.bl-comportamiento { background: #fef3c7; color: #b45309; }
.bl-instalacion { background: #ede9fe; color: #6d28d9; }
@media (prefers-color-scheme: dark) {
  .bl-aspecto { background: #4a1d34; color: #f9a8d4; } .bl-saber { background: #1e3a5f; color: #93c5fd; } .bl-datos { background: #14532d; color: #86efac; }
  .bl-comportamiento { background: #4a3410; color: #fcd34d; } .bl-instalacion { background: #3b2a63; color: #c4b5fd; }
}
.bl-cuerpo { display: flex; flex-direction: column; gap: 14px; }
.aspecto-campos { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.grupo-form { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 4px; }
.gf-cab { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.gf-cab .ico { width: 30px; height: 30px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); color: var(--accent); }
.gf-cab strong { display: block; font-size: 14.5px; }
.gf-cab small { display: block; font-size: 12.5px; margin-top: 1px; }
.gf-cuerpo > textarea, .gf-cuerpo > input, .gf-cuerpo > pre { margin-bottom: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 14px; }
.muestras { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.muestra { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.muestra:hover { transform: scale(1.1); }
.color-campo input[type=color] { width: 46px; height: 34px; }
.sugerencias .sug { position: relative; margin-bottom: 10px; }
.sugerencias .sug .num { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0; }
.sugerencias .sug input { padding-left: 40px; }
.campo-invitacion { gap: 0 14px; }
.color-campo { margin-bottom: 14px; } .color-campo > span { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.otra-web > summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: 6px 0; } .otra-web[open] > summary { margin-bottom: 12px; } .otra-web > .grupo-form { margin-bottom: 12px; }
.franja { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.franja input[type=time] { width: auto; }
.dias { display: flex; gap: 4px; }
.dia-chk { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 13px; background: var(--panel); }
.dia-chk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dia-chk:has(input:checked) { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.dia-chk:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
div.campo > span { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 4px; }

/* ajustes del diseño nuevo */
.top-acc .busca { width: 240px; }
@media (min-width: 901px) { .top-acc { flex-wrap: nowrap; } }
label.campo.check { display: flex; align-items: center; gap: 10px; padding-top: 30px; }
label.campo.check > span { margin: 0; font-weight: 600; font-size: 13.5px; }
.cita { border-radius: 12px; box-shadow: var(--shadow); padding: 12px 16px; }
.dato-num, .plantilla { box-shadow: var(--shadow); }
details > summary { cursor: pointer; }
.dia { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 18px 8px; margin-bottom: 12px; }
.dia h3 { text-transform: none; font-size: 14.5px; color: var(--text); }
.dia h3::first-letter { text-transform: uppercase; }
.dia > p.muted { margin: 0 0 8px; }
.guardados h2 { display: flex; align-items: center; gap: 10px; font-size: 17px; margin: 0 0 12px; }
.guardados .tabla-wrap { box-shadow: none; }
/* blog */
label.campo.ancho { grid-column: 1 / -1; }
/* ficha por apartados (producto de la tienda) */
.secciones-form { display: flex; flex-direction: column; gap: 6px; max-width: 920px; }
.form-seccion { padding: 18px 0 8px; border-top: 1px solid var(--line); }
.form-seccion:first-child { border-top: 0; padding-top: 0; }
.form-seccion > h3 { font-size: 15px; margin: 0 0 4px; }
.form-seccion > p.muted { margin: 0 0 12px; font-size: 13px; }
.fila-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 18px; }
.fila-form[hidden], .fila-checks[hidden] { display: none; }
.fila-checks { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 4px 0 12px; }
.fila-checks label.campo.check { margin: 0; padding-top: 0; }
.mas-opciones > summary { cursor: pointer; font-weight: 600; font-size: 15px; margin-bottom: 12px; }
textarea.texto-entrada { min-height: 420px; line-height: 1.6; }
.portada-entrada img { width: 100%; max-width: 520px; aspect-ratio: 16/10; object-fit: cover; border-radius: 12px; display: block; margin-bottom: 12px; }
.creditos-blog strong { font-size: 18px; }
label.campo.check.suelto { padding-top: 0; }
.oferta-alojamiento { display: grid; grid-template-columns: minmax(140px, .5fr) repeat(3, minmax(0, 1fr)); gap: 8px; align-items: stretch; padding: 6px; margin-bottom: 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, var(--panel)), color-mix(in srgb, var(--accent) 5%, var(--panel))); }
.oferta-cab { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0 8px; min-width: 0; }
.oferta-cab strong { font-size: 14px; line-height: 1.25; }
.oferta-cab span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.oferta-cab .oferta-contratar { align-self: flex-start; margin-top: 4px; padding: 5px 12px; font-size: 13px; white-space: nowrap; }
.oferta-bloque { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 9px; background: var(--panel); border: 1px solid var(--line); color: inherit; text-decoration: none; min-width: 0; transition: border-color .15s; }
.oferta-bloque:hover { border-color: var(--accent); }
.oferta-bloque.destacado { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.oferta-bloque > div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.oferta-bloque small { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oferta-bloque span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oferta-bloque strong { font-size: 18px; white-space: nowrap; }
.oferta-bloque em { font-style: normal; font-size: 15px; font-weight: 600; color: var(--accent); white-space: nowrap; }
@media (max-width: 1250px) { .oferta-bloque em { display: none; } }
@media (max-width: 1000px) { .oferta-alojamiento { grid-template-columns: repeat(3, minmax(0, 1fr)); } .oferta-cab { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px; } .oferta-cab .oferta-contratar { margin-top: 0; } }
@media (max-width: 640px) { .oferta-alojamiento { gap: 4px; padding: 4px; } .oferta-bloque { padding: 4px 8px; gap: 6px; } .oferta-bloque span { display: none; } .oferta-bloque small { font-size: 0; } .oferta-bloque small::before { content: attr(data-corto); font-size: 10px; letter-spacing: 0; } .oferta-bloque strong { font-size: 14px; } }

/* ---------- estadísticas ---------- */
/* paleta de los gráficos: orden fijo validado (daltonismo y contraste) en claro y oscuro */
:root { --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #6250d6; --s8: #e34948;
  --q0: var(--hover); --q1: #cde2fb; --q2: #9ec5f4; --q3: #6da7ec; --q4: #3987e5; --q5: #256abf; --q6: #184f95; }
@media (prefers-color-scheme: dark) {
  :root { --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
    --q0: #222a35; --q1: #163a6b; --q2: #1c5cab; --q3: #2a78d6; --q4: #5598e7; --q5: #86b6ef; --q6: #b7d3f6; }
}
.st-rangos { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.st-rangos a { padding: 6px 12px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.st-rangos a:hover { color: var(--text); background: var(--hover); }
.st-rangos a.act { background: var(--accent); color: var(--accent-fg); }
.st-vivo { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--muted); padding: 7px 12px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); white-space: nowrap; }
.st-vivo i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.st-vivo.activo { color: var(--text); }
.st-vivo.activo i { background: #0ca30c; box-shadow: 0 0 0 0 rgba(12,163,12,.5); animation: st-pulso 2s infinite; }
@keyframes st-pulso { 70% { box-shadow: 0 0 0 7px rgba(12,163,12,0); } 100% { box-shadow: 0 0 0 0 rgba(12,163,12,0); } }
@media (prefers-reduced-motion: reduce) { .st-vivo.activo i { animation: none; } }
.st-periodo { margin: -6px 0 14px; font-size: 13.5px; }
.st-cifras { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (max-width: 1300px) { .st-cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .st-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.st-cifra { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-cifra-cab { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 2px 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.st-cifra-cab > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-cifra > strong { font-size: 26px; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-delta { font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.st-delta.sube { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.st-delta.baja { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.st-delta.neutro { color: var(--muted); background: var(--hover); }
.st-mini { width: 100%; height: 30px; margin-top: 4px; }
.st-card { padding: 18px 20px; margin-bottom: 0; min-width: 0; }
.st-card-cab { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; margin-bottom: 12px; }
.st-card-cab h2 { font-size: 16px; margin: 0; }
.st-card-cab small { font-size: 12.5px; }
.st-principal { margin-bottom: 16px; }
.st-principal .st-card-cab { align-items: center; }
.st-principal .st-leyenda { margin-left: auto; }
.st-btn { padding: 5px 10px; font-size: 13px; }
.st-graf { width: 100%; min-height: 220px; }
.st-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.st-grid { stroke: var(--line); stroke-width: 1; }
.st-base { stroke: color-mix(in srgb, var(--muted) 45%, var(--line)); stroke-width: 1; }
.st-eje { fill: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.st-cruz { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.st-punto { stroke: var(--panel); stroke-width: 2; }
.st-tip { position: fixed; z-index: 1000; pointer-events: none; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 28px rgba(16,24,40,.16); padding: 9px 12px; font-size: 13px; min-width: 150px; max-width: 300px; }
.st-tip strong { display: block; margin-bottom: 4px; font-size: 12.5px; }
.st-tip-fila { display: flex; align-items: center; gap: 8px; padding: 1px 0; }
.st-tip-fila span { flex: 1; color: var(--muted); }
.st-tip-fila b { font-variant-numeric: tabular-nums; }
.st-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.st-sw.disc { height: 0; width: 14px; border-radius: 0; background: none; border-top: 2px dashed var(--c); }
.st-leyenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13px; }
.st-leyenda li { display: flex; align-items: center; gap: 8px; }
.st-leyenda li span { flex: 1; }
.st-leyenda li b { font-variant-numeric: tabular-nums; }
.st-leyenda li small { color: var(--muted); width: 48px; text-align: right; font-variant-numeric: tabular-nums; }
.st-leyenda.fila { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.st-leyenda.fila li span { flex: none; color: var(--muted); }
.st-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
@media (max-width: 1100px) { .st-rejilla { grid-template-columns: 1fr; } }
.st-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.st-lista li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; isolation: isolate; }
.st-lista li::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 4px; background: color-mix(in srgb, var(--c) 15%, transparent); z-index: -1; }
.st-lista li:hover::before { background: color-mix(in srgb, var(--c) 24%, transparent); }
.st-lista-et { min-width: 0; overflow: hidden; }
.st-lista-v { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; display: flex; gap: 8px; align-items: baseline; }
.st-lista-v small { color: var(--muted); font-weight: 500; width: 46px; text-align: right; }
.st-pag { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.st-pag > span, .st-pag small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-pag small { font-size: 11.5px; }
.st-pais { display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-flag { font-size: 17px; line-height: 1; }
.st-vacio-mini { font-size: 13.5px; margin: 6px 0; }
.st-sub { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 18px 0 8px; }
.st-pest { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: -4px 0 12px; overflow-x: auto; }
.st-pest button { background: none; border: 0; padding: 7px 10px; font-size: 13.5px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; }
.st-pest button:hover { color: var(--text); }
.st-pest button.act { color: var(--accent); border-bottom-color: var(--accent); }
.st-anillo-caja { display: grid; grid-template-columns: 170px 1fr; gap: 18px; align-items: center; }
@media (max-width: 480px) { .st-anillo-caja { grid-template-columns: 1fr; justify-items: center; } .st-anillo-caja .st-leyenda { width: 100%; } }
.st-anillo { width: 170px; height: 170px; }
.st-seg { stroke: var(--panel); stroke-width: 2; stroke-linejoin: round; transition: opacity .12s; }
.st-anillo:hover .st-seg { opacity: .55; }
.st-anillo .st-seg:hover { opacity: 1; }
.st-anillo-n { fill: var(--text); font-size: 24px; font-weight: 700; }
.st-apilada { display: flex; gap: 2px; height: 14px; margin: 4px 0 12px; }
.st-apilada span { background: var(--c); border-radius: 4px; min-width: 4px; }
.st-apilada + .st-leyenda { margin-bottom: 14px; }
.st-acciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.st-accion { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.st-accion > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.st-accion strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.st-accion span { font-size: 13px; }
.st-accion small { font-size: 11.5px; }
.st-accion.cero { opacity: .62; }
.st-accion-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--i-azul); color: var(--t-azul); }
.st-accion-ico svg { width: 18px; height: 18px; }
.st-calor { display: grid; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 3px; font-size: 11px; color: var(--muted); }
.st-calor-h { text-align: left; font-variant-numeric: tabular-nums; }
.st-calor-d { align-self: center; }
.st-celda { aspect-ratio: 1; border-radius: 3px; background: var(--q0); min-height: 10px; }
.st-celda.q1 { background: var(--q1); } .st-celda.q2 { background: var(--q2); } .st-celda.q3 { background: var(--q3); }
.st-celda.q4 { background: var(--q4); } .st-celda.q5 { background: var(--q5); } .st-celda.q6 { background: var(--q6); }
.st-calor .st-celda:hover { outline: 2px solid var(--text); outline-offset: 1px; }
.st-calor-ley { display: flex; align-items: center; gap: 4px; justify-content: flex-end; font-size: 11.5px; color: var(--muted); margin-top: 10px; }
.st-calor-ley .st-celda { width: 12px; min-height: 12px; }
.st-vels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .st-vels { grid-template-columns: 1fr; } }
.st-vel { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; border-top: 3px solid var(--line); }
.st-vel span.muted { font-size: 12.5px; font-weight: 600; }
.st-vel strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.st-vel small { font-size: 12px; line-height: 1.35; }
.st-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; }
.st-estado i { font-style: normal; font-size: 11px; }
.st-vel.ok { border-top-color: #0ca30c; } .st-vel.ok .st-estado { color: var(--ok); }
.st-vel.medio { border-top-color: #fab219; } .st-vel.medio .st-estado { color: var(--warn); }
.st-vel.mal { border-top-color: #d03b3b; } .st-vel.mal .st-estado { color: var(--danger); }
.st-ahora { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.st-ahora strong { font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.st-excluir { margin-top: 4px; }
.st-nota { font-size: 12.5px; margin-top: 6px; }
.st-vacio { text-align: center; padding: 36px 22px; }
.st-vacio img { width: 160px; max-width: 60%; margin-bottom: 8px; }
.st-vacio h2 { font-size: 18px; margin: 0 0 6px; }
.st-tabla { margin-top: 4px; max-height: 360px; overflow-y: auto; }
.st-tabla tbody tr { cursor: default; }
.st-cc { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; padding: 1px 5px; border-radius: 4px; background: var(--hover); border: 1px solid var(--line); color: var(--muted); }

/* ---------- redes sociales ---------- */
:root { --rs-fb: #1877f2; --rs-ig: #d62976; }
@media (prefers-color-scheme: dark) { :root { --rs-fb: #5b9dff; --rs-ig: #f06fa8; } }
.ico.rs-red { color: var(--t-gris); }
.ico.rs-facebook { color: var(--rs-fb); }
.ico.rs-instagram { color: var(--rs-ig); }
.rs-est.est-borrador { background: var(--i-gris); color: var(--t-gris); border-color: transparent; }
.rs-est.est-programada { background: var(--i-azul); color: var(--t-azul); border-color: transparent; }
.rs-est.est-publicando, .rs-est.est-parcial { background: var(--i-ambar); color: var(--t-ambar); border-color: transparent; }
.rs-est.est-publicada { background: var(--i-verde); color: var(--t-verde); border-color: transparent; }
.rs-est.est-error { background: var(--i-rojo); color: var(--t-rojo); border-color: transparent; }
.dato-num.rs-con-error strong { color: var(--danger); }

.rs-bienvenida { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.rs-bienvenida > div:nth-child(2) { flex: 1 1 320px; }
.rs-bienvenida h2 { margin: 0 0 4px; }
.rs-bienvenida p { margin: 0; }
.rs-bienvenida-redes { display: flex; gap: 8px; }
.rs-bienvenida-redes .ico { width: 52px; height: 52px; border-radius: 14px; background: var(--hover); display: inline-flex; align-items: center; justify-content: center; }
.rs-bienvenida-redes .ico svg { width: 26px; height: 26px; }

/* calendario */
.rs-cal-cab { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.rs-cal-cab h2 { margin: 0 8px; min-width: 170px; text-align: center; font-size: 18px; }
.rs-cal-cab .st-btn { margin-left: auto; }
.rs-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.rs-cal-dsem { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; padding: 8px 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--hover); }
.rs-cal-dia { min-height: 112px; padding: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rs-cal-dia.fuera { background: color-mix(in srgb, var(--hover) 60%, transparent); }
.rs-cal-dia.fuera .rs-cal-num span { color: var(--muted); opacity: .6; }
.rs-cal-num { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; }
.rs-cal-num span { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.rs-cal-dia.hoy .rs-cal-num span { background: var(--accent); color: var(--accent-fg); }
.rs-cal-mas { width: 24px; height: 24px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); opacity: 0; transition: opacity .15s; }
.rs-cal-mas .ico svg { width: 15px; height: 15px; }
.rs-cal-dia:hover .rs-cal-mas, .rs-cal-mas:focus-visible { opacity: 1; }
.rs-cal-mas:hover { background: var(--hover); color: var(--accent); }
.rs-chip { display: flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: 7px; font-size: 12px; text-decoration: none; color: var(--text); background: var(--i-gris); border-left: 3px solid var(--t-gris); min-width: 0; }
.rs-chip b { font-weight: 600; flex: none; }
.rs-chip-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.rs-chip-redes { display: inline-flex; flex: none; }
.rs-chip-redes .ico svg { width: 13px; height: 13px; }
.rs-chip.est-programada { background: var(--i-azul); border-left-color: var(--t-azul); }
.rs-chip.est-publicada { background: var(--i-verde); border-left-color: var(--t-verde); }
.rs-chip.est-publicando, .rs-chip.est-parcial { background: var(--i-ambar); border-left-color: var(--t-ambar); }
.rs-chip.est-error { background: var(--i-rojo); border-left-color: var(--t-rojo); }
.rs-chip:hover { filter: brightness(.97); }

/* listas */
.rs-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 18px; }
.rs-columnas h2 { margin-top: 0; }
.rs-lista { display: flex; flex-direction: column; }
.rs-fila { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); border-radius: 8px; }
.rs-fila:last-child { border-bottom: 0; }
.rs-fila:hover { background: var(--hover); }
.rs-fila img, .rs-sinfoto { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex: none; }
.rs-sinfoto { background: var(--hover); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.rs-fila-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rs-fila-txt strong { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-fila-redes { display: flex; gap: 2px; }
.rs-metricas { display: flex; gap: 12px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.rs-metricas span { display: inline-flex; align-items: center; gap: 4px; }
.rs-metricas .ico svg { width: 15px; height: 15px; }

/* cuentas */
.rs-cuentas { display: flex; flex-direction: column; gap: 8px; }
.rs-cuenta, .rs-resultado, .rs-proxima { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.rs-cuenta.mal, .rs-resultado.mal { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.rs-resultado.mal small { color: var(--danger); }
.rs-cuenta-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rs-red-card-cab { display: flex; align-items: center; gap: 12px; }
.rs-red-card-cab h2 { margin: 0; }
.rs-red-dobles { display: inline-flex; gap: 4px; }
.rs-red-dobles .ico { width: 40px; height: 40px; border-radius: 12px; background: var(--hover); display: inline-flex; align-items: center; justify-content: center; }
.rs-pasos { padding-left: 20px; margin: 8px 0 14px; }
.rs-btn-meta .ico { color: inherit; }
.rs-proximas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.rs-proxima span:nth-child(2) { flex: 1; }
.rs-elegir .rs-pagina { border: 1px solid var(--line); border-radius: 12px; padding: 6px 12px; margin-bottom: 10px; }
.rs-opcion { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; }
.rs-opcion > span:last-child { display: flex; flex-direction: column; }
.rs-sin-ig { margin: 4px 0 8px 28px; font-size: 13px; }

/* editor */
.rs-editor { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); gap: 18px; align-items: start; }
.rs-vista { position: sticky; top: 16px; }
.rs-compositor h2, .rs-vista h2 { margin-top: 0; }
.rs-destinos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.rs-destino { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 14px; }
.rs-destino:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.rs-destino:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.rs-destino input { margin: 0; }
textarea.rs-texto { min-height: 190px; font-size: 15px; line-height: 1.55; }
.rs-contador { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.rs-contador span { display: inline-flex; align-items: center; gap: 4px; }
.rs-contador .ico svg { width: 14px; height: 14px; }
.rs-contador .mal { color: var(--danger); font-weight: 600; }
.rs-etq { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.rs-fotos { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.rs-fotos:empty { display: none; }
.rs-fotos figure { margin: 0; position: relative; width: 110px; height: 110px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.rs-fotos.solo figure { width: 160px; height: 160px; }
.rs-fotos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-foto-acc { position: absolute; top: 4px; right: 4px; display: flex; gap: 4px; }
.rs-foto-acc .btn-icono { width: 28px; height: 28px; border-radius: 8px; background: rgba(0,0,0,.6); color: #fff; }
.rs-foto-acc .ico svg { width: 15px; height: 15px; }
.rs-campo-texto { margin-bottom: 18px; }
.rs-compositor .campo > small { display: block; margin-top: 6px; }
.rs-ia-caja { margin-top: 12px; padding: 14px; border: 1px dashed var(--line); border-radius: 12px; }
.rs-ia-caja .campo { margin-bottom: 8px; }
.rs-ia { margin: 20px 0 6px; padding: 16px; border-radius: 12px; background: var(--i-violeta); }
.rs-ia h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; font-size: 15px; color: var(--t-violeta); }
.rs-ia > p { margin: 0 0 10px; }
.rs-ia-fila { display: flex; gap: 8px; }
.rs-ia-fila input { flex: 1; background: var(--panel); }
.rs-opciones { display: grid; gap: 10px; margin-top: 12px; }
.rs-opciones:empty { display: none; }
.rs-opcion-ia { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.rs-opcion-ia p { white-space: pre-line; margin: 4px 0 10px; font-size: 14px; }
.rs-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.rs-programar { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.rs-programar input { width: auto; }
.rs-borrar { justify-content: flex-end; }
.rs-pest { margin-bottom: 12px; }
.rs-pest button { display: inline-flex; align-items: center; gap: 6px; }

/* vista previa */
.rs-mock { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); margin-bottom: 8px; font-size: 14px; }
.rs-mock-cab { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.rs-mock-cab > div { display: flex; flex-direction: column; line-height: 1.25; }
.rs-av { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none; }
.rs-mock-ig .rs-av { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--rs-ig); width: 32px; height: 32px; }
.rs-mock-txt { margin: 0; padding: 0 12px 10px; white-space: pre-line; overflow-wrap: anywhere; }
.rs-mock-ig .rs-mock-txt { padding-top: 2px; }
.rs-mock-img { position: relative; background: var(--hover); }
.rs-mock-img img { width: 100%; display: block; max-height: 560px; object-fit: cover; }
.rs-mock-ig .rs-mock-img img { aspect-ratio: 4 / 5; object-fit: cover; }
.rs-mock-img.vacia { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }
.rs-mock-img.fb { display: grid; gap: 2px; }
.rs-mock-img.fb.n2 { grid-template-columns: 1fr 1fr; }
.rs-mock-img.fb.n3 { grid-template-columns: 1fr 1fr; }
.rs-mock-img.fb.n3 img:first-child { grid-column: 1 / -1; }
.rs-mock-img.fb.n2 img, .rs-mock-img.fb.n3 img { aspect-ratio: 1; object-fit: cover; }
.rs-mock-n { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,.65); color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 999px; }
.rs-mock-iconos { display: flex; gap: 14px; padding: 10px 12px 6px; }
.rs-mock-pie { display: flex; justify-content: space-around; border-top: 1px solid var(--line); padding: 8px; color: var(--muted); font-size: 13px; font-weight: 600; }
.rs-mock-pie span { display: inline-flex; align-items: center; gap: 6px; }
.rs-mock-pie .ico svg { width: 16px; height: 16px; }

/* publicada */
.rs-pub-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.rs-pub-texto { white-space: pre-line; font-size: 15px; max-width: 70ch; }
.rs-resultados { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }

@media (max-width: 1000px) {
  .rs-editor { grid-template-columns: 1fr; }
  .rs-vista { position: static; }
}
@media (max-width: 640px) {
  .rs-cal-dia { min-height: 64px; padding: 3px; }
  .rs-cal-dsem { padding: 6px 2px; text-align: center; font-size: 11px; }
  .rs-chip { padding: 2px 3px; justify-content: center; }
  .rs-chip b, .rs-chip-txt { display: none; }
  .rs-cal-mas { display: none; }
  .rs-cal-cab h2 { min-width: 0; font-size: 16px; }
  .rs-programar { margin-left: 0; width: 100%; }
  .rs-programar input { flex: 1; }
  .rs-ia-fila { flex-direction: column; }
  .rs-fila .rs-metricas { display: none; }
}

/* tienda: pasarelas de pago */
.pg-tarjeta > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 16px; }
.pg-tarjeta[open] > summary { margin-bottom: 8px; }
.badge.pg-real { color: var(--ok); border-color: var(--ok); }
.badge.pg-pruebas { color: var(--warn); border-color: var(--warn); }
.pg-form { display: flex; flex-direction: column; gap: 8px; }
.pg-datos { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.pg-datos > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pg-datos small { flex-basis: 100%; }
.pg-datos code { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; word-break: break-all; }
.pg-fila { display: flex; gap: 8px; }
.pg-fila input { flex: 1; }
.pg-charla { margin: 10px 0; }
.pg-registro { margin: 0; padding-left: 18px; }
.pg-intento { display: block; }
.badge.estado-caducado { color: var(--muted); }
.pg-tarjeta > .check { margin: 12px 0; }

/* tienda: ficha de producto con IA */
.ficha-ia-foto { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.ficha-ia-foto img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.ficha-ia .aviso ul { margin: 4px 0 8px; padding-left: 20px; }

.foto-variante { display: inline-flex; align-items: center; gap: 6px; }
.mini-foto { width: 32px; height: 32px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }

/* tienda: edición rápida */
.filtros-rapida, .acciones-rapida { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.tabla-rapida td { vertical-align: middle; }
.tabla-rapida input.mini { width: 90px; }
.filtros-rapida select, .filtros-rapida .busca { width: auto; min-width: 200px; }

/* diseño de la web: miniatura de la publicada y lista de anteriores */
.diseno-mini { width: 100%; max-width: 480px; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; margin: 8px 0 12px; background: #fff; }
.diseno-mini iframe { width: 400%; height: 400%; border: 0; transform: scale(.25); transform-origin: 0 0; pointer-events: none; }
.diseno-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.diseno-fila .acciones { margin-left: auto; display: flex; gap: 8px; }

/* dominio propio */
.tabla-dns { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 14px; }
.tabla-dns th, .tabla-dns td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tabla-dns code { font-size: 14px; user-select: all; }
.dns-problemas { color: var(--warn); margin: 8px 0; padding-left: 20px; }

/* pedidos y encargos: tablero del día (una columna por estado, una tarjeta por pedido) */
.enc-resumen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.enc-dia { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.enc-dia strong { font-size: 17px; min-width: 120px; text-align: center; }
.enc-dia input[type=date] { border: 1px solid var(--campo); border-radius: 10px; padding: 6px 8px; background: var(--panel); }
.datos-nums { display: flex; gap: 10px; flex-wrap: wrap; }
.datos-nums .dato-num { padding: 10px 14px; min-width: 104px; }
.datos-nums .dato-num strong { font-size: 21px; }
.enc-tablero { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.enc-col { background: var(--hover); border-radius: var(--radius); padding: 10px; min-height: 120px; }
.enc-col h2 { font-size: 14px; margin: 2px 4px 10px; display: flex; align-items: center; justify-content: space-between; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.enc-cuenta { background: var(--panel); border: 1px solid var(--line); color: var(--text); border-radius: 999px; padding: 0 9px; font-size: 13px; }
.enc-vacio { text-align: center; margin: 22px 0; font-size: 14px; }
.enc-tarjeta { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--t-azul); border-radius: 12px; padding: 12px; margin-bottom: 10px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; }
.enc-tarjeta.enc-preparando { border-left-color: var(--t-ambar); }
.enc-tarjeta.enc-listo { border-left-color: var(--t-verde); }
.enc-tarjeta.enc-entregado { border-left-color: var(--t-gris); opacity: .8; }
.enc-tarjeta.enc-cancelado { border-left-color: var(--t-rojo); opacity: .7; }
.enc-cab { display: flex; align-items: center; gap: 8px; }
.enc-hora { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.enc-tipo { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 9px; }
.enc-tipo.rec { background: var(--i-azul); color: var(--t-azul); }
.enc-tipo.dom { background: var(--i-violeta); color: var(--t-violeta); }
.enc-num { margin-left: auto; color: var(--muted); font-size: 13px; }
.enc-cliente { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.enc-cliente a { font-size: 14px; }
.enc-dir { font-size: 14px; background: var(--i-violeta); color: var(--text); border-radius: 8px; padding: 6px 8px; }
.enc-lineas { list-style: none; margin: 0; padding: 0; border-top: 1px dashed var(--line); }
.enc-lineas li { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; }
.enc-cant { font-weight: 700; min-width: 28px; }
.enc-prod { flex: 1; min-width: 0; }
.enc-prod small { display: block; color: var(--warn); font-weight: 600; }
.enc-imp { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.enc-notas { font-size: 14px; background: var(--i-ambar); border-radius: 8px; padding: 6px 8px; }
.enc-pie { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.enc-total { font-size: 18px; font-weight: 700; }
.enc-acc { display: flex; gap: 6px; flex-wrap: wrap; }
.enc-acc .btn { padding: 6px 10px; }
.enc-acc .btn.pri { flex: 1; }
.enc-cancelados { margin-top: 16px; }
.enc-cancelados summary { cursor: pointer; color: var(--muted); margin-bottom: 10px; }
.enc-franjas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.enc-franja { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.enc-franja input { border: 1px solid var(--campo); border-radius: 10px; padding: 6px 8px; background: var(--panel); }
.enc-repetido td { opacity: .6; }
.enc-desc { font-size: 13px; max-width: 60ch; }
@media (max-width: 1100px) { .enc-tablero { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .enc-tablero { grid-template-columns: minmax(0, 1fr); } .enc-resumen { flex-direction: column; align-items: stretch; } }

/* incidencias */
.chip-inc { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--accent-soft); color: var(--accent); }
.chip-inc.ok { background: color-mix(in srgb, var(--ok) 12%, var(--panel)); color: var(--ok); }
.chip-inc.gris { background: var(--hover); color: var(--muted); }
.lista-inc { list-style: none; margin: 0; padding: 0; }
.lista-inc li a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 4px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.lista-inc li a:hover { background: var(--hover); }
.lista-inc strong { flex: 1 1 240px; min-width: 0; }
.cab-inc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.cab-inc h2 { margin: 0; flex: 1 1 200px; min-width: 0; }
.hilo-inc { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.msg-inc { max-width: min(640px, 92%); padding: 10px 14px; border-radius: 14px; background: var(--hover); }
.msg-inc.yo { align-self: flex-end; background: var(--accent-soft); }
.msg-inc p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.form-inc textarea { min-height: 110px; }

/* ---------- CRM: embudo, contactos y ficha (estilo limpio: blanco, bordes finos, columnas muy suaves) ---------- */
.crm-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: -6px 0 18px; }
.crm-pestanas { display: flex; gap: 22px; overflow-x: auto; }
.crm-pestanas a { padding: 6px 0 11px; color: var(--muted); text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; white-space: nowrap; }
.crm-pestanas a.act { color: var(--text); border-color: var(--text); font-weight: 600; }
.btn.crm-negro { background: var(--text); border-color: var(--text); color: var(--panel); font-weight: 600; }
.btn.crm-negro:hover { filter: brightness(1.15); background: var(--text); }
.crm-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
button.crm-pill { cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; }
.crm-gris { background: var(--i-gris); color: var(--t-gris); } .crm-azul { background: var(--i-azul); color: var(--t-azul); } .crm-verde { background: var(--i-verde); color: var(--t-verde); }
.crm-ambar { background: var(--i-ambar); color: var(--t-ambar); } .crm-violeta { background: var(--i-violeta); color: var(--t-violeta); } .crm-cian { background: var(--i-cian); color: var(--t-cian); }
.crm-rosa { background: var(--i-rosa); color: var(--t-rosa); } .crm-rojo { background: var(--i-rojo); color: var(--t-rojo); } .crm-apagada { background: transparent; color: var(--muted); border-color: var(--line); border-style: dashed; }
.crm-fondo-gris { background: #9ca3af; } .crm-fondo-azul { background: #3b82f6; } .crm-fondo-ambar { background: #f59e0b; } .crm-fondo-verde { background: #10b981; }
.crm-fondo-violeta { background: #8b5cf6; } .crm-fondo-cian { background: #06b6d4; } .crm-fondo-rosa { background: #ec4899; }
.crm-quitar { border: 0; background: none; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; opacity: .7; }
.crm-quitar:hover { opacity: 1; }

/* indicadores */
.crm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 16px; }
.crm-kpi { padding: 14px 18px; border-left: 1px solid var(--line); min-width: 0; }
.crm-kpi:first-child { border-left: 0; }
.crm-kpi-et { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12.5px; }
.crm-kpi-ico { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.crm-kpi-ico svg { width: 15px; height: 15px; }
.crm-kpi strong { display: block; font-size: 24px; font-weight: 650; margin-top: 6px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.crm-ganadas { margin: -6px 0 14px; font-size: 13.5px; }

/* tablero */
.crm-tablero { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; align-items: start; }
.crm-col { background: color-mix(in srgb, var(--hover) 55%, var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; min-height: 200px; transition: border-color .15s, background .15s; }
.crm-col.encima, .crm-zona.encima { border-color: var(--accent); background: var(--accent-soft); }
.crm-col-cab { display: flex; align-items: center; gap: 8px; padding: 4px 4px 8px; }
.crm-col-cab strong { font-size: 13.5px; }
.crm-punto { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.crm-cuenta { margin-left: auto; font-size: 12px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; }
.crm-prog { height: 3px; background: var(--line); border-radius: 3px; margin: 2px 4px 6px; overflow: hidden; }
.crm-prog i { display: block; height: 100%; border-radius: 3px; }
.crm-suma { font-size: 12px; color: var(--muted); padding: 0 4px 10px; font-variant-numeric: tabular-nums; }
.crm-tarjeta { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(16,24,40,.04); cursor: grab; transition: box-shadow .15s, border-color .15s; }
.crm-tarjeta:hover, .crm-tarjeta:focus-visible { box-shadow: 0 6px 18px rgba(16,24,40,.08); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); outline: none; }
.crm-tarjeta.arrastrando { opacity: .5; }
.crm-t-cab { display: flex; gap: 9px; align-items: flex-start; }
.crm-letra { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; margin-top: 1px; }
.crm-t-tit { font-weight: 600; font-size: 13.5px; line-height: 1.35; }
.crm-t-cli { color: var(--muted); font-size: 12.5px; }
.crm-t-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; }
.crm-valor { font-weight: 650; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.crm-t-sig { font-size: 12px; color: var(--muted); margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.crm-t-sig.tarde { color: var(--danger); font-weight: 600; }
.crm-mover { display: none; margin-top: 8px; width: 100%; font-size: 13px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); }
.crm-anadir { width: 100%; border: 1px dashed var(--line); background: none; color: var(--muted); border-radius: 10px; padding: 7px; cursor: pointer; font: inherit; font-size: 13px; }
.crm-anadir:hover { color: var(--accent); border-color: var(--accent); }
.crm-cierres { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0 16px; }
.crm-zona { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px dashed var(--line); border-radius: 12px; padding: 12px; color: var(--muted); font-size: 13px; transition: border-color .15s, background .15s; }
.crm-zona.ganada .ico { color: var(--ok); } .crm-zona.perdida .ico { color: var(--danger); }

/* aviso del plan y planes */
.crm-plan-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 1px solid var(--line); border-left: 3px solid #f59e0b; border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; background: var(--panel); }
.crm-plan-cta > div { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; }
.crm-planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.crm-plan { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.crm-plan.actual { border-color: var(--accent); }
.crm-plan-precio { font-size: 22px; font-weight: 650; }
.crm-plan ul { margin: 0 0 6px; padding-left: 18px; color: var(--muted); font-size: 13.5px; flex: 1; }

/* listas, filtros y tabla de contactos */
.crm-listas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.crm-lista { text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; cursor: pointer; font: inherit; color: var(--text); box-shadow: var(--shadow); }
.crm-lista strong { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.crm-lista span { font-size: 12.5px; color: var(--muted); }
.crm-lista.act { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.crm-barra { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.crm-buscar { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 0 12px; color: var(--muted); }
.crm-buscar input { border: 0; outline: 0; background: none; flex: 1; padding: 9px 0; color: var(--text); }
.crm-sel { border: 1px dashed var(--line); border-radius: 999px; padding: 6px 12px; background: var(--panel); color: var(--muted); font-size: 13px; }
.crm-filtros { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.crm-filtro { border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px; color: var(--muted); text-decoration: none; font-size: 13.5px; background: var(--panel); }
.crm-filtro.act { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.crm-tabla td { vertical-align: middle; }
.crm-tabla tbody tr { cursor: pointer; }
.crm-sub { display: block; font-size: 12px; }
.crm-origen { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 13px; }
.crm-origen svg { width: 14px; height: 14px; }

/* ficha del contacto */
.crm-ficha { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.crm-caja { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.crm-f-cab { padding: 20px; display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.crm-av-g { width: 56px; height: 56px; font-size: 19px; }
.crm-f-datos { flex: 1; min-width: 220px; }
.crm-f-datos h2 { margin: 0; font-size: 20px; }
.crm-datos { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; color: var(--muted); font-size: 13px; }
.crm-dato { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); text-decoration: none; }
a.crm-dato:hover { color: var(--accent); }
.crm-dato svg { width: 14px; height: 14px; }
.crm-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.crm-apuntar { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--hover) 50%, var(--panel)); }
.crm-linea { padding: 8px 20px 18px; }
.crm-hecho { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; position: relative; }
.crm-hecho::before { content: ""; position: absolute; left: 15.5px; top: 44px; bottom: -12px; width: 1px; background: var(--line); }
.crm-hecho:last-child::before { display: none; }
.crm-hi { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--panel); }
.crm-hi svg { width: 15px; height: 15px; }
.crm-t-gris { color: var(--t-gris); } .crm-t-azul { color: var(--t-azul); } .crm-t-verde { color: var(--t-verde); } .crm-t-ambar { color: var(--t-ambar); }
.crm-t-violeta { color: var(--t-violeta); } .crm-t-cian { color: var(--t-cian); } .crm-t-rosa { color: var(--t-rosa); }
.crm-hecho strong { font-size: 13.5px; } .crm-hecho strong a { color: inherit; }
.crm-hecho p { margin: 2px 0 0; color: var(--muted); font-size: 13px; white-space: pre-line; }
.crm-cuando { font-size: 12px; color: var(--muted); white-space: nowrap; display: flex; gap: 6px; align-items: flex-start; }
.crm-lado { display: flex; flex-direction: column; gap: 14px; }
.crm-bloque { padding: 16px; }
.crm-bloque h3 { font-size: 13px; margin: 0 0 10px; }
.crm-bloque input { width: 100%; margin-top: 10px; border: 1px dashed var(--line); border-radius: 8px; padding: 6px 10px; background: var(--panel); }
.crm-opo { display: block; width: 100%; text-align: left; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--panel); cursor: pointer; font: inherit; color: var(--text); }
.crm-opo:hover { border-color: var(--accent); }
.crm-opo .crm-t-pie { margin-top: 6px; }
.crm-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.crm-nums div { background: color-mix(in srgb, var(--hover) 60%, var(--panel)); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; }
.crm-nums strong { font-size: 16px; font-variant-numeric: tabular-nums; } .crm-nums span { font-size: 12px; color: var(--muted); }

/* ventanas y formularios */
.crm-dialogo { border: 1px solid var(--line); border-radius: var(--radius); padding: 0; width: min(560px, calc(100vw - 32px)); background: var(--panel); color: var(--text); box-shadow: 0 24px 60px rgba(16,24,40,.25); }
.crm-dialogo::backdrop { background: rgba(15,18,24,.45); }
.crm-dialogo-cab { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 0 20px; }
.crm-dialogo-cab h2 { margin: 0; font-size: 17px; }
.crm-form { padding: 10px 20px 20px; display: flex; flex-direction: column; gap: 4px; }
.crm-form textarea { width: 100%; }
.crm-elegido:empty { display: none; }
.crm-resultados { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.crm-resultados:empty { display: none; }
.crm-resultado { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; background: var(--panel); cursor: pointer; font: inherit; color: var(--text); }
.crm-resultado .av { width: 28px; height: 28px; font-size: 11px; }
.crm-resultado span { display: flex; flex-direction: column; } .crm-resultado small { font-size: 12px; }
.crm-resultado.nuevo { color: var(--accent); border-style: dashed; }
.crm-resultado:hover { border-color: var(--accent); }
.crm-nuevo-contacto { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.crm-etapas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.crm-etapa { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto auto; gap: 8px; align-items: center; }
.crm-etapa .btn-icono { width: 36px; height: 36px; }
.crm-etapa .btn-icono:first-of-type svg { transform: rotate(90deg); }

@media (max-width: 900px) {
  .crm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-kpi:nth-child(3) { border-left: 0; } .crm-kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
  .crm-listas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-ficha { grid-template-columns: 1fr; }
  .crm-planes { grid-template-columns: 1fr; }
  .crm-ocultable { display: none; }
  .crm-mover { display: block; }
  .crm-tarjeta { cursor: pointer; }
}
@media (prefers-color-scheme: dark) {
  .crm-fondo-gris { background: #6b7280; }
  .crm-tarjeta { box-shadow: none; }
}
.crm-barra .crm-sel { width: auto; flex: none; }

/* CRM: planes de pago, tareas, IA, informes y ajustes */
.crm-candado { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); text-decoration: none; border: 1px dashed var(--line); border-radius: 999px; padding: 5px 12px; }
.crm-candado:hover { color: var(--accent); border-color: var(--accent); }
.btn.crm-ia { background: var(--i-violeta); color: var(--t-violeta); border-color: transparent; font-weight: 600; }
.btn.crm-ia:hover { filter: brightness(.97); background: var(--i-violeta); }
.crm-ia-botones { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.crm-ia-botones .btn { justify-content: flex-start; white-space: normal; text-align: left; }
.crm-resumen { background: color-mix(in srgb, var(--i-violeta) 55%, var(--panel)); border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 8px; }
.crm-resumen p { margin: 0 0 4px; } .crm-resumen b { color: var(--t-violeta); }
.crm-tarea { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: 13.5px; cursor: pointer; }
.crm-tarea input { margin-top: 3px; accent-color: var(--accent); }
.crm-tarea small { display: block; font-size: 12px; }
.crm-tarde { color: var(--danger); font-weight: 600; }
.crm-grupo-t { font-size: 12px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 16px 0 6px; }
.crm-grupo-t.tarde { color: var(--danger); }
.crm-fila-t { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; cursor: pointer; }
.crm-fila-t:last-child { border-bottom: 0; }
.crm-fila-t input { accent-color: var(--accent); }
.crm-fila-t.hecha .crm-fila-t-txt strong { text-decoration: line-through; color: var(--muted); }
.crm-fila-t > span:nth-child(3) { font-size: 12.5px; white-space: nowrap; }
.crm-tareas-aviso { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-left: 3px solid var(--t-violeta); border-radius: 10px; padding: 9px 14px; margin-bottom: 14px; background: var(--panel); color: var(--text); text-decoration: none; font-size: 13.5px; }
.crm-sel-embudo { margin-bottom: 12px; font-weight: 600; color: var(--text); border-style: solid; }
.crm-calientes { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
.crm-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.crm-dl dt { color: var(--muted); } .crm-dl dd { margin: 0; }
.crm-propios { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 4px; }
.crm-campo-fila { display: grid; grid-template-columns: minmax(0, 1fr) 160px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.crm-campo-fila input[hidden] { display: none; }
.crm-informes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 900px) {
  .crm-fila-t { grid-template-columns: auto minmax(0, 1fr) auto; }
  .crm-fila-t > span:nth-child(3) { grid-column: 2; }
  .crm-propios, .crm-informes { grid-template-columns: 1fr; }
  .crm-campo-fila { grid-template-columns: 1fr auto; }
}
.crm-tarea input, .crm-fila-t input[type=checkbox] { width: auto; flex: none; }
.crm-tarea > span { flex: 1; }
select.crm-sel-embudo { width: auto; max-width: 100%; }

/* ---------- panel de control de ilowy (lo propio) ---------- */
.acceso-ilus { background: linear-gradient(160deg, var(--accent-soft), var(--bg)); }
.ctl-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ctl-badge.claro { background: #fff; color: var(--accent); margin-left: 6px; }
.ctl-cifras { margin-bottom: 18px; }
.ctl-cifras .dato-num { flex: 1; min-width: 140px; }
.ctl-dos { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ctl-eventos { display: flex; flex-direction: column; }
.ctl-eventos.card { padding: 6px 0; }
.ctl-evento { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.ctl-evento:last-child { border-bottom: 0; }
.ctl-evento:hover { background: var(--hover); }
.ctl-evento.nuevo { background: color-mix(in srgb, var(--accent-soft) 60%, var(--panel)); }
.ctl-evento .ico { width: 34px; height: 34px; border-radius: 10px; }
.ctl-evento-txt { display: flex; flex-direction: column; min-width: 0; }
.ctl-evento-txt strong { font-size: 14px; } .ctl-evento-txt small { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .ctl-evento { padding-left: 4px; padding-right: 4px; }
.ctl-servicios { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.ctl-servicios.grande li { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.ctl-punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.ctl-punto.ok { background: var(--ok); } .ctl-punto.mal { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent); }
.ctl-lista { margin: 0 0 10px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.ctl-web { margin: 2px 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ctl-mas { color: var(--ok); }
.ctl-hilo { display: flex; flex-direction: column; gap: 10px; }
.ctl-msg { max-width: 80%; border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; }
.ctl-msg p { margin: 2px 0 0; white-space: pre-wrap; }
.ctl-msg.cli { align-self: flex-start; background: var(--panel); }
.ctl-msg.nos { align-self: flex-end; background: var(--accent-soft); border-color: transparent; }
.ctl-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; margin-bottom: 12px; }
@media (max-width: 900px) { .ctl-dos { grid-template-columns: 1fr; } .ctl-msg { max-width: 95%; } }