/* =========================================================================
   backoffice.css — piel "oscuro refinado" del backoffice (/user y /admin)
   Tarea .ai/tasks/0014 · ADR .ai/decisions/0017 + 0018
   Todo bajo body#adminBody, que llevan los dos paneles. Las diferencias
   (selector de sitio, "Editar en el sitio", dashboard) van bajo .panel-user;
   los retoques de marca de /admin bajo .panel-admin.
   Se carga desde resources/views/admin/head.blade.php (los dos paneles).
   ========================================================================= */

body#adminBody {
    --bg:          #14161b;
    --surface:     #1b1e25;
    --surface-2:   #21252e;
    --surface-3:   #262b35;
    --border:      #2a2f3a;
    --border-soft: #24282f;
    --text:        #e7e9ee;
    --text-muted:  #9aa2af;
    --text-faint:  #6b7280;
    --accent:      #4c9dff;
    --accent-2:    #6fb2ff;
    --accent-weak: rgba(76, 157, 255, 0.14);
    --edit:        #f0b429;
    --edit-weak:   rgba(240, 180, 41, 0.14);
    --success:     #43c59e;
    --danger:      #f2665e;
    --radius:      10px;
    --radius-sm:   7px;
    --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
    --font-body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

body#adminBody h1,
body#adminBody h2,
body#adminBody h3,
body#adminBody h4,
body#adminBody h5 {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
    color: var(--text);
}

/* ---------------------------------------------------------------- shell -- */

/* Solo los paneles reales (con barra lateral) fuerzan el layout de altura fija
   con scroll interno. Las pantallas de acceso (.panel-auth) llevan `#adminBody`
   sin `.panel-user`/`.panel-admin` y usan su propio centrado. */
body#adminBody.panel-user .wrapper,
body#adminBody.panel-admin .wrapper {
    display: flex;
    align-items: stretch;
    height: 100vh;
    overflow: hidden;
}

body#adminBody.panel-user #adminContain,
body#adminBody.panel-admin #adminContain {
    background: var(--bg);
    flex: 1;
    min-width: 0;
    display: flex;
    overflow: hidden;
}
body#adminBody #adminContain { background: var(--bg); }

/* el .row.p-5 del index.blade se sustituye por .panel-main / .panel-content.
   .panel-content es el UNICO contenedor de scroll: el sidebar y la topbar se
   quedan fijos, y el `position: sticky` de la barra de guardar funciona. */
body#adminBody .panel-main {
    flex: 1;
    min-width: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

body#adminBody .panel-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px 28px 48px;
}

/* --------------------------------------------------- pantallas de acceso -- */

body#adminBody.panel-auth { height: auto; min-height: 100%; overflow-y: auto; }
body#adminBody.panel-auth .wrapper { display: block; }

body#adminBody .panel-auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 48px 20px;
}

body#adminBody .panel-auth-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
}
body#adminBody .panel-auth-brand .brand-mark {
    width: 34px; height: 34px; border-radius: 9px;
    background: linear-gradient(150deg, var(--accent), #2f6fd0);
    display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 17px;
}
body#adminBody.panel-auth.panel-admin .panel-auth-brand .brand-mark { background: linear-gradient(150deg, #8a8f9c, #565c68); color: #14161b; }
body#adminBody .panel-auth-brand b { color: var(--accent-2); font-weight: 600; }
body#adminBody.panel-auth.panel-admin .panel-auth-brand b { color: var(--text-muted); font-weight: 500; }
body#adminBody .panel-auth-brand .brand-tag {
    font-size: 10px; font-weight: 600; letter-spacing: 0.11em;
    text-transform: uppercase; color: var(--text-faint);
}

/* se neutralizan las rejillas Bootstrap que envuelven la tarjeta */
body#adminBody .panel-auth-shell main,
body#adminBody .panel-auth-shell .cotainer,
body#adminBody .panel-auth-shell .container,
body#adminBody .panel-auth-shell .row,
body#adminBody .panel-auth-shell [class*="col-"] {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body#adminBody .panel-auth-shell .card {
    width: 380px;
    max-width: 92vw;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    overflow: hidden;
    box-shadow: 0 30px 80px -30px rgba(0,0,0,0.55);
}
body#adminBody .panel-auth-shell .card-header {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-soft) !important;
    padding: 20px !important;
    text-align: center;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--text) !important;
}
body#adminBody .panel-auth-shell .card-header img { max-height: 34px; width: auto; }
body#adminBody .panel-auth-shell .card-body {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 22px !important;
}
body#adminBody .panel-auth-shell .form-group { margin-bottom: 14px; }
body#adminBody .panel-auth-shell .checkbox label {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--text-muted); font-weight: 500;
}
body#adminBody .panel-auth-shell .d-grid { display: block; margin-top: 4px; }
body#adminBody .panel-auth-shell .d-grid .btn,
body#adminBody .panel-auth-shell button[type=submit] {
    width: 100%;
    min-height: 40px;
    border-radius: var(--radius-sm);
    background: linear-gradient(160deg, var(--accent), #2f6fd0) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
}
body#adminBody .panel-auth-shell a { color: var(--accent-2); font-size: 12.5px; font-weight: 500; }
body#adminBody .panel-auth-shell a:hover { color: #9ac9ff; }
body#adminBody .panel-auth-shell .auth-links .sep { color: var(--text-faint); margin: 0 6px; }
body#adminBody .panel-auth-shell .text-danger { color: var(--danger) !important; font-size: 11.5px; }

/* --------------------------------------------------------------- sidebar -- */

body#adminBody #sidebar {
    min-width: 262px;
    max-width: 262px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    color: var(--text);
    display: flex;
    flex-direction: column;
    padding: 16px 12px;
    gap: 14px;
}

body#adminBody #sidebar.active {
    min-width: 74px;
    max-width: 74px;
}

body#adminBody .sidebar-header {
    padding: 6px 8px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

body#adminBody .sidebar-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

body#adminBody .sidebar-header .brand-mark {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(150deg, var(--accent), #2f6fd0);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    flex-shrink: 0;
}

body#adminBody .sidebar-header .brand-name b { color: var(--accent-2); font-weight: 600; }
/* marca de /admin: gris, sin acento de sitio */
body#adminBody.panel-admin .sidebar-header .brand-mark { background: linear-gradient(150deg, #8a8f9c, #565c68); color: #14161b; }
body#adminBody.panel-admin .sidebar-header .brand-name b { color: var(--text-muted); font-weight: 500; }
body#adminBody.panel-admin .sidebar-header .brand-tag {
    display: block; font-size: 10px; font-weight: 600;
    letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-faint);
}
body#adminBody #sidebar.active .brand-name,
body#adminBody #sidebar.active .panel-switcher .meta,
body#adminBody #sidebar.active .grp-label span,
body#adminBody #sidebar.active ul li a span { display: none; }
body#adminBody .sidebar-header strong { display: none; }

/* selector de sitio */
body#adminBody .panel-switcher {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--text) !important;
    text-decoration: none;
}
body#adminBody .panel-switcher:hover { border-color: #3a4150; }
body#adminBody .panel-switcher .avt {
    width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;
    background: linear-gradient(135deg, #5a6272, #39404e);
    display: grid; place-items: center;
    font-size: 11px; font-weight: 600; color: #cfd4dd;
}
body#adminBody .panel-switcher .meta { min-width: 0; }
body#adminBody .panel-switcher .meta .t {
    font-size: 13px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body#adminBody .panel-switcher .meta .s { font-size: 11px; color: var(--text-faint); }

/* nav */
body#adminBody #sidebar ul.components {
    padding: 4px 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    flex: 1;
}

body#adminBody #sidebar ul li { list-style: none; }

body#adminBody #sidebar ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 9px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted) !important;
    text-decoration: none;
    text-align: left;
}
body#adminBody #sidebar ul li a:hover {
    background: var(--surface-2);
    color: var(--text) !important;
}
body#adminBody #sidebar ul li.active > a,
body#adminBody #sidebar ul li a[aria-expanded="true"] {
    background: var(--accent-weak);
    color: #dbe8ff !important;
}
body#adminBody #sidebar ul li a i,
body#adminBody #sidebar ul li a svg {
    width: 16px; height: 16px; flex-shrink: 0;
    color: var(--text-faint);
    font-size: 15px;
    margin-right: 0;
}
body#adminBody #sidebar ul li a:hover i,
body#adminBody #sidebar ul li.active > a i { color: var(--accent-2); }
/* El pintado antiguo (App::buildMenuItems) emitia un <i> de icono + un
   <i class="fas fa-copy"> de relleno; se oculta el segundo. El menu actual
   (App::buildMenuMapped, ADR 0033) emite un solo icono por entrada. */
body#adminBody #sidebar ul li a i + i { display: none; }

/* cabeceras de grupo (Fase 2) */
body#adminBody #sidebar .grp-label {
    padding: 14px 9px 4px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #5b616d;
}
body#adminBody #sidebar .grp-label:first-child { padding-top: 4px; }

/* submenús colapsables */
body#adminBody #sidebar ul ul {
    padding: 2px 0 2px 8px;
    margin: 2px 0;
    list-style: none;
    border-left: 1px solid var(--border);
}
body#adminBody #sidebar ul ul a {
    font-size: 12.5px !important;
    padding-left: 14px !important;
    background: transparent !important;
}
body#adminBody #sidebar .dropdown-toggle::after {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    content: "";
    width: 6px; height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-60%) rotate(45deg);
    opacity: 0.6;
}

/* usuario al pie */
body#adminBody .panel-user-box {
    border-top: 1px solid var(--border);
    padding-top: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
body#adminBody .panel-user-box .u-avt {
    width: 28px; height: 28px; border-radius: 999px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--edit), #d98a1e);
    display: grid; place-items: center;
    font-size: 11px; font-weight: 700; color: #201700;
}
body#adminBody .panel-user-box .u-meta { flex: 1; min-width: 0; }
body#adminBody .panel-user-box .u-meta .t { font-size: 12.5px; font-weight: 600; }
body#adminBody .panel-user-box .u-meta .s { font-size: 11px; color: var(--text-faint); }
body#adminBody .panel-user-box .out { color: var(--text-faint) !important; }
body#adminBody .panel-user-box .out:hover { color: var(--danger) !important; }

/* --------------------------------------------------------------- topbar -- */

body#adminBody .panel-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 28px;
    height: 58px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
body#adminBody .panel-topbar .crumb {
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}
body#adminBody .panel-topbar .crumb b { color: var(--text); font-weight: 600; }
body#adminBody .panel-topbar .spacer { flex: 1; }

body#adminBody .panel-lang { display: flex; gap: 4px; font-size: 12px; }
body#adminBody .panel-lang a {
    padding: 3px 7px;
    border-radius: 6px;
    color: var(--text-faint) !important;
    text-decoration: none;
}
body#adminBody .panel-lang a.on { background: var(--surface-2); color: var(--text) !important; font-weight: 600; }

/* ------------------------------------------------------ botones y links -- */

body#adminBody .btn-panel,
body#adminBody .admin_button,
body#adminBody input[type=submit],
body#adminBody input[type=button],
body#adminBody .admin_form .button,
body#adminBody button.btn.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: auto;
    min-height: 34px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text) !important;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transition: border-color .12s, background .12s, filter .12s;
}
body#adminBody .btn-panel svg,
body#adminBody .admin_button svg { width: 15px; height: 15px; }
body#adminBody .admin_button:hover,
body#adminBody input[type=submit]:hover,
body#adminBody input[type=button]:hover,
body#adminBody button.btn.btn-primary:hover {
    border-color: #3a4150;
    background: var(--surface-3);
}

/* acción primaria: submit del form builder + botones marcados */
body#adminBody .admin_form input[type=submit],
body#adminBody .admin_form button[type=submit],
body#adminBody .admin_form .admin_button.btn-primary,
body#adminBody .btn-panel.is-primary {
    min-height: 40px;
    padding: 0 22px;
    font-size: 13px;
    background: linear-gradient(160deg, var(--accent), #2f6fd0);
    border-color: var(--accent);
    color: #fff !important;
}
body#adminBody .admin_form input[type=submit]:hover,
body#adminBody .admin_form button[type=submit]:hover,
body#adminBody .admin_form .admin_button.btn-primary:hover,
body#adminBody .btn-panel.is-primary:hover { filter: brightness(1.06); background: linear-gradient(160deg, var(--accent), #2f6fd0); }
body#adminBody .admin_form button[type=submit],
body#adminBody .admin_form input[type=submit] { width: auto !important; }
/* barra de guardar fija: el ultimo .element (el del submit) se pega al fondo del
   area de scroll para no perderse al final de un formulario largo. */
body#adminBody .admin_form .element[data-type="submit"] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: 14px;
    padding: 12px 4px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -10px 20px -12px var(--surface);
}
body#adminBody .admin_form .element[data-type="submit"] .form-group { margin-bottom: 0 !important; }
body#adminBody .admin_form .element[data-type="submit"] .form-text { display: none; }

/* acción "editar en el sitio" (ámbar) */
body#adminBody .btn-panel.is-edit {
    background: linear-gradient(160deg, var(--edit), #dd971d);
    border-color: var(--edit);
    color: #1c1400 !important;
}
body#adminBody .btn-panel.is-edit:hover { filter: brightness(1.06); }

body#adminBody .btn-panel.is-ghost { background: transparent; }

/* botón flotante "+" de los listados de Build */
body#adminBody .button_float {
    position: fixed;
    right: 28px;
    bottom: 28px;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: linear-gradient(160deg, var(--accent), #2f6fd0);
    border: 0;
    color: #fff;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.65);
    z-index: 30;
    transition: filter .12s, transform .12s;
}
body#adminBody .button_float:hover { filter: brightness(1.08); transform: translateY(-1px); }
body#adminBody a[href$="/edit/"] { text-decoration: none; }

body#adminBody .panel-content a { color: var(--accent-2) !important; }
body#adminBody .panel-content .btn-panel,
body#adminBody .panel-content .admin_button,
body#adminBody .panel-content .item_row .item.options a { color: var(--text) !important; }
body#adminBody .admin_form input[type=submit] { color: #fff !important; }

/* --------------------------------------------------------- tarjetas Build -- */

body#adminBody .card,
body#adminBody .module_item > .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    box-shadow: none;
}

body#adminBody .card .card-header,
body#adminBody .item_header {
    background: transparent;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text) !important;
    padding: 12px 16px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
}
/* tarjetas plegables con ancla (ADR 0035): cabecera clicable y enfocable,
   y al llegar por `#card-…` un resalte breve para ubicarla */
body#adminBody .module_item > .item_header { cursor: pointer; scroll-margin-top: calc(var(--cards-index-h, 0px) + 12px); }
body#adminBody .module_item > .item_header:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }
body#adminBody .module_item > .item_header:target { animation: card-target 1.6s ease-out 1; }
@keyframes card-target {
    from { box-shadow: inset 0 0 0 2px var(--accent-2); }
    to   { box-shadow: inset 0 0 0 2px transparent; }
}
body#adminBody .item_header .icon.fas { color: var(--accent-2); }
body#adminBody .item_header .row { flex-wrap: nowrap; }

/* ---- cabecera de tarjeta (ADR 0039) -------------------------------------
   icono · titulo + descripcion · acciones · "Sin guardar" · flecha.
   `.card.module_item` sube la especificidad por encima de modules.css, que
   pinta la cabecera abierta de #222 con `.module_item.select .item_header`. */
body#adminBody .card.module_item .item_header { background: transparent; padding: 14px 18px; }
body#adminBody .card.module_item:not(.select) .item_header { border-bottom-color: transparent; }
body#adminBody .card.module_item .item_header:hover { background: var(--surface-2); }
body#adminBody .item_header_row { display: flex; align-items: center; gap: 14px; min-width: 0; }
body#adminBody .item_header_row .item_icon {
    flex: none; width: 34px; height: 34px; border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-weak); color: var(--accent-2); font-size: 15px;
}
body#adminBody .item_header_text { flex: 1; min-width: 0; }
body#adminBody .item_header_text h5 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
body#adminBody .item_header_desc {
    margin: 2px 0 0; font-family: var(--font-body); font-weight: 400; font-size: 12.5px; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body#adminBody .item_header_row .item_chevron { flex: none; color: var(--text-muted); font-size: 13px; transition: transform .18s ease; }
body#adminBody .card.module_item:not(.select) .item_chevron { transform: rotate(-90deg); }
body#adminBody .card.module_item.is-single .item_header { cursor: default; }
body#adminBody .card.module_item.is-single .item_header:hover { background: transparent; }
body#adminBody .card.module_item.is-single .item_chevron { display: none; }
body#adminBody .item_dirty {
    display: none; font-family: var(--font-body); font-size: 12px; font-weight: 500;
    color: var(--edit); background: var(--edit-weak); padding: 3px 9px; border-radius: 999px;
}
body#adminBody .module_item.is-dirty .item_dirty { display: inline-block; }

/* ---- apartados dentro de una tarjeta (Form::title) -----------------------
   Antes: h3 grande con barra de 5px, mas fuerte que el titulo de la tarjeta.
   Ahora una etiqueta pequena con linea fina: pagina > tarjeta > apartado > campo. */
body#adminBody .admin_form h3.form-section-title {
    display: flex; align-items: center; gap: 12px;
    margin: 22px 0 6px; padding: 0; border: 0;
    font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
body#adminBody .admin_form h3.form-section-title::after { content: ""; flex: 1; border-top: 1px solid var(--border); }

/* ---- indice "En esta pagina" (ADR 0039) ----------------------------------- */
body#adminBody .cards-index {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 0 0 16px; padding: 10px 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
body#adminBody .cards-index-title { font-size: 12px; color: var(--text-faint); white-space: nowrap; }
body#adminBody .cards-index-list { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
body#adminBody .cards-index-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border);
    font-size: 12.5px; color: var(--text-muted) !important; text-decoration: none; white-space: nowrap;
}
body#adminBody .cards-index-chip:hover { border-color: var(--accent-2); color: var(--text) !important; }
body#adminBody .cards-index-chip.is-active { background: var(--accent-weak); border-color: var(--accent); color: var(--accent-2) !important; }
body#adminBody .cards-index-dot { display: none; width: 7px; height: 7px; border-radius: 50%; background: var(--edit); }
body#adminBody .cards-index-chip.is-dirty .cards-index-dot { display: inline-block; }
body#adminBody .cards-index-actions { display: flex; gap: 4px; margin-left: auto; }
body#adminBody .cards-index-all {
    background: none; border: 0; padding: 4px 8px; border-radius: var(--radius-sm);
    font-size: 12px; color: var(--accent-2); cursor: pointer; white-space: nowrap;
}
body#adminBody .cards-index-all:hover { background: var(--accent-weak); }
@media (max-width: 767px) {
    body#adminBody .cards-index { flex-wrap: nowrap; }
    body#adminBody .cards-index-title, body#adminBody .cards-index-actions { display: none; }
    body#adminBody .cards-index-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
}
body#adminBody .item_header_actions {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
body#adminBody .item_header_actions .back-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-2) !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
body#adminBody .item_header_actions .back-link:hover { color: #9ac9ff !important; }
body#adminBody .item_header_actions .btn-new {
    height: 32px;
    padding: 0 13px;
    font-size: 12px;
}

body#adminBody .card .card-body,
body#adminBody .item_content { padding: 16px; }
body#adminBody .card .card-footer { background: transparent; border-top: 1px solid var(--border-soft); }
body#adminBody .card .card-img-top { border-bottom: 1px solid var(--border); }

/* listado de Build: se neutralizan los bordes #EEE / 5px que modules.css pone
   en cada celda `.item_title .item`, y el rayado 2n en #F5F5F5. */
body#adminBody .item_title .item,
body#adminBody .item_row .item { border: 0 !important; }

body#adminBody .item_title.data {
    margin: 0;
    background: #191c22;
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
body#adminBody .item_title.data .item {
    padding: 11px 14px !important;
    font-size: 11.5px; /* antes 10px: muy por debajo de los 13px de las filas */
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-weight: 600;
}
/* Build envuelve tambien los titulos de cabecera en <a href="/edit/"> (rowsEdit
   por defecto true): no son enlaces de verdad, se neutralizan. */
body#adminBody .item_title.data .item a {
    color: var(--text-faint) !important;
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}

body#adminBody .item_row {
    position: relative;
    border: 1px solid var(--border);
    border-top: 0;
    background: var(--surface);
    padding: 0;
    transition: background .1s;
}
body#adminBody .item_row:nth-of-type(2n) { background: var(--surface); }
body#adminBody .item_row:hover,
body#adminBody .item_row:nth-of-type(2n):hover { background: var(--surface-2); }
body#adminBody .item_row:last-of-type { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }

body#adminBody .item_row .item_title.row { margin: 0; align-items: stretch; }

/* Cabecera y filas del listado con la MISMA caja: cada fila es un `.row`
   (margen -12px a cada lado) que envuelve un `.col-md-12` (relleno 12px),
   y la cabecera no; las filas salian 24px mas anchas y sus columnas
   desplazadas respecto a los titulos. Se anulan los dos. */
body#adminBody .item_row { margin-left: 0; margin-right: 0; }
body#adminBody .item_row > .col-md-12 { padding-left: 0; padding-right: 0; }

/* Las celdas del listado no envuelven: reparten el ancho a partes iguales
   (ignorando los col-md-N, que en muchos controladores suman >12 y hacian
   caer "Actions" a otra linea) y truncan con ellipsis. */
body#adminBody .item_title.data,
body#adminBody .item_title.row { flex-wrap: nowrap !important; }
body#adminBody .item_title .item:not(.options) {
    flex: 1 1 0 !important;
    max-width: none !important;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body#adminBody .item_title .item:not(.options) > a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}
body#adminBody .item_title .item.options {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    /* igualado por modules.js al de la celda mas ancha del listado */
    min-width: max(92px, var(--list-options-w, 0px));
}

body#adminBody .item_row .item {
    padding: 12px 14px !important;
    font-size: 13px;
    color: var(--text);
    display: flex;
    align-items: center;
    min-height: 60px;
}
body#adminBody .item_row .item a { color: var(--text) !important; font-weight: 500; }
body#adminBody .item_row:hover .item a { color: var(--accent-2) !important; }
/* celda de imagen: contenedor con alto real para el div .image de fondo */
body#adminBody .item_row .item .image,
body#adminBody .item_title .item .image { border-radius: 6px; }
body#adminBody .item_row .item:has(.image) { padding: 10px 14px !important; }
body#adminBody .item_row .item:has(.image) .image { position: relative; width: 56px; height: 40px; }

body#adminBody .item_row .item.options { justify-content: flex-end; gap: 6px; }
body#adminBody .item_title.data .item.options { justify-content: flex-end; }
body#adminBody .item_row .item.options a,
body#adminBody .item_row .item.options .box_icon,
body#adminBody .item_row .item.options .icon {
    width: 30px; height: 30px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-muted) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
}
body#adminBody .item_row .item.options a:hover,
body#adminBody .item_row .item.options .box_icon:hover,
body#adminBody .item_row .item.options .icon:hover { color: var(--text) !important; border-color: #3a4150; background: var(--surface-3); }
body#adminBody .item_row .item.options .fa-trash:hover,
body#adminBody .item_row .item.options .fa-trash-alt:hover { color: var(--danger) !important; border-color: #6b2f2c; }
body#adminBody .item_row .item.options .fa-pen:hover,
body#adminBody .item_row .item.options .fa-edit:hover,
body#adminBody .item_row .item.options .fa-pencil:hover { color: var(--edit) !important; border-color: #6b5620; }

/* tablas de Bootstrap (`.table`): las pintan a mano algunas pantallas que no
   pasan por Build (Analítica, Demos con IA, Cobertura de traducción en /admin;
   Dominio y Traducciones en /user). Bootstrap 5.1 les fija `color: #212529` y
   bordes #dee2e6, pensados para fondo claro: sobre la piel oscura el texto
   quedaba casi negro sobre casi negro (contraste 1,08:1). Se reescriben sus
   variables en vez de pisar cada celda, así hover/striped siguen funcionando. */
body#adminBody .table {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: var(--text);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.025);
    --bs-table-active-color: var(--text);
    --bs-table-active-bg: var(--surface-3);
    --bs-table-hover-color: var(--text);
    --bs-table-hover-bg: var(--surface-2);
    color: var(--text);
    border-color: var(--border-soft);
    font-size: 13px;
}
body#adminBody .table > :not(:first-child) { border-top: 1px solid var(--border); }
body#adminBody .table > thead th {
    color: var(--text-faint);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom-color: var(--border);
}
body#adminBody .table > tbody th { color: var(--text-muted); font-weight: 500; }
body#adminBody .table > tfoot { color: var(--text-muted); font-weight: 600; }
body#adminBody .table .text-muted { color: var(--text-muted) !important; }
body#adminBody .table a { color: var(--accent-2); }
body#adminBody .table a:hover { color: var(--text); }

body#adminBody .row_form { background: var(--surface-2); border-top: 1px solid var(--border); padding: 4px 0; }
body#adminBody form .icon.close {
    position: absolute; top: 8px; right: 10px;
    width: 26px; height: 26px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 2;
}

/* barra de navegar / buscar */
body#adminBody .navigateBuild,
body#adminBody .item_content > .row:first-child {
    margin: 0 0 14px;
    align-items: center;
}
body#adminBody .item_content form .row { align-items: center; gap: 8px; }
body#adminBody .pagination { gap: 4px; margin: 0; }
body#adminBody .pagination .page-link {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 6px;
    font-size: 12px;
    padding: 5px 10px;
}
body#adminBody .pagination .page-item.active .page-link { background: var(--accent-weak); border-color: #35507f; color: #dbe8ff; }
body#adminBody .pagination .page-item.disabled .page-link { opacity: .4; }

/* --------------------------------------------------------------- formularios -- */

body#adminBody .admin_form { color: var(--text); }
body#adminBody .admin_form .form-label,
body#adminBody .admin_form label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 5px;
}
body#adminBody .admin_form .form-group { margin-bottom: 14px; }

/* Inputs: fondo `--surface-2` (mas claro que la tarjeta) para que el campo se
   lea. Se cubre `type=""` (Form::text sin tipo) y `.form-control` a secas,
   excluyendo botones, selects, ficheros y las labels con clase form-control. */
body#adminBody input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]),
body#adminBody select,
body#adminBody textarea,
body#adminBody .admin_form .form-control:not(label):not(button):not(select):not([type=file]):not([type=checkbox]):not([type=radio]) {
    width: 100%;
    min-height: 38px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 12.5px;
    line-height: 1.4;
    padding: 9px 11px;
    box-shadow: none;
}
body#adminBody input:focus,
body#adminBody select:focus,
body#adminBody textarea:focus,
body#adminBody .form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-weak);
    background: var(--surface-3);
}
body#adminBody input::placeholder,
body#adminBody textarea::placeholder { color: var(--text-faint); }
body#adminBody .admin_form .form-text.text-muted,
body#adminBody .admin_form small.form-text { color: var(--text-faint) !important; font-size: 10.5px; }
/* campo de solo lectura (Form devuelve <div class="form-control">) */
body#adminBody .admin_form > div.form-control,
body#adminBody .element > .form-group > div.form-control { background: var(--surface); color: var(--text-muted); }

/* El conmutador de idioma por campo (es / en) es redundante con las pestañas
   Español/English de arriba (`.lang-all`), que ya cambian todos los campos. Se
   oculta para quitar ruido. */
body#adminBody .admin_form span.lang.select { display: none !important; }

/* Distribucion: los campos que no son a ancho completo crecen a partes iguales
   con un minimo legible, en vez de quedar en columnas estrechas (col-md-2). */
@media (min-width: 768px) {
    body#adminBody .admin_form > .row,
    body#adminBody .admin_form .group_elements,
    body#adminBody .admin_form .lang { row-gap: 6px; column-gap: 4px; }
    body#adminBody .admin_form .element:not([class*="col-md-12"]):not([class*="col-md-9"]):not([class*="col-md-8"]),
    body#adminBody .admin_form .element-lang:not([class*="col-md-12"]):not([class*="col-md-9"]):not([class*="col-md-8"]) {
        flex: 1 1 250px;
        max-width: none;
    }
}
body#adminBody .admin_form .element { margin-bottom: 4px; }

/* <select> nativo: flecha propia */
body#adminBody select:not(.selectpicker) {
    appearance: none;
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="%238a919d" stroke-width="2"><path d="M3 4.5l3 3 3-3"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}
body#adminBody select option { background: var(--surface-2); color: var(--text); }

/* fichero */
body#adminBody .admin_form .file { position: relative; }
body#adminBody input[type=file],
body#adminBody input[type=file].form-control {
    width: 100%;
    min-height: 38px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 12px;
    padding: 7px 8px;
}
body#adminBody input[type=file]::file-selector-button {
    margin-right: 10px;
    padding: 5px 11px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--surface-3);
    color: var(--text);
    font: 600 11.5px var(--font-body);
    cursor: pointer;
}
body#adminBody input[type=file]::file-selector-button:hover { border-color: #3a4150; }

/* checkbox / radio */
body#adminBody input[type=checkbox],
body#adminBody input[type=radio] { accent-color: var(--accent); width: 15px; height: 15px; }
body#adminBody .form-check-label.form-control {
    background: transparent !important; border: 0 !important; padding: 0 0 0 6px !important;
    min-height: 0 !important; color: var(--text) !important; font-weight: 500 !important; width: auto !important;
}

/* -------- bootstrap-select (selectpicker) -------- */
body#adminBody .bootstrap-select { width: 100% !important; }
body#adminBody .bootstrap-select > .dropdown-toggle,
body#adminBody button.btn.dropdown-toggle.btn-light {
    display: flex !important;
    align-items: center;
    width: 100%;
    min-height: 36px;
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 12.5px;
    box-shadow: none !important;
}
body#adminBody .bootstrap-select > .dropdown-toggle:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-weak) !important; outline: none !important; }
body#adminBody .bootstrap-select .filter-option-inner-inner { color: var(--text); }
body#adminBody .bootstrap-select .filter-option-inner-inner:empty::after,
body#adminBody .bootstrap-select .dropdown-toggle .filter-option-inner-inner { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body#adminBody .bootstrap-select .dropdown-menu {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 16px 40px -12px rgba(0,0,0,.55);
}
body#adminBody .bootstrap-select .dropdown-menu li a,
body#adminBody .bootstrap-select .dropdown-menu .dropdown-item { color: var(--text) !important; font-size: 12.5px; padding: 7px 12px; }
body#adminBody .bootstrap-select .dropdown-menu li a:hover,
body#adminBody .bootstrap-select .dropdown-menu li.active a,
body#adminBody .bootstrap-select .dropdown-menu li a.active { background: var(--accent-weak) !important; color: #dbe8ff !important; }
body#adminBody .bootstrap-select .bs-searchbox { padding: 6px; }
body#adminBody .bootstrap-select .bs-searchbox input { min-height: 32px; }
body#adminBody .bootstrap-select .no-results { color: var(--text-faint); font-size: 12px; padding: 8px 12px; }

/* pestañas de idioma del form builder */
body#adminBody .admin_form .nav.nav-pills.nav-tabs {
    border-bottom: 1px solid var(--border);
    gap: 2px;
    margin-bottom: 12px;
}
body#adminBody .admin_form .nav-tabs .nav-link {
    color: var(--text-muted);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 12px;
    cursor: pointer;
}
body#adminBody .admin_form .nav-tabs .nav-link.active {
    color: #dbe8ff;
    border-bottom-color: var(--accent);
}
/* mini-conmutador de idioma junto a cada etiqueta (es / en) */
body#adminBody .admin_form span.lang.select,
body#adminBody .element span.lang.select {
    display: inline-block;
    margin-left: 3px;
    padding: 1px 5px;
    border: 0;
    border-radius: 4px;
    background: var(--surface-2);
    color: var(--text-faint);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    vertical-align: middle;
}
body#adminBody .admin_form span.lang.select.selected,
body#adminBody .element span.lang.select.selected {
    background: var(--accent-weak);
    color: #9cc2ff;
    border-bottom: 0;
}
/* la etiqueta " es en" que Form pinta como texto plano detrás del <label> */
body#adminBody .admin_form label { display: inline-flex; align-items: center; gap: 2px; }

/* ---- bloques repetibles y ordenables (group / group_sortable) ------------ */
body#adminBody .admin_form .group {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px;
    background: var(--surface);
}
body#adminBody .admin_form .group > .col-md-12 > h4 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
body#adminBody .admin_form .group h6 { font-size: 12px; color: var(--text-faint); padding: 8px 2px; }
body#adminBody .admin_form .group_base { display: none; }

/* boton "+" de anadir item */
body#adminBody .admin_form .group_plus {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 12px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 999px;
    background: var(--accent-weak) !important;
    border: 1px solid #35507f !important;
    color: #cfe0ff !important;
    cursor: pointer;
}
body#adminBody .admin_form .group_plus:hover { background: var(--accent) !important; color: #fff !important; }

/* cada item: una tarjeta oscura */
body#adminBody .admin_form .group_sortable { display: flex; flex-direction: column; gap: 8px; }
body#adminBody .admin_form .group_item {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    overflow: hidden;
}
body#adminBody .admin_form .group_item.group_placeholder {
    border: 1px dashed var(--accent);
    background: var(--accent-weak);
    height: 46px;
}
body#adminBody .admin_form .group_item.ui-sortable-helper { box-shadow: 0 18px 40px -12px rgba(0,0,0,.6); }

/* cabecera del item: arrastrar / titulo / borrar en una linea */
body#adminBody .admin_form .group_item .group_header { padding: 0; background: transparent; }
body#adminBody .admin_form .group_header > .row {
    flex-wrap: nowrap;
    align-items: center;
    margin: 0;
}
body#adminBody .admin_form .group_header .box_icon {
    flex: 0 0 auto;
    width: auto !important;
    max-width: none !important;
    padding: 12px 10px;
    color: var(--text-faint);
    font-size: 13px;
    cursor: pointer;
}
body#adminBody .admin_form .group_header .group_move { cursor: grab; }
body#adminBody .admin_form .group_header .group_move:active { cursor: grabbing; }
body#adminBody .admin_form .group_header .group_edit.text-start {
    flex: 1 1 auto;
    width: auto !important;
    max-width: none !important;
    padding: 12px 6px;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body#adminBody .admin_form .group_header .group_edit:hover,
body#adminBody .admin_form .group_header .group_move:hover { color: var(--text); }
body#adminBody .admin_form .group_header .group_remove:hover { color: var(--danger); }
body#adminBody .admin_form .group_header .group_up:hover,
body#adminBody .admin_form .group_header .group_down:hover { color: var(--text); }
body#adminBody .admin_form .group_header .group_up,
body#adminBody .admin_form .group_header .group_down { padding-left: 6px; padding-right: 6px; }
/* sin sitio adonde ir: el primero no sube, el último no baja */
body#adminBody .admin_form .group_sortable > .group_empty + .group_item > .group_header .group_up,
body#adminBody .admin_form .group_sortable > .group_item:last-child > .group_header .group_down { opacity: .25; pointer-events: none; }
body#adminBody .admin_form .group_header .group_move { touch-action: none; }
body#adminBody .admin_form .group_header .group_move:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }

/* group.js: pliega los items mientras se arrastra y resalta el que se movió */
.group_sortable.group_collapsing > .group_item > .group_contents { display: none !important; }
.group_sortable > .group_empty:not(:only-child) { display: none; }
body#adminBody .admin_form .group_item.group_moved { animation: group-moved .9s ease-out; }
@keyframes group-moved {
    from { box-shadow: 0 0 0 2px var(--accent); }
    to   { box-shadow: 0 0 0 2px transparent; }
}

/* contenido desplegable del item */
body#adminBody .admin_form .group_item .group_contents {
    border-top: 1px solid var(--border);
    background: var(--bg);
}
body#adminBody .admin_form .group_elements { padding: 14px !important; background: transparent; }
body#adminBody .admin_form .box_icon { color: var(--text-muted); }

/* -------- Avisos y diálogos (message.js, ADR 0038) --------
   El componente trae colores claros por defecto (los sitios); aquí se pasan a
   la piel oscura. Avisos y diálogos cuelgan del <body>, así que heredan. */
body#adminBody {
    --vs-notify-bg:      var(--surface-2);
    --vs-notify-text:    var(--text);
    --vs-notify-muted:   var(--text-muted);
    --vs-notify-border:  var(--border);
    --vs-notify-accent:  var(--accent);
    --vs-notify-danger:  var(--danger);
    --vs-notify-success: var(--success);
    --vs-notify-warning: var(--edit);
    --vs-notify-info:    var(--accent-2);
    --vs-notify-shadow:  0 16px 40px rgba(0, 0, 0, .5);
}

/* -------- Editor HTML (Jodit) + selector de sección de textarea --------
   Tema oscuro de Jodit (`theme: 'dark'` en textarea.js) con los colores de la
   piel en vez de sus grises (#575757). Las variables --jd-dark-* también las
   leen los popups y diálogos, que Jodit cuelga del <body>. ADR 0036. */
body#adminBody .jodit_theme_dark {
    --jd-dark-background-color:     var(--surface);
    --jd-dark-background-darknes:   var(--bg);
    --jd-dark-background-ligher:    var(--surface-3);
    --jd-dark-toolbar-color:        var(--surface-2);
    --jd-dark-text-color:           var(--text);
    --jd-dark-text-color-opacity80: var(--text-faint);
    --jd-dark-icon-color:           var(--text-muted);
    --jd-dark-border-color:         var(--border);
    --jd-dark-toolbar-seperator-color1: var(--surface-3);
    --jd-dark-toolbar-seperator-color2: var(--border);
    --jd-dark-toolbar-seperator-color3: var(--surface-3);
    --jd-color-border:              var(--border);
}
/* Jodit pinta el hover con el icono del color del fondo: con estos tonos
   desaparecería. */
body#adminBody .jodit_theme_dark .jodit-toolbar-button:hover:not([disabled]),
body#adminBody .jodit_theme_dark .jodit-toolbar-button__button:hover:not([disabled]),
body#adminBody .jodit-toolbar-button_active_true .jodit-toolbar-button__button,
body#adminBody .jodit_theme_dark .jodit-toolbar-button__trigger:hover:not([disabled]) {
    --jd-color-icon: var(--text);
    --jd-color-text: var(--text);
    background-color: var(--accent-weak);
    color: var(--text);
}
/* Los campos de los popups (enlace, imagen…) ya reciben el estilo de input de
   la piel; el envoltorio de Jodit es blanco y cuadrado y asomaría por las
   esquinas redondeadas. */
/* Pestañas de los popups (imagen: URL / Subir): la activa sale en blanco. */
body#adminBody .jodit_theme_dark .jodit-tabs__button {
    background-color: transparent;
    color: var(--text-muted);
}
body#adminBody .jodit_theme_dark .jodit-tabs__button[aria-pressed=true] {
    background-color: var(--accent-weak);
}
body#adminBody .jodit_theme_dark .jodit-tabs__button .jodit-ui-button__text,
body#adminBody .jodit_theme_dark .jodit-tabs__button[aria-pressed=true] .jodit-ui-button__text {
    background-color: transparent;
    color: var(--text);
}
body#adminBody .jodit_theme_dark .jodit-tabs__button svg {
    fill: var(--text-muted);
}
body#adminBody .jodit_theme_dark .jodit-ui-input__wrapper {
    background: transparent;
    border: 0;
}
body#adminBody .jodit_theme_dark .jodit-input,
body#adminBody .jodit_theme_dark .jodit-select,
body#adminBody .jodit_theme_dark .jodit-source__mirror {
    background-color: var(--bg);
    color: var(--text);
}
body#adminBody .jodit-container.jodit {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    overflow: hidden;
}
body#adminBody .formTextArea { position: relative; }
body#adminBody .formTextArea .menu,
body#adminBody .admin_textarea_seccion_menu {
    display: inline-flex;
    gap: 3px;
    padding: 3px !important;
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2) !important;
    position: static !important;
    width: auto !important;
}
/* Las pestañas de sección van dentro de la .row de Form::textarea() pero sin el
   padding de columna (el de arriba lo pisa): sin este margen quedarían 12 px a
   la izquierda del editor, que sí lo tiene. */
body#adminBody .formTextArea .menu {
    margin-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
}
body#adminBody .formTextArea .menu .item,
body#adminBody .admin_textarea_title {
    padding: 5px 12px !important;
    border: 0 !important;
    border-radius: 6px;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text-muted) !important;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
}
body#adminBody .formTextArea .menu .item.select,
body#adminBody .formTextArea .menu .item:hover,
body#adminBody .admin_textarea_title_select {
    background: var(--accent-weak) !important;
    color: #dbe8ff !important;
}

/* --------------------------------------------------------------- alertas -- */

body#adminBody .alert {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-size: 13px;
    padding: 11px 14px;
}
body#adminBody .alert-success { background: #17281f; border-color: #2f5a45; color: #7fd8b8; }
body#adminBody .alert-danger  { background: #2a1917; border-color: #6b2f2c; color: #f0938c; }
body#adminBody .alert-info    { background: #16222f; border-color: #2f4a6b; color: #9cc2ff; }
body#adminBody .alert .btn-close { filter: invert(1) grayscale(1) brightness(1.6); opacity: 0.5; }

/* ------------------------------------------------------------ ayuda lateral -- */

body#adminBody .panel-help,
body#adminBody .sites_help {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 2px solid var(--accent);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 12px;
}

/* -------------------------------------------------------------- dashboard -- */

body#adminBody .dash { display: flex; flex-direction: column; gap: 20px; }
body#adminBody .dash-hello h1 { font-size: 21px; font-weight: 600; }
body#adminBody .dash-hello p { margin: 6px 0 0; font-size: 13px; color: var(--text-muted); }

body#adminBody .dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 18px;
}
@media (max-width: 900px) {
    body#adminBody .dash-grid { grid-template-columns: 1fr; }
}

body#adminBody .dash-frame {
    margin: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #0f1115;
    aspect-ratio: 16 / 10;
}
body#adminBody .dash-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
body#adminBody .dash-frame-empty {
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--text-faint);
    font-size: 12px;
}
body#adminBody .dash-preview-actions { display: flex; gap: 10px; padding: 0 14px 14px; }

body#adminBody .dash-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
body#adminBody .dash-tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 14px 15px;
}
body#adminBody .dash-tile .k { font-size: 11px; color: var(--text-muted); font-weight: 500; }
body#adminBody .dash-tile .v { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin-top: 7px; }

body#adminBody .dash-card-head { display: flex; align-items: center; gap: 10px; }
body#adminBody .dash-card-head span { flex: 1; }
body#adminBody .dash-link { font-size: 12px; font-weight: 600; color: var(--accent-2) !important; }

body#adminBody .dash-sec-list { display: flex; flex-direction: column; }
body#adminBody .dash-sec-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border-soft);
}
body#adminBody .dash-sec-row:last-child { border-bottom: 0; }
body#adminBody .dash-sec-row:hover { background: var(--surface-2); }
body#adminBody .dash-sec-row .ord { font-size: 11px; color: #5b616d; width: 16px; font-variant-numeric: tabular-nums; }
body#adminBody .dash-sec-row .nm { font-size: 13px; font-weight: 500; }
body#adminBody .dash-sec-row .sp { flex: 1; }
body#adminBody .type-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 5px;
    background: var(--accent-weak);
    color: #9cc2ff;
}

body#adminBody .dash-empty { padding: 20px 16px; color: var(--text-faint); font-size: 12.5px; }

body#adminBody .dash-qa-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5b616d;
}
body#adminBody .dash-qa {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 900px) {
    body#adminBody .dash-qa { grid-template-columns: 1fr 1fr; }
}
body#adminBody .dash-qa-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 15px;
    text-decoration: none;
}
body#adminBody .dash-qa-card:hover { border-color: #3a4150; background: var(--surface-2); }
body#adminBody .dash-qa-card .qt { font-size: 13px; font-weight: 600; color: var(--text) !important; }
body#adminBody .dash-qa-card .qs { font-size: 11px; color: var(--text-faint); }

/* ------------------------------------------------- layout modal (iframe) -- */

body#adminBody.panel-modal { background: #14161b; min-height: 100vh; }
body#adminBody.panel-modal .panel-modal-wrap { min-height: 100vh; }
body#adminBody.panel-modal .panel-content { padding: 18px 20px 40px; max-width: 860px; margin: 0 auto; }
body#adminBody.panel-modal .button_float { position: static; width: auto; height: auto; border-radius: var(--radius-sm); box-shadow: none; }

/* iconos SVG en línea (common\library\general\Icon), p.ej. la vista previa de
   redes sociales en Configuración */
body#adminBody .vs-icon {
    width: 1.15em;
    height: 1.15em;
    display: inline-block;
    vertical-align: -0.2em;
    fill: none;
    stroke: currentColor;
}

/* --------------------------------------------------------------- responsive -- */

/* Boton hamburguesa del topbar: solo existe para abrir el sidebar en movil,
   asi que en escritorio no ocupa hueco. */
body#adminBody .sidebar-toggle { display: none; }

@media (max-width: 900px) {
    body#adminBody .sidebar-toggle { display: inline-flex; }

    /*
     * Sidebar fuera de pantalla por defecto en movil, con `transform` (no
     * `margin-left`): asi no compite con `#sidebar.active` de arriba, que
     * en escritorio colapsa el sidebar a una barra de iconos de 74px. En
     * movil `.active` no significa nada -- el estado abierto/cerrado va en
     * `.mobile-open`, aplicado por un boton propio en el topbar (el toggle
     * viejo, `#sidebarCollapse`, vive DENTRO del propio sidebar: en movil,
     * con el sidebar oculto, no hay forma de pulsarlo para abrirlo).
     *
     * `margin-left: 0 !important` es obligatorio aqui, no cosmetico: hay un
     * `#sidebar { margin-left: -80px !important; }` heredado del template
     * Bootstrap original del admin (`general/menu.css`, importado desde
     * `style.css`, propio breakpoint a 768px -- ver el comentario al principio
     * de ese fichero). Como actua sobre `margin-left` y esta regla actua sobre
     * `transform`, las dos se aplican A LA VEZ en vez de competir por la misma
     * propiedad: el sidebar queda corrido 80px de mas en cualquier telefono de
     * hasta 768px de ancho, con o sin `.mobile-open`. Sin el `!important` de
     * aqui no hay forma de ganarle: es `!important` contra `!important`, y ahi
     * decide la especificidad -body#adminBody #sidebar le gana a #sidebar a
     * secas- pero solo si esta regla TAMBIEN lleva `!important`.
     */
    body#adminBody #sidebar {
        position: fixed;
        z-index: 60;
        top: 0;
        left: 0;
        margin-left: 0 !important;
        height: 100%;
        min-width: 262px;
        max-width: 262px;
        transform: translateX(-100%);
        transition: transform .25s ease;
    }
    body#adminBody #sidebar.active,
    body#adminBody #sidebar.mobile-open {
        min-width: 262px;
        max-width: 262px;
    }
    /*
     * `!important`: comprobado en el navegador que, sin el, esta regla -pese a
     * tener mas especificidad que la de arriba (2 ids + 1 clase contra 2 ids)-
     * no le gana el `transform` a `body#adminBody #sidebar`. No se ha podido
     * aislar la causa exacta; `!important` resuelve el sintoma de forma
     * robusta y es coherente con el resto de este bloque, que ya necesita
     * `!important` para el `margin-left` de la regla heredada de
     * `general/menu.css`.
     */
    body#adminBody #sidebar.mobile-open { transform: translateX(0) !important; }
    /* El colapso a icono-only de escritorio no aplica en movil: si quedo
       activo de una sesion anterior en pantalla ancha, aqui se ignora. */
    body#adminBody #sidebar.active .brand-name,
    body#adminBody #sidebar.active .panel-switcher .meta,
    body#adminBody #sidebar.active .grp-label span,
    body#adminBody #sidebar.active ul li a span {
        display: block;
    }

    body#adminBody #sidebarBackdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(10, 11, 14, 0.6);
        z-index: 55;
    }
    body#adminBody #sidebarBackdrop.show { display: block; }

    body#adminBody .panel-content { padding: 18px; }
    body#adminBody .panel-topbar { padding: 0 16px; gap: 10px; }
    /* Ayuda: solo el icono en movil, la barra ya va justa (ADR 0038). */
    body#adminBody .panel-topbar .btn-panel.is-help .lbl,
    body#adminBody .panel-topbar .btn-panel.is-revisions .lbl { display: none; }

    /*
     * Las filas de un listado (Build::view) fuerzan `flex-wrap: nowrap` con
     * reparto igual + elipsis (ver el comentario de mas arriba, hallazgo del
     * 26/08/2026): en escritorio evita que "Actions" caiga a otra linea
     * cuando los col-md-N de un controlador suman mas de 12. En un telefono
     * eso deja columnas de ~90px con el texto truncado hasta ser ilegible
     * (comprobado en /admin/users: NAME/USER/EMAIL en 3-4 letras y puntos
     * suspensivos). Aqui se deja apilar: cada celda ocupa toda la fila -sin
     * cabecera repetida, que no aporta una vez apilado- y las acciones
     * (editar/borrar) quedan alineadas a la izquierda, identificables por
     * icono.
     */
    body#adminBody .item_title.data,
    body#adminBody .item_title.row {
        flex-wrap: wrap !important;
    }
    /* En movil no hay columnas: la cabecera se quedaba en un "ACCIONES" suelto
       sobre filas apiladas. Fuera entera; la primera fila recoge su borde. */
    body#adminBody .item_title.data {
        display: none !important;
    }
    body#adminBody .item_title.data + .item_row {
        border-top: 1px solid var(--border);
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    }
    body#adminBody .item_title.data + .item_row:last-of-type { border-radius: var(--radius-sm); }
    body#adminBody .item_title.row .item:not(.options) {
        flex: 1 1 100% !important;
        white-space: normal;
        min-height: auto;
    }
    body#adminBody .item_title.row .item.options {
        flex: 1 1 100% !important;
        justify-content: flex-start;
        min-height: auto;
        padding-top: 2px !important;
    }
}

/* ---- Facturación (/user/billing-subscription) ----------------------------
   Planes en columnas iguales, datos de la suscripción como fichas y estado
   como etiqueta de color, en vez de un párrafo "Plan: … / Estado: …". */
body#adminBody .bill-head { display: flex; align-items: center; gap: 10px; }
body#adminBody .bill-head span:first-child { flex: 1; }

body#adminBody .bill-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
    background: var(--accent-weak);
    color: #9cc2ff;
}
body#adminBody .bill-badge.is-ok      { background: rgba(67, 197, 158, 0.14); color: var(--success); }
body#adminBody .bill-badge.is-pending { background: var(--edit-weak); color: var(--edit); }
body#adminBody .bill-badge.is-problem { background: rgba(242, 102, 94, 0.14); color: var(--danger); }

body#adminBody .bill-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
body#adminBody .bill-fact {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 13px 15px;
}
body#adminBody .bill-fact .k { font-size: 11px; color: var(--text-muted); font-weight: 500; }
body#adminBody .bill-fact .v { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin-top: 6px; color: var(--text); }
body#adminBody .bill-fact .s { font-size: 12px; color: var(--text-faint); margin-top: 3px; }

body#adminBody .bill-note { font-size: 13px; color: var(--text-muted); margin: 0 0 16px; }
body#adminBody .bill-note.is-problem { color: var(--danger); }

body#adminBody .bill-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
body#adminBody .bill-actions form { margin: 0; }

body#adminBody .bill-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
body#adminBody .bill-plan {
    display: flex;
    flex-direction: column;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 20px;
}
body#adminBody .bill-plan-name { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
body#adminBody .bill-plan-price { font-family: var(--font-display); font-size: 26px; font-weight: 600; margin-top: 8px; color: var(--text); }
body#adminBody .bill-plan-trial { font-size: 12px; color: var(--success); margin-top: 4px; }
body#adminBody .bill-plan form { margin-top: auto; padding-top: 16px; }
body#adminBody .bill-plan .btn-panel { width: 100%; justify-content: center; }

/* ---- Mis sitios (/user/sites, tarea 0138) ---------------------------------
   Sin sitios: bienvenida con los tres pasos (plan → configurar → publicar) y
   un solo botón. Con sitios: una franja "crear otro" y la lista en tarjetas. */
body#adminBody .sites-welcome {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 32px;
    background: linear-gradient(160deg, var(--surface-2), var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
body#adminBody .sites-welcome-head h1 { font-size: 26px; font-weight: 600; }
body#adminBody .sites-welcome-head p { margin: 8px 0 0; font-size: 14px; color: var(--text-muted); }

body#adminBody .sites-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
body#adminBody .sites-step {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 18px;
}
body#adminBody .sites-step .n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-weak);
    color: var(--accent-2);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
}
body#adminBody .sites-step .t { font-size: 14px; font-weight: 600; margin-top: 12px; color: var(--text); }
body#adminBody .sites-step .d { font-size: 12.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }

body#adminBody .sites-welcome-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0; }
body#adminBody .sites-welcome-cta .btn-panel { min-height: 46px; padding: 0 28px; font-size: 14px; }
body#adminBody .sites-hint { font-size: 12px; color: var(--text-faint); }

body#adminBody .sites-more {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
body#adminBody .sites-more-text { flex: 1; }
body#adminBody .sites-more-text .t { font-size: 14px; font-weight: 600; color: var(--text); }
body#adminBody .sites-more-text .d { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
body#adminBody .sites-more form { margin: 0; }

body#adminBody .sites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}
body#adminBody .sites-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
body#adminBody .sites-card-img {
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
body#adminBody .sites-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
body#adminBody .sites-card-img span { font-family: var(--font-display); font-size: 34px; font-weight: 600; color: var(--text-faint); }
body#adminBody .sites-card-body { padding: 14px 16px 0; flex: 1; }
body#adminBody .sites-card-head { display: flex; align-items: center; gap: 8px; }
body#adminBody .sites-card-head .nm { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body#adminBody .sites-card-url { display: block; margin-top: 4px; font-size: 12px; color: var(--accent-2) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body#adminBody .sites-card-actions { padding: 14px 16px 16px; }
body#adminBody .sites-card-actions .btn-panel { width: 100%; }

@media (max-width: 768px) {
    body#adminBody .sites-welcome { padding: 20px; }
    body#adminBody .sites-steps { grid-template-columns: 1fr; }
    body#adminBody .sites-more { flex-direction: column; align-items: stretch; }
    body#adminBody .sites-more .btn-panel { width: 100%; }
}

/* ---------- Historial de cambios y papelera (ADR 0040) ---------- */
body#adminBody .revisions-empty { color: var(--text-muted); margin: 0; }
body#adminBody .revisions-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
body#adminBody .revision-item { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); padding: 12px 14px; }
body#adminBody .revision-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
body#adminBody .revision-head form { margin: 0; }
body#adminBody .revision-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
body#adminBody .revision-date { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
body#adminBody .revision-action { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--accent-weak); color: var(--accent); }
body#adminBody .revision-action.is-restore { background: var(--edit-weak); color: var(--edit); }
body#adminBody .revision-action.is-delete { background: rgba(242, 102, 94, 0.14); color: var(--danger); }
body#adminBody .revision-record { color: var(--text); overflow-wrap: anywhere; }
body#adminBody .revision-author { color: var(--text-muted); font-size: 13px; }
body#adminBody .revision-diff { margin-top: 10px; }
body#adminBody .revision-diff summary { cursor: pointer; color: var(--text-muted); font-size: 13px; }
body#adminBody .revision-diff summary:hover { color: var(--text); }
body#adminBody .revision-table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
body#adminBody .revision-table th,
body#adminBody .revision-table td { border-top: 1px solid var(--border-soft); padding: 8px 10px 8px 0; vertical-align: top; text-align: left; white-space: pre-line; overflow-wrap: anywhere; }
body#adminBody .revision-table thead th { color: var(--text-faint); font-weight: 500; border-top: 0; }
body#adminBody .revision-table tbody th { color: var(--text-muted); font-weight: 500; width: 22%; }
@media (max-width: 600px) {
    body#adminBody .revision-table tbody th { width: 30%; }
}
/* Filas de la tarjeta "Visitas" del Inicio (Umami, ADR 0042). */
body#adminBody .dash-stat-row { display: flex; gap: 10px; align-items: baseline; font-size: 13px; margin-top: 8px; }
body#adminBody .dash-stat-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
body#adminBody .dash-stat-row .ct { font-variant-numeric: tabular-nums; color: var(--text-muted); font-weight: 600; }