:root {
    --bg: #0a0e14;
    --bg-elevated: #11161f;
    --bg-card: #161c28;
    --border: #232b3a;
    --border-hover: #2f3a4f;
    --text: #e6ebf2;
    --text-dim: #8b96a8;
    --accent: #00e5a0;
    --accent-dim: rgba(0, 229, 160, 0.15);
    --accent-glow: rgba(0, 229, 160, 0.35);
    --danger: #ff4d6d;
    --danger-dim: rgba(255, 77, 109, 0.15);
    --warning: #ffb020;
    --warning-dim: rgba(255, 176, 32, 0.15);
    --muted: #6c7686;
    --muted-dim: rgba(108, 118, 134, 0.15);
    --info: #3b82f6;
    --info-glow: rgba(59, 130, 246, 0.35);
    --radius: 10px;
    --font: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

/* Barras de scroll: grisáceas y redondeadas en todo el sitio (Chrome/Edge
   vía ::-webkit-scrollbar, Firefox vía scrollbar-color). */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-hover) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--border-hover);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--muted);
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

body {
    margin: 0;
    font-family: var(--font);
    background: var(--bg);
    background-image:
        radial-gradient(circle at 15% 0%, rgba(0, 229, 160, 0.06), transparent 40%),
        radial-gradient(circle at 85% 20%, rgba(0, 160, 229, 0.05), transparent 35%);
    background-attachment: fixed;
    color: var(--text);
    min-height: 100vh;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1.1rem 2rem;
    background: rgba(17, 22, 31, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.icon-toggle.hamburger-toggle {
    display: none;
}

.topbar h1 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.topbar-brand {
    color: inherit;
    text-decoration: none;
}

.topbar-logo {
    height: 40px;
    width: auto;
    display: block;
}

.whatsapp-qr-contenedor {
    display: flex;
    justify-content: center;
    margin: 1.5rem 0;
    min-height: 1px;
}

.whatsapp-qr-contenedor img {
    max-width: 260px;
    width: 100%;
    border-radius: 8px;
    background: #fff;
    padding: 0.75rem;
}

.topbar nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.dropdown {
    position: relative;
}

.dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    color: var(--text-dim);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}

.dropdown-toggle:hover {
    background: var(--bg-elevated);
    color: var(--text);
}

.dropdown-caret {
    font-size: 0.65rem;
    opacity: 0.7;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    min-width: 190px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
    padding: 0.4rem;
    z-index: 150;
}

.dropdown-menu[hidden] {
    display: none;
}

/* El dropdown Admin (.dropdown-hover) no usa el atributo [hidden] + JS como los otros dos
   (notificaciones, usuario) — se abre/cierra solo con CSS al pasar el mouse. */
.dropdown-hover .dropdown-menu {
    display: none;
}

.dropdown-hover:hover .dropdown-menu,
.dropdown-hover:focus-within .dropdown-menu {
    display: block;
}

.dropdown-item {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    background: none;
    border: none;
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease;
}

.dropdown-item:hover {
    background: var(--border-hover);
}

.container {
    max-width: 1100px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}

/* En la vista de conexiones, el contenedor crece hasta el borde de la ventana
   en vez de quedar acotado a 1100px, para que la tabla tenga más margen antes
   de necesitar scroll horizontal. */
.container-ancho {
    max-width: none;
    padding: 0 20px;
}

.app-shell {
    display: flex;
    align-items: flex-start;
}

.app-shell .container {
    flex: 1;
    min-width: 0;
}

.sidebar {
    display: flex;
    flex-direction: column;
    width: 210px;
    flex-shrink: 0;
    padding: 1.5rem 1rem;
    border-right: 1px solid var(--border);
    position: sticky;
    top: 4.5rem;
    align-self: flex-start;
    height: calc(100vh - 4.5rem);
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.2s ease;
}

.sidebar.colapsado {
    width: 68px;
}

.sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    padding: 0.4rem;
    margin-bottom: 0.75rem;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--text-dim);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, justify-content 0.2s ease;
}

.sidebar-toggle:hover {
    background: var(--bg-elevated);
    color: var(--text);
}

.sidebar-toggle i {
    transition: transform 0.2s ease;
}

.sidebar.colapsado .sidebar-toggle {
    justify-content: center;
}

.sidebar.colapsado .sidebar-toggle i {
    transform: rotate(180deg);
}

.icon-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--text-dim);
    font-size: 1.15rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.icon-toggle:hover {
    background: var(--bg-elevated);
    color: var(--text);
}

.notif-badge {
    position: absolute;
    top: 0.1rem;
    right: 0.1rem;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.05rem;
    text-align: center;
    box-shadow: 0 0 0 2px var(--bg-elevated);
}

.notif-badge[hidden] {
    display: none;
}

.notif-menu {
    width: 300px;
    max-height: 360px;
    overflow-y: auto;
    padding: 0;
}

.dropdown-item-static {
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.3rem;
}

.notif-header {
    padding: 0.75rem 0.9rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.notif-item {
    padding: 0.65rem 0.9rem;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--text);
}

.notif-item.no-leida {
    background: var(--accent-dim);
}

.notif-item-fecha {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    color: var(--text-dim);
}

.notif-vacio {
    padding: 1rem 0.9rem;
    font-size: 0.85rem;
    color: var(--text-dim);
    text-align: center;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.sidebar-link-soporte {
    margin-top: auto;
}

.sidebar-nav .sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.9rem;
    border-radius: 8px;
    color: var(--text-dim);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

.sidebar-link i {
    width: 1.1rem;
    text-align: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.sidebar-link span {
    display: inline-block;
    max-width: 160px;
    overflow: hidden;
    white-space: nowrap;
    opacity: 1;
    transition: max-width 0.2s ease, opacity 0.15s ease;
}

.sidebar.colapsado .sidebar-link {
    justify-content: center;
    gap: 0;
    padding: 0.65rem;
}

.sidebar.colapsado .sidebar-link span {
    max-width: 0;
    opacity: 0;
}

.sidebar-nav .sidebar-link:hover {
    background: var(--bg-elevated);
    color: var(--text);
}

.sidebar-nav .sidebar-link.activo {
    background: var(--accent-dim);
    color: var(--accent);
}

@media (max-width: 720px) {
    .app-shell {
        flex-direction: column;
    }

    .icon-toggle.hamburger-toggle {
        display: inline-flex;
    }

    .sidebar {
        display: none;
        position: static;
        width: 100%;
        height: auto;
        min-height: auto;
        overflow: visible;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 0.75rem 1rem;
    }

    .sidebar.abierta {
        display: flex;
    }

    .sidebar.colapsado {
        width: 100%;
    }

    .sidebar-toggle {
        display: none;
    }

    .sidebar-nav {
        flex-direction: column;
    }

    /* Tablas (Conexiones y "Calentar líneas") como tarjetas apiladas en vez de
       scroll horizontal. Aplica al listado de conexiones (columnas dinámicas,
       con data-label por PHP) y a la tabla de números de calentar_lineas.php
       (armada en JS, mismo atributo data-label). */
    .tabla-scroll {
        overflow-x: visible;
    }

    table {
        display: block;
        width: 100%;
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    table thead {
        display: none;
    }

    table tbody {
        display: block;
        width: 100%;
    }

    table tr {
        display: block;
        width: 100%;
        margin-bottom: 0.9rem;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
        overflow: hidden;
    }

    table tr:last-child {
        margin-bottom: 0;
    }

    table td {
        display: block;
        width: auto;
        padding: 0.7rem 1rem;
        border-bottom: 1px solid var(--border);
        font-size: 0.9rem;
    }

    table tr td:last-child {
        border-bottom: none;
    }

    table td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.25rem;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-dim);
    }

    table td.td-acciones {
        background: var(--bg-elevated);
    }

    table td.td-acciones .fila-acciones {
        justify-content: flex-end;
    }

    /* Filtros de Conexiones: un campo por fila en vez de columnas angostas. */
    .filter-bar input[type="text"],
    .filter-bar select {
        width: 100%;
        min-width: 0;
    }

    .filtro-personalizado-row {
        flex-wrap: wrap;
    }

    .filtro-personalizado-row select,
    .filtro-personalizado-row input[type="text"] {
        width: 100%;
        min-width: 0;
    }

    /* Estadísticas de calentamiento: 2 columnas en vez de tarjetas angostas. */
    .calentar-stat {
        min-width: 0;
        flex: 1 1 calc(50% - 0.4rem);
    }

    /* Header de cada grupo (nombre + engranaje): que no se aprieten. */
    .grupo-config-header {
        flex-wrap: wrap;
    }
}

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.card h2 {
    margin-top: 0;
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: 0.01em;
}

.tabla-scroll {
    overflow-x: auto;
    border-radius: var(--radius);
}

/* Scroll vertical propio de la tabla principal del panel: si hay muchas
   filas, la que scrollea es ELLA (con el encabezado fijo arriba, ver
   #tabla-metricas thead th), no la página entera. max-height la pone JS
   (ajustarAlturaTablaPrincipal en script.js) según el espacio real que
   queda hasta el borde de abajo de la ventana; este valor es solo el
   respaldo antes de que corra el JS. */
#tabla-scroll-principal {
    max-height: 70vh;
    overflow-y: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

th, td {
    padding: 0.9rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 0.92rem;
}

th {
    background: var(--bg-elevated);
    color: var(--text-dim);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* Encabezados ordenables de la tabla del panel (ver ordenarTabla en
   script.js): flechita apagada de "se puede ordenar" que se prende y toma
   la dirección real una vez que esa columna es la que ordena la tabla. */
.th-ordenable {
    cursor: pointer;
    user-select: none;
}

.th-ordenable:hover {
    color: var(--text);
}

.th-ordenable .th-sort-arrow {
    display: inline-block;
    width: 0.8em;
    margin-left: 0.3em;
    opacity: 0.3;
}

.th-ordenable .th-sort-arrow::after {
    content: '⇕';
}

.th-ordenado-asc,
.th-ordenado-desc {
    color: var(--accent);
}

.th-ordenado-asc .th-sort-arrow,
.th-ordenado-desc .th-sort-arrow {
    opacity: 1;
}

.th-ordenado-asc .th-sort-arrow::after {
    content: '▲';
}

.th-ordenado-desc .th-sort-arrow::after {
    content: '▼';
}

/* ---------------------------------------------------------------------------
   Tabla de métricas del panel (panel.php): columnas de ancho fijo que se
   redimensionan arrastrando desde el borde superior de cada encabezado.
   table-layout:fixed + width explícito por columna es lo que hace que el
   contenido largo se corte con puntos suspensivos en vez de empujar la fila
   hacia abajo; el título completo queda disponible como tooltip nativo.
   width:100% es lo que hace que, mientras nadie tocó ningún asa, la tabla
   ocupe todo el ancho disponible (cada columna se reparte proporcional a su
   ancho por defecto). En cuanto se arrastra un asa por primera vez, JS
   "congela" esos anchos en píxeles y pasa la tabla a un ancho fijo (ver
   iniciarColumnasRedimensionables en script.js): a partir de ahí cada
   columna es independiente y agrandarla hace crecer la tabla más allá del
   contenedor — el scroll horizontal lo pone .tabla-scroll.
   --------------------------------------------------------------------------- */
#tabla-metricas {
    width: 100%;
    table-layout: fixed;
    /* La regla general de <table> pone overflow:hidden (para redondear las
       esquinas), pero eso rompe position:sticky: el navegador termina
       "pegando" el encabezado al borde de la propia tabla, que se mueve
       entera con el scroll, en vez de al borde de #tabla-scroll-principal
       (que es el que realmente hace scroll). El redondeado de esquinas ya lo
       da .tabla-scroll (el contenedor de afuera), así que no hace falta
       repetirlo acá. */
    overflow: visible;
}

#tabla-metricas th,
#tabla-metricas td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.th-resizable {
    position: relative;
}

.th-resize-handle {
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 2;
    touch-action: none;
}

.th-resize-handle:hover,
.th-resize-handle.resizing {
    background: var(--accent-dim);
}

body.redimensionando-columna {
    cursor: col-resize;
    user-select: none;
}

/* Encabezado y columna de nombre "congelados", igual que en Meta Ads
   Manager: el encabezado queda fijo arriba al hacer scroll vertical, y las
   columnas de checkbox + switch de estado + nombre quedan fijas a la
   izquierda al hacer scroll horizontal, para que siempre se sepa qué
   campaña/conjunto/anuncio es cada fila aunque haya muchas columnas de
   métricas.
   --sticky-ancho-check y --sticky-ancho-estado los pone
   iniciarColumnasRedimensionables() en JS, con el ancho real ya renderizado
   de esas columnas (más confiable que adivinarlo en CSS). Los valores fijos
   de respaldo son solo para el instante antes de que corra el JS. */
#tabla-metricas thead th {
    position: sticky;
    top: 0;
    z-index: 3;
}

#tabla-metricas .col-check {
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--bg-card);
}

#tabla-metricas .col-estado {
    position: sticky;
    left: var(--sticky-ancho-check, 44px);
    z-index: 4;
    background: var(--bg-card);
    text-align: center;
}

#tabla-metricas .col-nombre {
    position: sticky;
    left: calc(var(--sticky-ancho-check, 44px) + var(--sticky-ancho-estado, 76px));
    z-index: 4;
    background: var(--bg-card);
    box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.45);
    /* OJO: acá NO va display:flex. Ponérselo directo al <td>/<th> le rompe
       el "ser una celda de tabla" (deja de participar en el cálculo de
       altura de fila que hacen las demás celdas, que sí son table-cell) y
       queda desalineado del resto del encabezado/fila. El layout en fila de
       los botones de lápiz/duplicar (o del texto + flechita de orden en el
       encabezado) va en un <span> ADENTRO de la celda — ver .nombre-fila y
       .th-contenido — nunca en la celda misma. */
}

.th-contenido {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    overflow: hidden;
    min-width: 0;
}

.th-texto {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

/* El nombre va en dos filas: el texto arriba (a todo el ancho de la
   columna, ya no comparte esa línea con los botones) y, abajo, una fila
   angosta con lápiz/clonar — chiquita y en opacity:0 salvo que se pase el
   mouse por encima (ver la regla de :hover más abajo). El espacio de esa
   segunda fila queda siempre reservado (aunque esté invisible): así el alto
   de la fila no "salta" al pasar el mouse. */
.nombre-fila {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.nombre-texto {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.nombre-acciones {
    display: flex;
    gap: 0.4rem;
    height: 0.8rem;
    line-height: 1;
}

.nombre-accion-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.8rem;
    height: 0.8rem;
    padding: 0;
    background: none;
    border: none;
    border-radius: 3px;
    color: var(--text-dim);
    font-size: 0.55rem;
    cursor: pointer;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease;
}

/* Los lápices/clonar solo se ven al pasar el mouse por la fila (como en
   Meta): si estuvieran siempre visibles, la tabla se vería muy cargada. */
#tabla-metricas tbody tr:hover .nombre-accion-btn,
.nombre-accion-btn:focus-visible {
    opacity: 1;
}

.nombre-accion-btn:hover {
    color: var(--accent);
    background: var(--bg-elevated);
}

.nombre-input {
    flex: 1;
    min-width: 0;
    padding: 0.2rem 0.4rem;
    background: var(--bg-elevated);
    border: 1px solid var(--accent);
    border-radius: 6px;
    color: var(--text);
    font-family: var(--font);
    font-size: inherit;
}

.nombre-input:disabled {
    opacity: 0.6;
    cursor: wait;
}

#tabla-metricas thead .col-check,
#tabla-metricas thead .col-estado,
#tabla-metricas thead .col-nombre {
    z-index: 5;
    background: var(--bg-elevated);
}

/* Fila de totales (tfoot): fija abajo al hacer scroll vertical, como el
   resumen de Meta Ads Manager. */
#tabla-metricas tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--bg-elevated);
    border-top: 2px solid var(--border);
    font-weight: 700;
}

#tabla-metricas tfoot td.td-real {
    background-image: linear-gradient(var(--accent-dim), var(--accent-dim));
}

#tabla-metricas tfoot .col-check,
#tabla-metricas tfoot .col-estado,
#tabla-metricas tfoot .col-nombre {
    z-index: 5;
    background: var(--bg-elevated);
}

/* Switch ON/OFF de estado (columna "Activo"): activa o pausa de verdad la
   campaña/conjunto/anuncio en Meta al tocarlo (ver toggle_estado.php). */
.switch-estado {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
    vertical-align: middle;
    cursor: pointer;
}

.switch-estado input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-estado .slider {
    position: absolute;
    inset: 0;
    background: var(--muted-dim);
    border-radius: 20px;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.switch-estado .slider::before {
    content: '';
    position: absolute;
    left: 2px;
    bottom: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-dim);
    transition: transform 0.15s ease, background 0.15s ease;
}

.switch-estado input:checked + .slider {
    background: var(--accent-dim);
}

.switch-estado input:checked + .slider::before {
    transform: translateX(14px);
    background: var(--accent);
}

.switch-estado input:disabled + .slider {
    opacity: 0.45;
    cursor: not-allowed;
}

.switch-estado input.switch-estado-cargando + .slider {
    opacity: 0.6;
    cursor: wait;
}

/* Celda de presupuesto editable (panel.php): click abre un input numérico
   encima del texto, como en Meta Ads Manager. */
td.presupuesto-editable {
    cursor: pointer;
}

td.presupuesto-editable:hover {
    background: var(--bg-elevated);
}

td.presupuesto-editable:hover .presupuesto-texto {
    text-decoration: underline dotted;
    text-decoration-color: var(--text-dim);
}

.presupuesto-input {
    width: 100%;
    padding: 0.2rem 0.4rem;
    background: var(--bg-elevated);
    border: 1px solid var(--accent);
    border-radius: 6px;
    color: var(--text);
    font-family: var(--font);
    font-size: inherit;
    text-align: right;
}

.presupuesto-input:disabled {
    opacity: 0.6;
    cursor: wait;
}

.th-arrastrable {
    user-select: none;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.th-drag-handle {
    display: inline-block;
    margin-right: 0.4rem;
    padding: 0.25rem;
    letter-spacing: -2px;
    opacity: 0.35;
    cursor: grab;
    touch-action: none;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.th-drag-handle:hover {
    opacity: 0.9;
    color: var(--accent);
}

.th-drag-handle:active {
    cursor: grabbing;
}

.th-arrastrando {
    opacity: 0.4;
}

.th-drop-antes {
    box-shadow: inset 3px 0 0 0 var(--accent);
}

.th-drop-despues {
    box-shadow: inset -3px 0 0 0 var(--accent);
}

.th-fantasma {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 300;
    pointer-events: none;
    padding: 0.9rem 1.25rem;
    background: var(--bg-elevated);
    border: 1px solid var(--accent);
    border-radius: 8px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5), 0 0 0 3px var(--accent-glow);
    color: var(--text);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: rotate(-2deg);
}

tbody tr {
    transition: background 0.15s ease;
}

tbody tr:hover {
    background: var(--bg-elevated);
}

tbody tr:last-child td {
    border-bottom: none;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: capitalize;
}

.badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
}

.badge-calentando {
    background: var(--warning-dim);
    color: var(--warning);
}

.badge-activo {
    background: var(--accent-dim);
    color: var(--accent);
}

.badge-pausado {
    background: var(--muted-dim);
    color: var(--muted);
}

.badge-baneado {
    background: var(--danger-dim);
    color: var(--danger);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.15rem;
    background: var(--accent);
    color: #06120e;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.btn:hover {
    box-shadow: 0 0 0 4px var(--accent-glow);
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn[hidden] {
    display: none;
}

.btn:disabled {
    background: var(--muted-dim);
    color: var(--muted);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn:disabled:hover {
    background: var(--muted-dim);
    box-shadow: none;
    transform: none;
}

a:not(.btn) {
    color: var(--accent);
}

form label {
    display: block;
    margin-bottom: 1.25rem;
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--text-dim);
}

form input,
form select,
form textarea {
    display: block;
    width: 100%;
    padding: 0.7rem 0.9rem;
    margin-top: 0.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: normal;
    font-family: var(--font);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

form input:focus,
form select:focus,
form textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

form input:disabled {
    color: var(--muted);
    cursor: not-allowed;
}

form input:-webkit-autofill,
form input:-webkit-autofill:hover,
form input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px var(--bg-elevated) inset;
    box-shadow: 0 0 0 1000px var(--bg-elevated) inset;
    transition: background-color 9999s ease-in-out 0s;
}

form textarea {
    resize: vertical;
    font-family: var(--font);
}

form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238b96a8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    padding-right: 2.5rem;
}

.beta-banner {
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.75rem 1.1rem;
    border-radius: 8px;
    margin: 0 0 1.25rem;
    background: var(--warning-dim);
    border: 1px solid rgba(255, 176, 32, 0.3);
    color: var(--text);
}

.actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.actions-bar h2 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
}

.alert {
    padding: 0.85rem 1.1rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    border: 1px solid transparent;
}

.alert-error {
    background: var(--danger-dim);
    color: var(--danger);
    border-color: rgba(255, 77, 109, 0.3);
}

.alert-exito {
    background: var(--accent-dim);
    color: var(--accent);
    border-color: rgba(0, 229, 160, 0.3);
}

.soporte-lista {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.soporte-ticket-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.soporte-respuesta {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.soporte-ticket-meta {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: var(--text-dim);
}

.soporte-ticket-fecha {
    margin: 0.75rem 0 0;
    text-align: right;
    font-size: 0.75rem;
    color: var(--text-dim);
}

.soporte-hilo {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0.75rem 0 0;
}

.soporte-msg {
    max-width: 80%;
    padding: 0.55rem 0.8rem;
    border-radius: 12px;
    border: 1px solid var(--border);
}

.soporte-msg--ajeno {
    align-self: flex-start;
    background: var(--bg-elevated);
    border-bottom-left-radius: 4px;
}

.soporte-msg--propio {
    align-self: flex-end;
    background: var(--accent-dim);
    border-color: rgba(0, 229, 160, 0.3);
    border-bottom-right-radius: 4px;
}

.soporte-msg-cuerpo {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.soporte-msg-meta {
    margin: 0.3rem 0 0;
    font-size: 0.7rem;
    color: var(--text-dim);
}

.soporte-hilo-responder {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.soporte-ticket-acciones {
    margin-top: 0.75rem;
    display: flex;
    justify-content: flex-end;
}

.referidos-lista {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.referido-card {
    padding: 0;
}

.referido-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.1rem 1.5rem;
    cursor: pointer;
    list-style: none;
}

.referido-card-header::-webkit-details-marker {
    display: none;
}

.referido-card-caret {
    flex-shrink: 0;
    color: var(--text-dim);
    transition: transform 0.15s ease;
}

.referido-card[open] .referido-card-caret {
    transform: rotate(180deg);
}

.referido-card-detalle {
    padding: 0 1.5rem 1.5rem;
    border-top: 1px solid var(--border);
}

.referido-link-row {
    display: flex;
    gap: 0.5rem;
    margin: 1.25rem 0;
}

.referido-link-input {
    flex: 1;
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-dim);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
}

.referido-clientes-lista {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.referido-clientes-lista li {
    padding: 0.6rem 0.8rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.85rem;
}

.login-box {
    max-width: 380px;
    margin: 4rem auto;
}

.site-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    padding: 1.5rem 1rem 2rem;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.site-footer a {
    color: var(--text-dim);
}

.site-footer a:hover {
    color: var(--text);
}

.telefono-con-estado {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.estado-punto {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

.estado-punto.conectado {
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.estado-punto.desconectado {
    background: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-dim);
}

.etiqueta-desconectado {
    color: var(--danger);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    margin-top: 0.15rem;
}

.legal-doc {
    max-width: 760px;
    margin: 2rem auto 4rem;
    line-height: 1.65;
}

.legal-doc h2 {
    margin-top: 0;
}

.legal-doc h3 {
    margin: 1.75rem 0 0.6rem;
    font-size: 1.05rem;
}

.legal-doc p,
.legal-doc li {
    color: var(--text-dim);
}

.legal-doc ul {
    padding-left: 1.25rem;
    margin: 0.5rem 0 1rem;
}

.legal-doc .legal-fecha {
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-bottom: 1.5rem;
}

.legal-doc .legal-disclaimer {
    font-size: 0.85rem;
    padding: 0.85rem 1.1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    background: var(--warning-dim);
    border: 1px solid rgba(255, 176, 32, 0.3);
    color: var(--text);
}

.auth-switch {
    text-align: center;
    margin-top: 1.25rem;
    margin-bottom: 0;
}

.actions-bar-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.actions-bar-buttons[hidden] {
    display: none;
}

.fila-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    width: 100%;
}

.filter-bar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.filter-bar-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.filter-bar input[type="text"],
.filter-bar select {
    margin: 0;
    width: auto;
    min-width: 180px;
}

.filtro-personalizado-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.filtro-personalizado-row:last-child {
    margin-bottom: 0;
}

.filtro-personalizado-row select,
.filtro-personalizado-row input[type="text"] {
    margin: 0;
    min-width: 160px;
}

.btn-remove-filtro {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
}

.btn-remove-filtro:hover {
    color: var(--danger);
}

.autocomplete {
    position: relative;
}

.autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 220px;
    overflow-y: auto;
    background: var(--bg-elevated);
    border: 1px solid var(--border-hover);
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
    z-index: 50;
}

.autocomplete-dropdown[hidden] {
    display: none;
}

.autocomplete-item {
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
    font-weight: normal;
    color: var(--text);
    cursor: pointer;
}

.autocomplete-item:hover {
    background: rgba(0, 229, 160, 0.08);
}

.autocomplete-item-create {
    color: var(--accent);
    font-weight: 600;
    border-top: 1px solid var(--border);
}

.btn-outline {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border-hover);
}

.btn-outline:hover {
    box-shadow: none;
    border-color: var(--accent);
    color: var(--accent);
    transform: none;
}

.btn-danger-outline {
    background: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
}

.btn-warning-outline {
    background: transparent;
    color: var(--warning);
    border: 1px solid var(--warning);
}

.btn-warning-outline:hover {
    box-shadow: none;
    background: var(--warning-dim);
    transform: none;
}

.btn-azul {
    background: var(--info);
    color: #fff;
}

.btn-azul:hover {
    box-shadow: 0 0 0 4px var(--info-glow);
}

.btn-conseguir-proxy {
    display: inline-flex;
    margin-bottom: 1.25rem;
}

.modal-advertencia .btn-conseguir-proxy {
    margin: 0.6rem 0 0;
}

.btn-danger-outline:hover {
    box-shadow: none;
    background: var(--danger-dim);
    transform: none;
}

.modal-separador {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.5rem 0 1.25rem;
}

/* Modal "Configurar perfil de WhatsApp" */
.perfil-wa-seccion {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.perfil-wa-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-dim);
    margin: 0;
}

.perfil-wa-foto-fila {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* .campo-nota trae un margen superior negativo pensado para pegarse a un input de arriba — acá
   arriba tiene la foto, no un input, así que queda demasiado pegada. Se pisa con un margen parejo
   arriba y abajo. */
.perfil-wa-foto-fila + .campo-nota {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

/* .perfil-wa-seccion es una columna flex sin align-items propio, así que este botón (el único
   elemento "suelto" del form, no envuelto en su propia fila) se estira a todo el ancho por
   defecto (stretch) y el texto queda pegado a la izquierda. align-self lo achica a su contenido
   y lo centra en la columna. */
#perfil-wa-nombre-guardar {
    align-self: center;
}

.perfil-wa-foto {
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background-color: var(--bg-card);
    background-size: cover;
    background-position: center;
    border: 1px solid var(--border);
}

.perfil-wa-foto-vacia {
    position: relative;
}

.perfil-wa-foto-vacia::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 46%;
    width: 34px;
    height: 34px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--muted);
    box-shadow: 0 26px 0 -4px var(--muted);
    opacity: 0.5;
}

.perfil-wa-foto-acciones {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.perfil-wa-foto-acciones .btn {
    justify-content: center;
    cursor: pointer;
}

.btn-icono {
    padding: 0.6rem;
    width: 2.5rem;
    height: 2.5rem;
    justify-content: center;
    font-size: 1.05rem;
    line-height: 1;
}

/* Tooltip liviano (sin depender del navegador ni de ninguna librería externa) */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after,
[data-tooltip]::before {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.12s ease;
    z-index: 250;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%) translateY(3px);
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--border-hover);
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(3px);
    border: 5px solid transparent;
    border-top-color: var(--bg-elevated);
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::after,
[data-tooltip]:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Para tooltips cerca del borde derecho de la pantalla, que no se corten. */
.tooltip-izquierda::after,
.tooltip-izquierda::before {
    left: auto;
    transform: translateY(3px);
}

.tooltip-izquierda:hover::after,
.tooltip-izquierda:hover::before,
.tooltip-izquierda:focus-visible::after,
.tooltip-izquierda:focus-visible::before {
    transform: translateY(0);
}

.tooltip-izquierda::after {
    right: 0;
}

.tooltip-izquierda::before {
    right: 0.85rem;
}

.btn-sm {
    padding: 0.45rem 0.85rem;
    font-size: 0.82rem;
}

.text-dim {
    color: var(--text-dim);
    font-size: 0.9rem;
}

.subtabla-grupos-celda {
    padding: 0.5rem 1.25rem 1rem;
    background: var(--bg-elevated);
}

.subtabla-grupos summary {
    cursor: pointer;
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 600;
    list-style: none;
}

.subtabla-grupos summary::-webkit-details-marker {
    display: none;
}

.subtabla-grupos table {
    margin-top: 0.6rem;
    box-shadow: none;
    font-size: 0.85rem;
}

.subtabla-grupos th,
.subtabla-grupos td {
    padding: 0.6rem 1rem;
}

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 6, 10, 0.65);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1.5rem;
}

.modal-overlay[hidden] {
    display: none;
}

/* Modal bloqueante de migración a uazapi: mismo look que .modal-overlay pero por encima de todo
   (incluido el tutorial) y sin forma de cerrarlo. Ver includes/modal_migracion_uazapi.php. */
.migracion-uazapi-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 6, 10, 0.8);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2100;
    padding: 1.5rem;
}

.migracion-uazapi-overlay[hidden] {
    display: none;
}

.modal {
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg-card);
}

.modal-header h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem;
}

.modal-close:hover {
    color: var(--text);
}

.modal-body {
    padding: 1.5rem;
}

.modal-body form {
    margin-bottom: 0.75rem;
}

.campo-nota {
    margin: -0.9rem 0 1.25rem;
    font-size: 0.8rem;
    color: var(--text-dim);
}

.modal-advertencia {
    margin: 0 0 1.25rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--danger);
    border-radius: 8px;
    background: var(--danger-dim);
    color: var(--danger);
    font-size: 0.85rem;
    font-weight: 700;
}

.proxy-estado {
    margin: 0 0 1.25rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.proxy-estado-conectado {
    color: var(--accent);
}

.proxy-estado-comprobando {
    color: var(--text-dim);
}

.proxy-estado-desconectado {
    color: var(--danger);
}

.proxy-campos {
    border-left: 2px solid var(--border);
    padding-left: 0.9rem;
    margin: -0.5rem 0 1.25rem;
}

.proxy-campos label {
    margin-bottom: 0.9rem;
}

.modal-section-title {
    margin: 0 0 0.75rem 0;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
}

.modal-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.5rem 0;
}

/* Pantalla del código de verificación / OTP (includes/verif_pendiente.php) */
.verif-pendiente {
    max-width: 440px;
    text-align: center;
}

.verif-pendiente p {
    margin-bottom: 1rem;
}

.verif-pendiente .btn {
    width: auto;
    min-width: 8rem;
    justify-content: center;
    padding: 0.5rem 1.75rem;
}

.otp-inputs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 1.25rem 0;
}

.otp-box {
    width: 3rem;
    height: 3.5rem;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    -moz-appearance: textfield;
}

.otp-box:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.otp-box::-webkit-outer-spin-button,
.otp-box::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.otp-reenviar {
    margin-bottom: 0.5rem;
}

.btn-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--accent);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}

.btn-link:disabled {
    opacity: 0.6;
    cursor: default;
}

@media (max-width: 400px) {
    .otp-box {
        width: 2.5rem;
        height: 3rem;
        font-size: 1.25rem;
    }
}

/* enviar-mail.php — vista previa y lista de destinatarios */
.email-preview-frame {
    width: 100%;
    height: 620px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    display: block;
}

.email-destinatarios {
    max-height: 260px;
    overflow: auto;
    border-radius: var(--radius);
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: normal;
    font-size: 0.92rem;
    color: var(--text);
    margin-bottom: 0.65rem;
}

.checkbox-row input[type="checkbox"],
.checkbox-row input[type="radio"] {
    width: auto;
    margin: 0;
    accent-color: var(--accent);
    flex-shrink: 0;
}

.checkbox-row input[type="text"] {
    margin: 0;
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
}

.inline-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.inline-form input[type="text"] {
    margin: 0;
    flex: 1;
}

/* Toasts */
.toast-container {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    left: 1.25rem;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
    pointer-events: none;
}

.toast {
    margin: 0;
    width: 100%;
    max-width: 380px;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1.15rem;
    border-radius: 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: auto;
}

.toast::before {
    content: '✓';
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--accent);
    color: #04140f;
}

.toast-error {
    border-left-color: var(--danger);
}

.toast-error::before {
    content: '✕';
    background: var(--danger);
    color: #2b0410;
}

.toast-visible {
    opacity: 1;
    transform: translateY(0);
}

.calentar-intro {
    color: var(--text-dim);
    font-size: 0.95rem;
    margin: -0.5rem 0 1.25rem;
    max-width: 100%;
}

.calentar-tabs,
.seguridad-tabs {
    display: flex;
    gap: 0.4rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
}

.calentar-tab,
.seguridad-tab {
    background: none;
    border: none;
    color: var(--text-dim);
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.6rem 0.9rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.calentar-tab:hover,
.seguridad-tab:hover {
    color: var(--text);
}

.calentar-tab.activo,
.seguridad-tab.activo {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.grupo-config-item {
    transition: border-color 0.15s ease;
}

.grupo-config-item:hover {
    border-color: var(--accent);
}

.grupo-config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    cursor: pointer;
}

.grupo-config-header:focus-visible {
    outline: none;
}

.grupo-config-item:has(.grupo-config-header:focus-visible) {
    border-color: var(--accent);
}

.grupo-config-detalle {
    width: 100%;
}

.grupo-config-detalle[hidden] {
    display: none;
}

.grupo-config-detalle .calentar-resumen {
    margin: 0;
}

.grupo-proximo-envio {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid var(--info);
    border-radius: var(--radius);
    padding: 0.7rem 1rem;
    margin: 0 0 0.9rem;
    font-size: 0.85rem;
    color: var(--text);
}

.grupo-proximo-envio i {
    color: var(--info);
}

.grupo-proximo-envio strong {
    font-weight: 600;
}

.calentar-resumen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 0 1.5rem;
}

.calentar-resumen:empty {
    display: none;
}

.calentar-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1.25rem;
    min-width: 150px;
}

.calentar-stat-valor {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
}

.calentar-stat-etiqueta {
    font-size: 0.78rem;
    color: var(--text-dim);
    margin-top: 0.15rem;
}

.grupos-lista {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.grupo-candidato {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1.1rem;
}

.grupo-candidato-nombre {
    font-weight: 600;
    color: var(--text);
}

.grupo-candidato-lineas {
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-top: 0.2rem;
}

.badge-pausado {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--warning-dim);
    color: var(--warning);
    font-size: 0.72rem;
    font-weight: 600;
    vertical-align: middle;
}

.grupo-candidato-nota-ocupado {
    font-size: 0.78rem;
    color: var(--warning);
    margin-top: 0.5rem;
}

.btn-volver-grupos {
    background: none;
    border: none;
    color: var(--accent);
    font: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0;
    margin-bottom: 1rem;
}

.btn-volver-grupos:hover {
    text-decoration: underline;
}

.seleccion-lineas-lista {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.seleccion-linea-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.6rem 0.85rem;
    font-size: 0.85rem;
}

.seleccion-linea-item:has(input:checked) {
    border-color: var(--accent);
}

.seleccion-linea-etiqueta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
}

.seleccion-linea-item-ocupada .seleccion-linea-etiqueta {
    opacity: 0.5;
    cursor: not-allowed;
    color: var(--text-dim);
}

.seleccion-linea-nota {
    font-size: 0.76rem;
    color: var(--danger);
    margin: 0;
    padding-left: 1.75rem;
}

.seleccion-lineas-contador {
    font-size: 0.8rem;
    color: var(--text-dim);
    margin: 0 0 1rem;
}

.calentar-nuevo-bloque {
    margin: -0.5rem 0 1.5rem;
}

.calentar-aviso-min-lineas {
    color: var(--warning);
    font-size: 0.82rem;
    margin: 0.6rem 0 0;
}

.grupo-historial {
    width: 100%;
    margin-top: 1rem;
}

.grupo-historial-toggle {
    width: 100%;
}

.grupo-historial-panel {
    margin-top: 0.85rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.9rem;
}

.grupo-historial-panel[hidden] {
    display: none;
}

.grupo-historial-rango {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.grupo-historial-rango-btn {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-dim);
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    font-size: 0.78rem;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.grupo-historial-rango-btn:hover {
    color: var(--text);
    border-color: var(--border-hover);
}

.grupo-historial-rango-btn.activo {
    color: var(--bg);
    background: var(--accent);
    border-color: var(--accent);
    font-weight: 600;
}

.grupo-historial-grafico {
    width: 100%;
    position: relative;
}

.ghx-scroll {
    width: 100%;
    overflow-x: auto;
}

.grupo-historial-svg {
    width: 100%;
    min-width: 340px;
    height: auto;
    display: block;
}

.ghx-tooltip {
    position: absolute;
    transform: translate(-50%, calc(-100% - 6px));
    background: var(--bg-elevated);
    border: 1px solid var(--border-hover);
    color: var(--text);
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.28rem 0.5rem;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.ghx-tooltip[hidden] {
    display: none;
}

.grupo-historial-vacio {
    font-size: 0.82rem;
    color: var(--text-dim);
    margin: 0;
    padding: 0.9rem 0 0.2rem;
    text-align: center;
}

.ghx-grid {
    stroke: var(--border);
    stroke-width: 1;
}

.ghx-axis {
    stroke: var(--border-hover);
    stroke-width: 1;
}

.ghx-ylabel {
    fill: var(--text-dim);
    font-size: 11px;
    text-anchor: end;
    font-family: var(--font);
}

.ghx-xlabel {
    fill: var(--text-dim);
    font-size: 10px;
    text-anchor: middle;
    font-family: var(--font);
}

.ghx-axistitle {
    fill: var(--text-dim);
    font-size: 11px;
    text-anchor: middle;
    font-family: var(--font);
}

.ghx-bar {
    fill: var(--accent);
    transition: opacity 0.15s ease;
}

.ghx-bar:hover {
    opacity: 1;
    filter: brightness(1.25);
}

.grupo-miembros-lista {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.grupo-miembros-titulo {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-dim);
    margin: 0;
}

.grupo-miembro-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
}

.grupo-miembro-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.grupo-miembro-etiqueta {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.grupo-miembro-texto {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grupo-miembro-estado {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

.grupo-miembro-estado.conectado {
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.grupo-miembro-estado.desconectado {
    background: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-dim);
}

/* Barra de madurez de calentamiento (0–100%) */
.madurez {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    color: var(--text-dim);
    min-width: 0;
}

.madurez-track {
    flex: 1;
    min-width: 60px;
    height: 6px;
    border-radius: 999px;
    background: var(--accent-dim);
    overflow: hidden;
}

.madurez-fill {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
    transition: width 0.3s ease;
}

.madurez-texto {
    flex-shrink: 0;
    white-space: nowrap;
}

.madurez.listo .madurez-texto {
    color: var(--accent);
    font-weight: 600;
}

td[data-label="Madurez"] {
    min-width: 150px;
}

.btn-quitar-miembro {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
}

.btn-quitar-miembro:hover {
    color: var(--danger);
    background: var(--danger-dim);
}

/* ---- Seguridad ---- */

.seguridad-guia {
    margin-top: 1.25rem;
}

.seguridad-guia:first-of-type {
    margin-top: 0;
}

.seguridad-reglas {
    margin: 0;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.seguridad-reglas li {
    color: var(--text-dim);
    font-size: 0.9rem;
}

.seguridad-reglas strong {
    color: var(--text);
}

/* ===== Homepage pública (index.php) ===== */

.topbar-nav-guest {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.landing-main {
    width: 100%;
}

.landing-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.landing-section {
    padding: 5rem 0;
}

.landing-section-alt {
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.landing-eyebrow {
    display: inline-block;
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.landing-section-header {
    max-width: 620px;
    margin: 0 0 3rem;
}

.landing-section-header.centrado {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.landing-section-title {
    margin: 0 0 0.75rem;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.landing-section-sub {
    margin: 0;
    color: var(--text-dim);
    font-size: 1rem;
    line-height: 1.6;
}

/* Hero */

.landing-hero {
    padding: 4.5rem 0 5rem;
    background-image:
        radial-gradient(circle at 12% 10%, rgba(0, 229, 160, 0.12), transparent 42%),
        radial-gradient(circle at 88% 0%, rgba(0, 160, 229, 0.08), transparent 38%);
}

.landing-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 3rem;
    align-items: center;
}

.landing-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    margin-bottom: 1.25rem;
    background: var(--accent-dim);
    color: var(--accent);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.landing-hero h1 {
    margin: 0 0 1.1rem;
    font-size: 2.9rem;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.landing-hero h1 span {
    color: var(--accent);
}

.landing-lead {
    margin: 0 0 1.75rem;
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--text-dim);
    max-width: 46ch;
}

.landing-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.75rem;
}

.landing-hero-ctas .btn {
    padding: 0.8rem 1.5rem;
    font-size: 0.95rem;
}

.landing-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.landing-hero-points li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.landing-hero-points i {
    color: var(--accent);
}

.landing-hero-visual {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.landing-hero-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Feature cards */

.landing-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.landing-feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.landing-feature-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
}

.landing-feature-num {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--accent);
}

.landing-feature-card h3 {
    margin: 0 0 0.6rem;
    font-size: 1.1rem;
    font-weight: 700;
}

.landing-feature-card p {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Pasos */

.landing-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    counter-reset: paso;
}

.landing-step {
    position: relative;
    padding: 1.5rem 1.5rem 1.5rem 0;
}

.landing-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 1rem;
    border-radius: 999px;
    background: var(--accent-dim);
    color: var(--accent);
    font-weight: 700;
    font-size: 1rem;
}

.landing-step h3 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 700;
}

.landing-step p {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.88rem;
    line-height: 1.6;
}

/* Seguridad */

.landing-security-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}

.landing-security-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.landing-security-card .landing-security-fase {
    display: inline-block;
    margin-bottom: 0.75rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.landing-security-card h3 {
    margin: 0 0 0.6rem;
    font-size: 1rem;
    font-weight: 700;
}

.landing-security-card p {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.88rem;
    line-height: 1.6;
}

/* FAQ */

.landing-faq {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 780px;
    margin: 0 auto;
}

.landing-faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.3rem 1.25rem;
}

.landing-faq-item summary {
    padding: 1.1rem 0;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.landing-faq-item summary::-webkit-details-marker {
    display: none;
}

.landing-faq-item summary::after {
    content: '+';
    flex-shrink: 0;
    font-size: 1.3rem;
    color: var(--text-dim);
    transition: transform 0.15s ease;
}

.landing-faq-item[open] summary::after {
    content: '\2212';
    color: var(--accent);
}

.landing-faq-item p {
    margin: 0 0 1.1rem;
    color: var(--text-dim);
    font-size: 0.88rem;
    line-height: 1.65;
}

/* CTA final */

.landing-cta-banner {
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 3.5rem 2rem;
    background-image: radial-gradient(circle at 50% 0%, rgba(0, 229, 160, 0.1), transparent 60%);
}

.landing-cta-banner h2 {
    margin: 0 0 0.75rem;
    font-size: 1.75rem;
    font-weight: 700;
}

.landing-cta-banner p {
    margin: 0 0 1.5rem;
    color: var(--text-dim);
}

.landing-cta-banner .btn {
    padding: 0.8rem 1.75rem;
}

/* Footer */

.landing-footer {
    border-top: 1px solid var(--border);
    padding: 3.5rem 0 2rem;
}

.landing-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2.5rem;
}

.landing-footer-brand img {
    height: 32px;
    margin-bottom: 0.85rem;
}

.landing-footer-brand p {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.85rem;
    line-height: 1.6;
    max-width: 32ch;
}

.landing-footer-col h4 {
    margin: 0 0 0.9rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-dim);
}

.landing-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.landing-footer-col a {
    color: var(--text);
    text-decoration: none;
    font-size: 0.88rem;
}

.landing-footer-col a:hover {
    color: var(--accent);
}

.landing-footer-bottom {
    padding-top: 1.75rem;
    border-top: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 0.8rem;
    text-align: center;
}

@media (max-width: 900px) {
    .landing-hero-inner {
        grid-template-columns: 1fr;
    }

    .landing-features-grid {
        grid-template-columns: 1fr;
    }

    .landing-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .landing-hero h1 {
        font-size: 2.1rem;
    }

    .landing-section {
        padding: 3.25rem 0;
    }

    .landing-footer-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Mini-tutorial de bienvenida (burbujas guiadas) ===== */
.tutorial-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.65);
}

/* El sidebar es "position: sticky", así que arma su propio contexto de apilamiento — el
   z-index del elemento resaltado de adentro queda encerrado ahí y nunca gana contra el fondo
   oscuro (que vive afuera, en <body>), sin importar qué tan alto sea. Hay que subir el
   contexto del sidebar mismo cuando contiene al resaltado. */
.sidebar:has(.tutorial-resaltado) {
    z-index: 2001;
}

.tutorial-resaltado {
    position: relative;
    z-index: 2001;
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: 8px;
    box-shadow: 0 0 0 6px var(--accent-dim);
    /* El brillo queda por encima del fondo oscuro para que se vea bien, pero no se puede
       interactuar con el elemento real — solo con los botones de la burbuja (Siguiente/Omitir),
       para no dejar "saltear" pasos clickeando el elemento de atrás. */
    pointer-events: none;
}

.tutorial-burbuja {
    position: absolute;
    z-index: 2002;
    width: 300px;
    max-width: calc(100vw - 2rem);
    background: var(--bg-card);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--text);
}

.tutorial-burbuja::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--bg-card);
    border-left: 1px solid var(--accent);
    border-top: 1px solid var(--accent);
    transform: rotate(45deg);
}

.tutorial-burbuja[data-flecha="arriba"]::before {
    top: -8px;
    left: var(--flecha-left, 24px);
}

.tutorial-burbuja[data-flecha="abajo"]::before {
    bottom: -8px;
    left: var(--flecha-left, 24px);
    transform: rotate(225deg);
}

.tutorial-burbuja p {
    margin: 0 0 0.8rem;
}

.tutorial-burbuja .tutorial-paso {
    font-size: 0.72rem;
    color: var(--text-dim);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tutorial-burbuja-botones {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

.tutorial-burbuja-botones button {
    font-size: 0.82rem;
    padding: 0.4rem 0.8rem;
}

/* ==========================================================================
   app_metricas — panel de métricas de Meta (bloque propio, resto heredado
   tal cual de telefonos_website)
   ========================================================================== */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.kpi {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.15rem 1.25rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.kpi-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
}

.kpi-valor {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.01em;
}

.kpi-sub {
    margin-top: 0.3rem;
    font-size: 0.75rem;
    color: var(--muted);
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.panel-head h2 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
}

.panel-head form {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.panel-head form label {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.panel-head select,
.panel-head input[type="date"] {
    margin-top: 0;
    min-width: 170px;
}

.meta-cuenta-info {
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-bottom: 1.25rem;
}

.meta-cuenta-info strong {
    color: var(--text);
}

.num {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.tabla-vacia {
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--text-dim);
    font-size: 0.9rem;
}

.conectar-meta-box {
    max-width: 460px;
    margin: 3rem auto;
    text-align: center;
}

.conectar-meta-box p {
    color: var(--text-dim);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0.75rem 0 1.5rem;
}

.form-ayuda {
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: -0.9rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

/* Paso 1 del modal "Agregar nueva CP": no es un <form>, así que las reglas
   `form select` no aplican; se replica aquí el mismo aspecto del resto de
   campos. */
#modal-cp-paso1 label {
    display: block;
    margin-bottom: 1rem;
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--text-dim);
}

#modal-cp-paso1 select {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.7rem 0.9rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: var(--font);
    font-size: 0.95rem;
}

#modal-cp-paso1 p {
    font-size: 0.9rem;
    margin: 0 0 1rem;
}

/* Navegación por niveles (Campañas / Conjuntos / Anuncios) tipo Ads Manager. */
.nivel-tabs-fila {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.nivel-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

/* Lista arrastrable del modal "Configurar columnas". */
.lista-columnas-config {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 50vh;
    overflow-y: auto;
}

.lista-columnas-config li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: grab;
    user-select: none;
}

.lista-columnas-config li i {
    color: var(--text-dim);
}

.lista-columnas-config li.arrastrando {
    opacity: 0.4;
    border-color: var(--accent);
}

.nivel-tabs a {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dim);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.nivel-tabs a:hover {
    color: var(--text);
}

.nivel-tabs a.activo {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* "Conjuntos" / "Anuncios" son <button type="submit"> (no <a>) cuando hay
   checkboxes marcados que hay que mandar al siguiente nivel; visualmente son
   la misma pestaña. */
.nivel-tabs button {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dim);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-family: var(--font);
    cursor: pointer;
}

.nivel-tabs button:hover {
    color: var(--text);
}

.form-nivel {
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Selector de rango de fechas (panel.php): botón que abre un popover con
   rangos predeterminados a la izquierda y un calendario de dos meses a la
   derecha, al estilo Meta Ads Manager. Nada se aplica hasta pulsar
   "Actualizar" (ver iniciarRangoPicker/aplicarRangoPopover en script.js).
   --------------------------------------------------------------------------- */
.rango-picker {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.rango-picker-etiqueta {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-dim);
}

.rango-picker-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    min-width: 190px;
    padding: 0.6rem 0.8rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: var(--font);
    font-size: 0.9rem;
    cursor: pointer;
}

.rango-picker-btn:hover {
    border-color: var(--border-hover);
}

.rango-picker-caret {
    color: var(--text-dim);
    font-size: 0.7rem;
}

.rango-popover {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 40;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    width: min(640px, calc(100vw - 2rem));
}

.rango-popover[hidden] {
    display: none;
}

.rango-popover-cuerpo {
    display: flex;
    gap: 1.25rem;
    padding: 1rem;
}

.rango-presets {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 150px;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    padding-right: 1rem;
}

.rango-preset-opt {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.5rem;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
}

.rango-preset-opt:hover {
    background: var(--bg-elevated);
}

.rango-preset-opt input[type="radio"] {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.rango-calendario {
    flex: 1;
    min-width: 0;
}

.rango-calendario-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.rango-cal-nav {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.55rem;
    border-radius: 6px;
}

.rango-cal-nav:hover {
    color: var(--text);
    background: var(--bg-elevated);
}

.rango-calendario-meses {
    display: flex;
    flex: 1;
    justify-content: space-around;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: capitalize;
}

.rango-calendario-grillas {
    display: flex;
    gap: 1.25rem;
}

.cal-grilla {
    flex: 1;
    min-width: 0;
    display: grid;
    /* minmax(0, 1fr), no 1fr a secas: un "1fr" solo respeta un mínimo de 0 si
       se lo dice explícitamente. Sin el minmax(0, ...), cada columna hereda
       como mínimo el ancho de su contenido (p. ej. el padding por defecto de
       un <button>), así que la columna con el número más "pesado" empuja a
       las demás y las 7 columnas dejan de ser iguales — distinto según qué
       día cae en qué columna, por eso se veía "a veces más ancho, a veces
       más angosto" entre un mes y otro. */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}

.cal-dia-nombre {
    text-align: center;
    font-size: 0.68rem;
    color: var(--text-dim);
    padding: 0.2rem 0;
}

.cal-dia {
    aspect-ratio: 1;
    min-width: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 0.78rem;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--text);
    font-family: var(--font);
    cursor: pointer;
}

.cal-dia:hover:not(:disabled) {
    background: var(--bg-elevated);
}

.cal-dia:disabled {
    color: var(--muted);
    cursor: not-allowed;
}

.cal-dia-vacio {
    visibility: hidden;
    cursor: default;
}

.cal-dia-hoy {
    box-shadow: inset 0 0 0 1px var(--border-hover);
}

.cal-dia-en-rango {
    background: var(--accent-dim);
    border-radius: 0;
}

.cal-dia-limite {
    background: var(--accent) !important;
    color: #06120e;
    font-weight: 600;
}

.rango-popover-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.rango-resumen {
    font-size: 0.8rem;
    color: var(--text-dim);
}

.rango-popover-botones {
    display: flex;
    gap: 0.6rem;
}

@media (max-width: 640px) {
    .rango-popover-cuerpo {
        flex-direction: column;
    }
    .rango-presets {
        flex-direction: row;
        flex-wrap: wrap;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding-right: 0;
        padding-bottom: 0.75rem;
    }
    .rango-calendario-grillas {
        flex-direction: column;
    }
}

/* Columna de checkbox en la tabla de campañas/conjuntos: angosta y centrada. */
th.col-check,
td.col-check {
    width: 2.25rem;
    text-align: center;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}

th.col-estado,
td.col-estado {
    width: 3.5rem;
    text-align: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.col-check input[type="checkbox"] {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.breadcrumb a {
    color: var(--accent);
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb span {
    color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Webhook de facturación real (facturacion.php) + columnas "real" del panel.
   --------------------------------------------------------------------------- */
.webhook-card {
    margin-bottom: 1.25rem;
}

.webhook-card h3 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
}

code {
    font-family: Consolas, 'SFMono-Regular', Menlo, monospace;
    font-size: 0.85em;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 0.1em 0.4em;
}

.webhook-url {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0.5rem 0 0.75rem;
}

.webhook-url code {
    flex: 1;
    display: block;
    padding: 0.7rem 0.9rem;
    overflow-x: auto;
    word-break: break-all;
    line-height: 1.5;
}

.webhook-url .btn {
    flex-shrink: 0;
}

.tabla-formato {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0 0.75rem;
    font-size: 0.85rem;
}

.tabla-formato td {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.tabla-formato td:first-child {
    white-space: nowrap;
    width: 1%;
}

.tabla-formato code {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent);
}

/* Columnas de facturación real en la tabla del panel: separadas visualmente
   de las columnas que vienen de Meta. */
th.td-real,
td.td-real {
    background: var(--accent-dim);
}

th.td-real {
    color: var(--accent);
}

/* ==========================================================================
   Bloque inferior del panel: gráficas de A/B testing y downsell (datos del
   webhook, acotados al rango de fechas elegido).
   ========================================================================== */

.ab-downsell {
    margin-top: 2.5rem;
}

.grafica-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: stretch;
}

.grafica-card {
    flex: 1 1 340px;
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem 1.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.grafica-vacia {
    color: var(--text-dim);
    font-size: 0.85rem;
    margin: 1rem 0 0;
    line-height: 1.5;
}

.ab-sub {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1rem;
}

.ab-tabla th {
    text-align: left;
    white-space: nowrap;
}

.ab-tabla td.num,
.ab-tabla th.num {
    text-align: right;
}

.ab-tabla th.ab-ganadora,
.ab-tabla td.ab-ganadora {
    background: var(--accent-dim);
    color: var(--accent);
}

.ab-badge {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--accent);
    color: #06231b;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.barras-chart {
    display: flex;
    gap: 1.75rem;
    align-items: flex-end;
    padding: 0.5rem 0 0;
    overflow-x: auto;
}

.barra-col {
    display: flex;
    flex: 0 0 96px;
    flex-direction: column;
    align-items: center;
    height: 220px;
}

.barra-valor {
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--text);
}

.barra-track {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.barra {
    width: 100%;
    min-height: 4px;
    background: var(--accent);
    border-radius: 6px 6px 0 0;
}

.barra-alt {
    background: var(--muted);
}

.barra-label {
    margin-top: 0.6rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-dim);
}

.barra-label span {
    display: block;
    margin-top: 0.15rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
}

.barra-label .ab-badge {
    margin: 0.2rem 0 0;
}

.grafica-card .tabla-scroll {
    margin-top: 1.25rem;
}

/* --- Pantalla "Editar campaña" (editar.php) ------------------------------ */

.editar-head {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

.editar-volver {
    color: var(--text-dim);
    font-size: 0.85rem;
    text-decoration: none;
    width: fit-content;
}

.editar-volver:hover {
    color: var(--accent);
}

.editar-head h2 {
    margin: 0;
}

.editar-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1.5rem;
    align-items: start;
}

.editar-layout[hidden] {
    display: none;
}

.editar-sidebar {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem;
    position: sticky;
    top: 1rem;
}

.editar-arbol {
    max-height: 60vh;
    overflow-y: auto;
    margin-top: 0.25rem;
}

.editar-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.6rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--text);
}

.editar-item:hover {
    background: var(--bg-soft, rgba(255, 255, 255, 0.04));
}

.editar-item.activo {
    background: rgba(0, 229, 160, 0.12);
    color: var(--accent);
}

.editar-item-campana {
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.editar-item-conjunto {
    margin-left: 0.5rem;
}

.editar-item-anuncio {
    margin-left: 1.5rem;
    font-size: 0.82rem;
    color: var(--text-dim);
}

.editar-item input[type="checkbox"] {
    cursor: pointer;
}

.editar-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.editar-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.editar-panel h3 {
    margin-top: 0;
}

.editar-panel form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 480px;
}

.editar-panel label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.editar-panel label[hidden],
.editar-panel form[hidden] {
    display: none;
}

/* Radios y checkboxes: en fila con su texto (la regla de arriba los apilaba). */
.editar-panel label.checkbox-row {
    flex-direction: row;
    align-items: center;
    color: var(--text);
}

/* Casillas de la ubicación de la conversión (Apps de mensajes / Perfil),
   debajo del selector, como en Ads Manager. */
.editar-panel .checkbox-grupo {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0.5rem 0 0 0.25rem;
}

.editar-panel .checkbox-grupo[hidden] {
    display: none;
}

/* Ayuda «¿Falta un número?» debajo del selector de WhatsApp: .form-ayuda
   trae margen negativo arriba (pensado para ir pegada a un campo), acá
   necesita aire. */
.editar-panel .ayuda-whatsapp {
    margin-top: 0.4rem;
    margin-bottom: 0;
}

#conjunto-seleccion-resumen,
#anuncio-conjunto-nombre {
    font-size: 0.8rem;
    font-weight: normal;
    color: var(--text-dim);
}

/* Edición en vivo: indicador por campo (Guardando / Guardado / error /
   falta algo) debajo del campo que se cambió. */
.estado-vivo {
    display: block;
    margin-top: -0.6rem;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-dim);
}

.estado-vivo[hidden] {
    display: none;
}

.estado-vivo-guardando { color: var(--info); }
.estado-vivo-ok { color: var(--accent); }
.estado-vivo-error { color: var(--danger); }
.estado-vivo-pendiente { color: var(--warning); }

/* Caja con el resultado de validar contra Meta lo que se está por crear. */
.validacion-vivo {
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    font-size: 0.82rem;
    line-height: 1.45;
}

.validacion-vivo[hidden] {
    display: none;
}

.validacion-vivo-ok { border-color: var(--accent); background: var(--accent-dim); color: var(--text); }
.validacion-vivo-app { border-color: var(--warning); background: var(--warning-dim); color: var(--text); }
.validacion-vivo-meta { border-color: var(--danger); background: var(--danger-dim); color: var(--text); }
.validacion-vivo-validando { color: var(--text-dim); }

/* Interruptor Activo / En pausa arriba de cada formulario del editor. */
.estado-fila {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
}

.editar-panel label.switch-estado {
    display: inline-block;
    flex-direction: initial;
}

.objetivo-card:disabled {
    opacity: 0.5;
    cursor: wait;
}

/* «Agregar anuncio» debajo de los anuncios de cada conjunto en el árbol. */
.editar-item-agregar-anuncio {
    margin-left: 1.5rem;
    font-size: 0.8rem;
    color: var(--text-dim);
}

.editar-item-agregar-anuncio i {
    font-size: 0.7rem;
}

/* Formulario «Nuevo anuncio»: títulos de sección como en Ads Manager
   (Identidad / Configuración / Contenido). */
.editar-panel .form-seccion {
    margin: 0.5rem 0 -0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    font-size: 0.95rem;
    color: var(--text);
}

.editar-panel .form-ayuda-pegada {
    margin: -0.6rem 0 0;
}

.editar-panel #anuncio-cargando {
    margin: 0;
}

#anuncio-bloque-nuevo,
#anuncio-bloque-existente {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#anuncio-bloque-nuevo[hidden],
#anuncio-bloque-existente[hidden],
.anuncio-vista-previa[hidden] {
    display: none;
}

.anuncio-vista-previa img,
.anuncio-vista-previa video {
    display: block;
    max-width: 100%;
    max-height: 280px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

/* Plantilla de mensaje del anuncio (WhatsApp / Messenger / Instagram). */
.anuncio-plantilla,
.anuncio-plantilla-editor,
.anuncio-seguimiento {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.anuncio-plantilla[hidden],
.anuncio-plantilla-editor[hidden],
.anuncio-plantilla-vista[hidden] {
    display: none;
}

.anuncio-plantilla-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.anuncio-plantilla-acciones .btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.anuncio-plantilla-editor {
    padding: 0.9rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-elevated);
}

/* Vista previa tipo chat: saludo de la página a la izquierda, mensaje
   prellenado del cliente a la derecha. */
.anuncio-plantilla-vista {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.anuncio-plantilla-vista .burbuja {
    max-width: 85%;
    padding: 0.45rem 0.7rem;
    border-radius: 12px;
    font-size: 0.82rem;
    line-height: 1.4;
    white-space: pre-wrap;
}

.anuncio-plantilla-vista .burbuja-pagina {
    align-self: flex-start;
    background: var(--bg-elevated);
    color: var(--text);
}

.anuncio-plantilla-vista .burbuja-cliente {
    align-self: flex-end;
    background: var(--accent-dim);
    color: var(--text);
}

/* Seguimiento: el selector va debajo de su casilla, con sangría. */
.editar-panel label.anuncio-seguimiento-select {
    margin: -0.35rem 0 0.25rem 1.6rem;
}

/* Lista de publicaciones de la página («Usar publicación existente»). */
.anuncio-publicaciones {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 340px;
    overflow-y: auto;
}

.editar-panel label.anuncio-publicacion {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text);
}

.editar-panel label.anuncio-publicacion:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-dim);
}

.anuncio-publicacion input[type="radio"] {
    width: auto;
    flex: 0 0 auto;
    margin: 0;
}

.anuncio-publicacion img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.anuncio-publicacion span {
    flex: 1;
    font-size: 0.8rem;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.objetivo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.objetivo-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1rem;
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.1s ease, color 0.1s ease;
}

.objetivo-card:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Selector de país estilo Meta Ads Manager: buscador + chips arriba. */
.pais-selector {
    position: relative;
}

.pais-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.pais-chips:not(:empty) {
    margin-bottom: 0.5rem;
}

.pais-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--accent-dim);
    color: var(--accent);
    border-radius: 999px;
    padding: 0.25rem 0.4rem 0.25rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.pais-chip-quitar {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.15rem;
    opacity: 0.75;
}

.pais-chip-quitar:hover {
    opacity: 1;
}

.pais-buscador {
    width: 100%;
    padding: 0.55rem 0.7rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: var(--font);
    font-size: 0.9rem;
}

.pais-buscador:focus {
    outline: none;
    border-color: var(--accent);
}

.pais-resultados {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.3rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.pais-resultado-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.55rem 0.7rem;
    background: none;
    border: none;
    color: var(--text);
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}

.pais-resultado-item:hover {
    background: var(--accent-dim);
    color: var(--accent);
}

.pais-resultado-item span {
    color: var(--text-dim);
    font-size: 0.75rem;
}

.pais-resultado-vacio {
    padding: 0.6rem 0.7rem;
    color: var(--text-dim);
    font-size: 0.82rem;
}

@media (max-width: 900px) {
    .editar-layout {
        grid-template-columns: 1fr;
    }

    .editar-sidebar {
        position: static;
    }
}

@media (max-width: 720px) {
    .grafica-card {
        flex-basis: 100%;
    }
}

/* Botón de acción destructiva (Eliminar en Meta). */
.btn-peligro {
    background: var(--danger);
    color: #fff;
}

.btn-peligro:hover {
    box-shadow: 0 0 0 3px var(--danger-dim);
}

.nombre-eliminar-btn:hover {
    color: var(--danger);
}

/* Historial de cambios en Meta (historial.php). */
.historial-detalle summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 0.8rem;
}

.historial-detalle pre {
    max-width: 520px;
    white-space: pre-wrap;
    word-break: break-all;
    font-size: 0.75rem;
    margin: 0.35rem 0 0;
}

/* Nombre + estado del conjunto: solo con UNO elegido (poblarFormularioConjunto). */
#conjunto-campos-individuales:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Formato por ubicación: editor de recorte (recuadro arrastrable sobre la
   vista previa; lo de afuera del recorte queda oscurecido). */
.anuncio-formatos,
.anuncio-formato {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.anuncio-formatos[hidden],
.recorte-editor[hidden] {
    display: none;
}

.anuncio-formato {
    padding-bottom: 0.75rem;
    border-bottom: 1px dashed var(--border);
}

.recorte-editor {
    position: relative;
    align-self: flex-start;
    max-width: 100%;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--border);
    line-height: 0;
    user-select: none;
}

.recorte-editor img,
.recorte-editor video {
    display: block;
    pointer-events: none; /* el arrastre lo maneja .recorte-caja */
}

.recorte-caja {
    position: absolute;
    box-sizing: border-box;
    border: 2px solid var(--accent);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
    cursor: move;
    touch-action: none;
}

.recorte-aplicar {
    align-self: flex-start;
}

/* Mejoras de Advantage+: plegadas, todas desactivadas por defecto. */
.anuncio-mejoras {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
}

.anuncio-mejoras summary {
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text);
}

.anuncio-mejoras #mejoras-resumen {
    font-size: 0.8rem;
    color: var(--text-dim);
}

.anuncio-mejoras .form-ayuda {
    margin: 0.6rem 0;
}

.anuncio-mejoras-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.35rem 1rem;
}

.anuncio-mejoras-lista label.checkbox-row {
    font-size: 0.82rem;
}

/* --- Modal «Editar N …» (editar.php), como el de Ads Manager ---------------
   Árbol | lista de campos | tabla «Editar todos» + una fila por elegido. Cada
   columna con su propio scroll. */
.modal-editar-varios .modal {
    max-width: 1500px;
    height: 90vh;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-editar-varios .modal-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

.varios-grid {
    display: grid;
    grid-template-columns: 280px 220px 1fr;
    height: 100%;
}

.varios-arbol,
.varios-campos,
.varios-tabla-wrap {
    min-height: 0;
    overflow-y: auto;
}

.varios-arbol {
    padding: 0.75rem 0.5rem;
    border-right: 1px solid var(--border);
}

.varios-arbol .editar-arbol {
    max-height: none;
    margin-top: 0;
}

/* En el modal no se agrega nada: solo se elige qué editar. */
.varios-arbol .editar-item-agregar-anuncio,
.varios-arbol .editar-item-agregar-conjunto,
.varios-arbol .editar-arbol-vacio {
    display: none;
}

.varios-campos {
    padding: 0.75rem 0.5rem;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

.varios-campos h4 {
    margin: 0.9rem 0.5rem 0.35rem;
    font-size: 0.9rem;
}

.varios-campos h4:first-child {
    margin-top: 0.25rem;
}

.varios-campo {
    background: none;
    border: none;
    color: var(--text);
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.86rem;
}

.varios-campo:hover {
    background: var(--bg-soft, rgba(255, 255, 255, 0.04));
}

.varios-campo.activo {
    background: rgba(0, 229, 160, 0.12);
    color: var(--accent);
}

.varios-tabla-wrap {
    padding: 1rem 1.25rem;
}

.varios-tabla {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.varios-tabla th,
.varios-tabla td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
    font-size: 0.86rem;
}

.varios-tabla th {
    font-weight: 600;
}

.varios-tabla td:first-child {
    width: 40%;
    overflow-wrap: anywhere;
}

.varios-fila-todos {
    background: var(--bg-soft, rgba(255, 255, 255, 0.04));
}

/* Mismo look que los campos de los formularios (form input). */
.varios-editor input[type="text"],
.varios-editor input[type="number"],
.varios-editor input[type="datetime-local"],
.varios-editor select,
.varios-editor textarea {
    display: block;
    width: 100%;
    max-width: 420px;
    padding: 0.55rem 0.75rem;
    margin: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.88rem;
    font-family: var(--font);
}

.varios-editor input:focus,
.varios-editor select:focus,
.varios-editor textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.varios-editor textarea {
    max-width: none;
    resize: vertical;
    min-height: 4.5rem;
    line-height: 1.4;
}

.varios-editor input::placeholder,
.varios-editor textarea::placeholder {
    color: var(--text-dim);
    font-style: italic;
}

.varios-editor .pais-selector .pais-buscador {
    margin-top: 0.35rem;
}

.varios-control-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.varios-control-fila select,
.varios-control-fila input[type="number"] {
    width: auto;
    min-width: 140px;
    flex: 1;
}

.varios-control-fila input[hidden] {
    display: none;
}

.varios-control-fila label.checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.varios-mixto,
.varios-no-aplica {
    color: var(--text-dim);
    font-size: 0.8rem;
    font-style: italic;
}

.varios-estado {
    margin-top: 0.35rem;
    font-size: 0.78rem;
}

.varios-estado[hidden] {
    display: none;
}

.varios-seguimiento .anuncio-seguimiento {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.varios-seguimiento label.checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.varios-seguimiento label[hidden] {
    display: none;
}

.editar-varios-ayuda {
    font-size: 0.75rem;
    margin: 0.5rem 0.25rem 0;
}

body.con-modal-grande {
    overflow: hidden;
}

@media (max-width: 1000px) {
    .modal-editar-varios .modal-body {
        overflow-y: auto;
    }

    .varios-grid {
        grid-template-columns: 1fr;
        height: auto;
    }

    .varios-arbol,
    .varios-campos {
        border-right: none;
        border-bottom: 1px solid var(--border);
        max-height: 30vh;
    }
}

/* Editor con varias campañas (editar.php): título + «Editar N …» en la misma
   fila; «Agregar conjunto» al pie de cada campaña. */
.editar-head-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.editar-arbol .editar-item-campana + .editar-item-campana,
.editar-arbol .editar-item-agregar-conjunto + .editar-item-campana {
    margin-top: 0.5rem;
}

.editar-item-agregar-conjunto {
    margin-left: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-dim);
}

.editar-item-agregar-conjunto i {
    font-size: 0.7rem;
}

.editar-arbol-vacio {
    margin: 0.25rem 0 0.25rem 1rem;
    font-size: 0.8rem;
}

.editar-item {
    user-select: none;
}

/* Modal «Editar N …»: borrador sin guardar + pie con «Guardar cambios». */
.varios-pie {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
}

.varios-pie-texto {
    margin-right: auto;
    color: var(--text-dim);
    font-size: 0.85rem;
}

.varios-pie-error {
    color: var(--danger);
}

.varios-pie-ok {
    color: var(--accent);
}

.varios-pie .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Fila o campo con cambios sin guardar: barra y punto de color. */
.varios-tabla tr.varios-modificado td:first-child {
    box-shadow: inset 3px 0 0 var(--accent);
}

.varios-campo.modificado::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 0.4rem;
    border-radius: 50%;
    background: var(--accent);
    vertical-align: middle;
}