:root {
    --azul: #008fd5;
    --azul-oscuro: #0072ab;
    --cian: #4ac4e2;
    --azul-suave: #e8f6fd;
    --fondo: #f4f9fc;
    --superficie: #ffffff;
    --borde: #dbe8f0;
    --texto: #303030;
    --texto-suave: #5a6a75;
    --texto-tenue: #8a9aa5;
    --peligro: #d23c50;
    --exito: #1e9e5a;
    --sombra: 0 10px 30px rgba(0, 82, 122, .08);
    --radio: 14px;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: Mulish, 'Segoe UI', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.55;
}
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.01em; }
a { color: var(--azul); }

/* ── Barra superior ── */
.barra {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    padding: 12px 26px;
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
    position: sticky;
    top: 0;
    z-index: 20;
}
.barra__marca { display: flex; align-items: center; gap: 11px; }
.barra__logo, .login__logo, .resumen__avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--azul), var(--cian));
    color: #fff;
    font-weight: 900;
    font-size: 19px;
}
.logo-imagen {
    background: #fff;
    border: 1px solid var(--borde);
    object-fit: contain;
    padding: 4px;
}
.barra__marca strong { display: block; font-size: 16px; }
.barra__marca small { color: var(--texto-tenue); font-size: 11.5px; }
.barra__nav { display: flex; gap: 4px; margin-left: 8px; }
.barra__nav a {
    padding: 9px 16px;
    border-radius: 999px;
    color: var(--texto-suave);
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.barra__nav a:hover { background: var(--azul-suave); color: var(--azul); }
.barra__nav a.activo { background: var(--azul); color: #fff; }
.barra__usuario { display: flex; align-items: center; gap: 12px; margin-left: auto; color: var(--texto-suave); font-weight: 700; font-size: 13.5px; }

.contenido { max-width: 1180px; margin: 0 auto; padding: 26px 22px 40px; }
.pie { padding: 18px; color: var(--texto-tenue); font-size: 12px; text-align: center; }

/* ── Alertas y chips ── */
.alerta { margin-bottom: 18px; border-radius: 12px; padding: 13px 17px; font-weight: 700; font-size: 14px; }
.alerta--exito { background: #e7f7ee; color: var(--exito); border: 1px solid #bfe8d2; }
.alerta--error { background: #fdecef; color: var(--peligro); border: 1px solid #f4c4cc; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    padding: 5px 12px;
    background: var(--superficie);
    color: var(--texto-suave);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
.chip--exito { border-color: #bfe8d2; background: #e7f7ee; color: var(--exito); }
.chip--neutro { color: var(--texto-tenue); }

/* ── Resumen ── */
.resumen { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
.resumen__ficha { display: flex; align-items: center; gap: 12px; }
.resumen__ficha strong { display: block; font-size: 18px; }
.resumen__ficha small { color: var(--texto-tenue); }
.resumen__datos { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* ── Tarjetas y malla ── */
.malla { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, .9fr); gap: 20px; align-items: start; }
.columna { display: grid; gap: 20px; }
.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 24px;
    margin-bottom: 20px;
}
.malla .tarjeta { margin-bottom: 0; }
.tarjeta--angosta { max-width: 520px; }
.tarjeta__encabezado { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.tarjeta__encabezado h2 { font-size: 19px; }
.tarjeta__encabezado--hilo { align-items: flex-start; }
.tarjeta__etiqueta { display: block; color: var(--cian); font-size: 10.5px; font-weight: 900; letter-spacing: .14em; margin-bottom: 3px; }
.ayuda { color: var(--texto-tenue); font-size: 12.5px; }

/* ── Formularios ── */
.formulario { display: grid; gap: 14px; }
.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.rejilla--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo > span, .campo label span { color: var(--texto-suave); font-size: 12.5px; font-weight: 800; }
.campo input, .campo select, .campo textarea {
    width: 100%;
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 11px 13px;
    background: #fff;
    color: var(--texto);
    font: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.campo textarea { resize: vertical; line-height: 1.55; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(0, 143, 213, .15);
    outline: none;
}
.campo--color input { min-height: 44px; padding: 5px; cursor: pointer; }
.acciones { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--borde); padding-top: 16px; flex-wrap: wrap; }
.acciones-dobles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.avanzados { border: 1px solid var(--borde); border-radius: 12px; padding: 12px 16px; }
.avanzados summary { cursor: pointer; font-weight: 800; font-size: 13px; color: var(--texto-suave); }
.avanzados .rejilla { margin-top: 12px; }

/* ── Botones ── */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 11px 22px;
    background: var(--azul);
    color: #fff;
    font: inherit;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s, transform .05s;
}
.boton:hover { background: var(--azul-oscuro); }
.boton:active { transform: translateY(1px); }
.boton--borde { background: #fff; border-color: var(--borde); color: var(--texto-suave); }
.boton--borde:hover { background: var(--azul-suave); border-color: var(--azul); color: var(--azul); }
.boton--peligro { background: #fff; border-color: #f4c4cc; color: var(--peligro); }
.boton--peligro:hover { background: #fdecef; }
.boton--bloque { width: 100%; }
.boton--sm { padding: 7px 14px; font-size: 12.5px; }
.boton--primario { background: var(--azul); }

/* ── Editor de secciones del alma ── */
.secciones { display: grid; gap: 13px; }
.seccion { display: grid; gap: 9px; border: 1px solid var(--borde); border-radius: 12px; background: var(--fondo); padding: 13px; }
.seccion__cabeza { display: flex; align-items: center; gap: 9px; }
.seccion__cabeza input { flex: 1; min-width: 0; font-weight: 800; }
.seccion textarea { min-height: 110px; background: #fff; }
.editor__pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.editor__contador { color: var(--texto-tenue); font-size: 12px; }
.editor__contador--exceso { color: var(--peligro); font-weight: 800; }
.editor__error { margin: 0; color: var(--peligro); font-size: 13px; font-weight: 700; }

/* ── Webchat / embed ── */
.bloque-embed { border-top: 1px solid var(--borde); margin-top: 14px; padding-top: 14px; display: grid; gap: 10px; }
.bloque-embed textarea { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }

/* ── Preguntas rápidas ── */
.preguntas { border-top: 1px solid var(--borde); margin-top: 6px; padding-top: 14px; display: grid; gap: 12px; }
.preguntas__titulo h3 { font-size: 15px; margin-bottom: 3px; }
.preguntas__filas { display: grid; gap: 8px; }
.preguntas__fila { display: grid; grid-template-columns: minmax(120px, .8fr) minmax(0, 1.2fr) auto; gap: 8px; align-items: center; }
.preguntas__fila input { border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; font: inherit; }
.preguntas > .boton { justify-self: start; }

/* ── Vista previa ── */
.apariencia { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 24px; align-items: start; }
.apariencia__controles { display: grid; gap: 14px; min-width: 0; }
.previa { position: sticky; top: 84px; display: grid; gap: 8px; }
.previa__marco {
    position: relative;
    min-height: 480px;
    border: 1px solid var(--borde);
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(150deg, rgba(0, 143, 213, .07), rgba(74, 196, 226, .06)), var(--superficie);
}
.previa__panel {
    position: absolute;
    right: 16px;
    bottom: 76px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: min(300px, calc(100% - 32px));
    height: 370px;
    border-radius: 18px;
    overflow: hidden;
    background: #10131b;
    color: #f5f6fb;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .25);
}
.previa__panel.es-claro { background: #f5f7fb; color: #151927; }
.previa__panel header { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-bottom: 1px solid rgba(128, 138, 160, .25); }
.previa__avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--previa-primario, #008fd5); color: #fff; font-weight: 900; font-size: 14px; }
.previa__panel header strong { font-size: 12px; display: block; }
.previa__panel header small { opacity: .65; font-size: 9px; }
.previa__panel header b { margin-left: auto; opacity: .55; font-size: 17px; }
.previa__panel main { display: flex; flex-direction: column; gap: 8px; padding: 12px 11px; overflow: hidden; }
.previa__panel main p { align-self: flex-start; max-width: 86%; margin: 0; border: 1px solid rgba(128, 138, 160, .28); border-radius: 4px 12px 12px; padding: 8px 10px; background: rgba(128, 138, 160, .12); font-size: 11px; line-height: 1.45; }
.previa__panel main .es-usuario { align-self: flex-end; border: 0; border-radius: 12px 4px 12px 12px; background: var(--previa-primario, #008fd5); color: #fff; }
.previa__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.previa__chips span { border: 1px solid var(--previa-primario, #008fd5); border-radius: 999px; padding: 4px 9px; font-size: 9.5px; font-weight: 700; background: color-mix(in srgb, var(--previa-primario, #008fd5) 12%, transparent); }
.previa__panel footer { display: flex; align-items: center; gap: 7px; padding: 9px 10px; border-top: 1px solid rgba(128, 138, 160, .25); }
.previa__panel footer span { flex: 1; border: 1px solid rgba(128, 138, 160, .3); border-radius: 9px; padding: 8px; opacity: .6; font-size: 10px; }
.previa__panel footer b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--previa-primario, #008fd5); color: #fff; font-size: 12px; }
.previa__flotante {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 999px;
    padding: 12px 16px;
    background: var(--azul);
    color: #fff;
    font: 800 12px Mulish, sans-serif;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
    cursor: default;
}
.previa__flotante[data-tamano="compact"] { padding: 9px 12px; font-size: 11px; }
.previa__flotante[data-tamano="large"] { padding: 15px 20px; font-size: 13px; }

/* ── Chats ── */
.canales { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.canal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    padding: 8px 15px;
    background: #fff;
    color: var(--texto-suave);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: border-color .15s, background .15s, color .15s;
}
.canal b { border-radius: 999px; padding: 2px 8px; background: var(--fondo); color: var(--texto-tenue); font-size: 11px; }
.canal:hover { border-color: var(--azul); color: var(--azul); }
.canal.activo { border-color: var(--azul); background: var(--azul-suave); color: var(--azul-oscuro); }
.canal.activo b { background: var(--azul); color: #fff; }

.lista-chats { display: grid; gap: 10px; }
.fila-chat {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 13px 15px;
    background: #fff;
    color: var(--texto);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}
.fila-chat:hover { border-color: var(--azul); box-shadow: var(--sombra); }
.fila-chat__avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--azul-suave); color: var(--azul); font-weight: 900; }
.fila-chat__texto { display: grid; gap: 2px; min-width: 0; }
.fila-chat__texto strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.fila-chat__texto small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-tenue); font-size: 11.5px; }
.fila-chat__texto em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-suave); font-size: 12.5px; font-style: normal; }
.fila-chat__meta { display: grid; justify-items: end; gap: 3px; text-align: right; }
.fila-chat__meta small { color: var(--texto-tenue); font-size: 11.5px; }
.paginacion { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.volver { display: inline-block; margin-bottom: 6px; color: var(--texto-tenue); font-size: 12.5px; font-weight: 800; text-decoration: none; }
.volver:hover { color: var(--azul); }

.hilo { display: flex; flex-direction: column; gap: 12px; }
.mensaje { max-width: 76%; align-self: flex-start; border: 1px solid var(--borde); border-radius: 4px 14px 14px; padding: 10px 14px; background: var(--fondo); }
.mensaje--agent, .mensaje--human { align-self: flex-end; border-radius: 14px 4px 14px 14px; border-color: rgba(0, 143, 213, .3); background: var(--azul-suave); }
.mensaje--system { align-self: center; max-width: 92%; opacity: .85; }
.mensaje header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.mensaje header strong { font-size: 12.5px; color: var(--azul-oscuro); }
.mensaje--customer header strong { color: var(--texto-suave); }
.mensaje header small { color: var(--texto-tenue); font-size: 10.5px; }
.mensaje p { margin: 0; font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── Login ── */
.pagina-login {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, #eaf7fd 0%, #f7fbfe 45%, #e2f2fa 100%);
}
.login { width: 100%; display: grid; place-items: center; padding: 24px; }
.login__tarjeta {
    width: min(400px, 100%);
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 82, 122, .14);
    padding: 34px 30px;
    display: grid;
    gap: 16px;
}
.login__marca { text-align: center; display: grid; gap: 8px; justify-items: center; margin-bottom: 4px; }
.login__logo { width: 56px; height: 56px; border-radius: 17px; font-size: 26px; }
.login__marca h1 { font-size: 26px; color: var(--azul-oscuro); }
.login__marca p { margin: 0; color: var(--texto-tenue); font-size: 12.5px; line-height: 1.5; }
.login__tarjeta form { display: grid; gap: 13px; }
.login__pie { margin: 0; text-align: center; color: var(--texto-tenue); font-size: 11px; }

/* ── Responsive ── */
@media (max-width: 960px) {
    .malla, .apariencia { grid-template-columns: 1fr; }
    .previa { position: static; }
    .barra { gap: 12px; }
    .barra__usuario span { display: none; }
}
@media (max-width: 640px) {
    .contenido { padding: 18px 12px 30px; }
    .tarjeta { padding: 18px 15px; }
    .rejilla, .rejilla--tres { grid-template-columns: 1fr; }
    .preguntas__fila { grid-template-columns: 1fr; }
    .preguntas__fila .boton { justify-self: end; }
    .fila-chat { grid-template-columns: auto minmax(0, 1fr); }
    .fila-chat__meta { grid-column: 1 / -1; grid-auto-flow: column; justify-items: start; justify-content: start; gap: 10px; text-align: left; }
    .mensaje { max-width: 94%; }
    .acciones-dobles { grid-template-columns: 1fr; }
    .barra__nav { order: 3; width: 100%; justify-content: center; }
}