/* ============================================================
   APULOGIC ROOT — Panel de Superadministrador
   Tema: morado/oscuro independiente del tema de empresa
   ============================================================ */

:root {
    --root:      #7c4dff;
    --root-dk:   #5e35d4;
    --success:   #2dbe6c;
    --danger:    #e05353;
    --warning:   #f5a623;
    --radius:    10px;
    --radius-sm: 6px;
    --font:      system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Tema oscuro (default panel root) */
:root,
[data-theme="dark"] {
    --bg:        #0d0f18;
    --bg2:       #161926;
    --bg3:       #1e2235;
    --border:    #2a2f4a;
    --text:      #e8eaf0;
    --text2:     #8891b0;
    --shadow:    0 4px 24px rgba(0,0,0,.55);
    color-scheme: dark;
}

/* Tema claro (panel root) */
[data-theme="light"] {
    --bg:        #f4f6fa;
    --bg2:       #ffffff;
    --bg3:       #eef1f7;
    --border:    #d8dde8;
    --text:      #1a1f2e;
    --text2:     #5a6580;
    --shadow:    0 4px 18px rgba(20,30,60,.12);
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; line-height: 1.5; }
a { color: var(--root); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; max-width: 100%; }
input, button, select, textarea { font: inherit; }

/* ── Root Navbar ─────────────────────────────────────────── */
.root-navbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0 1.5rem;
    height:          56px;
    background:      var(--bg2);
    border-bottom:   1px solid var(--border);
    position:        sticky;
    top:             0;
    z-index:         100;
}
.root-navbar-brand {
    display:     flex;
    align-items: center;
    gap:         .6rem;
    font-size:   1.05rem;
    font-weight: 800;
    color:       var(--root);
    letter-spacing: .02em;
}
.root-badge {
    background:    var(--root);
    color:         #fff;
    font-size:     .65rem;
    font-weight:   700;
    padding:       2px 7px;
    border-radius: 20px;
    letter-spacing: .05em;
}
.root-navbar-links { display: flex; gap: 1.25rem; }
.root-navbar-links a {
    color:       var(--text2);
    font-size:   .875rem;
    transition:  color .15s;
    text-decoration: none;
}
.root-navbar-links a:hover,
.root-navbar-links a.active { color: var(--text); }

.root-navbar-user { display: flex; align-items: center; gap: .75rem; font-size: .875rem; }

.btn-logout-root {
    padding:       4px 12px;
    background:    var(--bg3);
    border:        1px solid var(--border);
    border-radius: var(--radius-sm);
    color:         var(--text2);
    cursor:        pointer;
    text-decoration: none;
    font-size:     .82rem;
    transition:    all .15s;
}
.btn-logout-root:hover { background: var(--danger); color: #fff; border-color: var(--danger); text-decoration: none; }

/* ── Root Main ───────────────────────────────────────────── */
.root-main { padding: 1.75rem 2rem; max-width: 1100px; margin: 0 auto; }

/* ── Login page ──────────────────────────────────────────── */
.root-login-body {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      100vh;
    background:      radial-gradient(ellipse at 50% 20%, #1a0d3a 0%, var(--bg) 70%);
}
.root-login-card {
    background:    var(--bg2);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       2.5rem 2rem;
    width:         100%;
    max-width:     400px;
    box-shadow:    var(--shadow);
}
.root-login-card--wide { max-width: 520px; }

.root-login-header { text-align: center; margin-bottom: 2rem; }
.root-login-icon   { font-size: 2.8rem; margin-bottom: .5rem; }
.root-login-header h1 { font-size: 1.5rem; color: var(--root); }
.root-login-header p  { color: var(--text2); font-size: .9rem; margin-top: .3rem; }

.root-login-footer { text-align: center; margin-top: 1.5rem; font-size: .875rem; color: var(--text2); }
.root-login-footer a { color: var(--text2); }
.root-login-footer a:hover { color: var(--root); }

/* ── Forms ───────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.form-group label { font-size: .82rem; color: var(--text2); font-weight: 600; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="color"],
select, textarea {
    background:    var(--bg3);
    border:        1px solid var(--border);
    border-radius: var(--radius-sm);
    color:         var(--text);
    padding:       .5rem .75rem;
    width:         100%;
    transition:    border-color .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--root); }

.input-password-wrap { position: relative; }
.input-password-wrap input { padding-right: 2.5rem; }
.btn-eye {
    position:   absolute;
    right:      .5rem; top: 50%;
    transform:  translateY(-50%);
    background: none;
    border:     none;
    cursor:     pointer;
    font-size:  1rem;
    color:      var(--text2);
    padding:    .2rem;
    line-height: 1;
}
.btn-eye:hover { color: var(--text); }

.alert-error {
    background:    rgba(224,83,83,.15);
    border:        1px solid var(--danger);
    border-radius: var(--radius-sm);
    color:         #ff8a8a;
    padding:       .6rem .9rem;
    font-size:     .875rem;
    margin-bottom: .75rem;
}
.alert-success {
    background:    rgba(45,190,108,.15);
    border:        1px solid var(--success);
    border-radius: var(--radius-sm);
    color:         #6fe6a0;
    padding:       .6rem .9rem;
    font-size:     .875rem;
    margin-bottom: .75rem;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
    display:       inline-flex;
    align-items:   center;
    gap:           .35rem;
    padding:       .45rem 1rem;
    border:        none;
    border-radius: var(--radius-sm);
    cursor:        pointer;
    font-weight:   600;
    font-size:     .875rem;
    transition:    all .15s;
    white-space:   nowrap;
    text-decoration: none;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-root     { background: var(--root); color: #fff; }
.btn-root:hover { background: var(--root-dk); }
.btn-primary  { background: var(--root); color: #fff; }
.btn-primary:hover { background: var(--root-dk); }
.btn-secondary{ background: var(--bg3); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: #2a2f4a; }
.btn-danger   { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #c43f3f; }
.btn-success  { background: var(--success); color: #fff; }
.btn-success:hover { background: #22a05b; }
.btn-warning  { background: var(--warning); color: #111; }
.btn-block    { width: 100%; justify-content: center; }
.btn-sm { padding: .3rem .75rem; font-size: .8rem; }
.btn-xs { padding: .2rem .55rem; font-size: .75rem; border-radius: 4px; }
.btn-lg { padding: .65rem 1.25rem; font-size: 1rem; }

.btn-close {
    background: none; border: none; color: var(--text2);
    cursor: pointer; font-size: 1.2rem; line-height: 1;
    padding: .25rem .4rem; border-radius: var(--radius-sm); transition: color .15s;
}
.btn-close:hover { color: var(--danger); }

/* ── Page header ─────────────────────────────────────────── */
.root-page-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    margin-bottom:   1.75rem;
    flex-wrap:       wrap;
}
.root-page-title { font-size: 1.5rem; font-weight: 800; }

/* ── Stats grid ──────────────────────────────────────────── */
.root-stats-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap:                   1rem;
    margin-bottom:         1.75rem;
}
.root-stat-card {
    background:    var(--bg2);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       1.1rem 1.25rem;
    display:       flex;
    flex-direction:column;
    gap:           .35rem;
}
.root-stat-card--highlight { border-color: var(--root); }
.root-stat-label { font-size: .72rem; color: var(--text2); text-transform: uppercase; letter-spacing: .05em; }
.root-stat-val   { font-size: 1.75rem; font-weight: 800; color: var(--root); }
.root-stat-card--ok   .root-stat-val { color: var(--success); }
.root-stat-card--warn .root-stat-val { color: var(--warning); }

/* ── Empresa cards grid ──────────────────────────────────── */
/* empresa-grid = alias to support view's class name */
.empresa-grid,
.empresa-cards-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap:                   1.25rem;
}

.empresa-card {
    background:    var(--bg2);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    overflow:      hidden;
    transition:    border-color .15s, box-shadow .15s;
    display:       flex;
    flex-direction:column;
}
.empresa-card:hover { border-color: var(--root); box-shadow: 0 4px 16px rgba(124,77,255,.15); }
/* Both naming conventions supported (gender variants) */
.empresa-card--pausado,  .empresa-card--pausada   { opacity: .65; }
.empresa-card--eliminado,.empresa-card--eliminada  { opacity: .4;  }

/* ── Card header: logo + name + status badge ── */
.empresa-card-header {
    display:        flex;
    align-items:    center;
    gap:            .75rem;
    padding:        .85rem 1rem;
    background:     var(--bg3);
    border-bottom:  3px solid var(--root);
    flex-shrink:    0;
}
/* Logo image inside card header */
.empresa-card-header .empresa-logo {
    width:          52px;
    height:         52px;
    object-fit:     contain;
    border-radius:  8px;
    background:     var(--bg2);
    flex-shrink:    0;
    border:         1px solid var(--border);
    padding:        3px;
}
.empresa-logo-placeholder {
    width:          52px; height: 52px;
    border-radius:  8px;
    background:     var(--root);
    display:        flex;
    align-items:    center;
    justify-content:center;
    color:          #fff;
    font-size:      1.35rem;
    font-weight:    700;
    flex-shrink:    0;
}

/* Info block (name + type badge) */
.empresa-card-info { flex: 1; min-width: 0; }
.empresa-card-info h3 {
    font-size:   .95rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.empresa-card-body {
    padding:        .85rem 1rem;
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            .4rem;
}

/* Detail rows inside card body */
.empresa-detail {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             .5rem;
    font-size:       .8rem;
    color:           var(--text2);
}
.empresa-detail span:first-child { font-weight: 600; color: var(--text); white-space: nowrap; }
.empresa-detail code {
    font-size:     .75rem;
    background:    var(--bg);
    padding:       1px 6px;
    border-radius: 4px;
    color:         var(--root);
    word-break:    break-all;
}

/* Color swatch in card body */
.color-swatch {
    display:        inline-flex;
    align-items:    center;
    gap:            .4rem;
    padding:        2px 8px;
    border-radius:  20px;
    border:         1px solid rgba(255,255,255,.1);
    font-size:      .75rem;
    font-weight:    600;
    font-family:    monospace;
    color:          var(--text);
}

/* Type badges */
.empresa-tipo-badge {
    font-size:     .68rem;
    font-weight:   700;
    padding:       2px 8px;
    border-radius: 20px;
    display:       inline-block;
}
.empresa-tipo-badge--sauna,  .tipo-sauna  { background: rgba(79,142,247,.15); color: #7eb8f7; }
.empresa-tipo-badge--tienda, .tipo-tienda { background: rgba(45,190,108,.15); color: #6fe6a0; }

/* Status badges */
.empresa-estado-badge {
    font-size:     .68rem;
    font-weight:   700;
    padding:       2px 8px;
    border-radius: 20px;
    white-space:   nowrap;
    margin-left:   auto;
    flex-shrink:   0;
}
.empresa-estado-badge--activo,   .estado-activo   { background: rgba(45,190,108,.15);  color: var(--success); }
.empresa-estado-badge--pausado,  .estado-pausado  { background: rgba(245,166,35,.15);  color: var(--warning); }
.empresa-estado-badge--eliminado,.estado-eliminado{ background: rgba(224,83,83,.12);   color: var(--danger);  }

.empresa-color-swatch {
    width:         12px; height: 12px;
    border-radius: 50%;
    border:        1px solid rgba(255,255,255,.2);
    flex-shrink:   0;
}

.empresa-card-footer {
    display:       flex;
    gap:           .4rem;
    padding:       .7rem 1rem;
    border-top:    1px solid var(--border);
    background:    var(--bg3);
    flex-wrap:     wrap;
}

/* ── Root table ──────────────────────────────────────────── */
.root-table-wrap { overflow-x: auto; }
.root-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       .875rem;
}
.root-table th {
    text-align:    left;
    padding:       .65rem .9rem;
    background:    var(--bg3);
    border-bottom: 2px solid var(--border);
    font-size:     .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color:         var(--text2);
    white-space:   nowrap;
}
.root-table td {
    padding:       .6rem .9rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.root-table tr:last-child td { border-bottom: none; }
.root-table tr:hover td { background: rgba(255,255,255,.02); }

.td-username { font-weight: 600; font-family: monospace; font-size: .9rem; }
.td-fecha    { color: var(--text2); font-size: .8rem; white-space: nowrap; }
.td-actions  { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.th-actions  { text-align: right; }

.rol-badge {
    display:       inline-block;
    padding:       2px 9px;
    border-radius: 20px;
    font-size:     .72rem;
    font-weight:   700;
}
.rol-superadmin { background: rgba(245,166,35,.15); color: var(--warning); }
.rol-gestor     { background: rgba(79,142,247,.15); color: #7eb8f7; }
.rol-cliente    { background: rgba(45,190,108,.15); color: var(--success); }

.estado-dot {
    display:       inline-flex;
    align-items:   center;
    gap:           .35rem;
    font-size:     .8rem;
}
.estado-dot::before {
    content:       '';
    width:         8px; height: 8px;
    border-radius: 50%;
    background:    var(--text2);
    flex-shrink:   0;
}
.estado-dot.activo::before   { background: var(--success); }
.estado-dot.inactivo::before { background: var(--danger); }

/* ── Modals ──────────────────────────────────────────────── */
.modal {
    position:  fixed; inset: 0;
    z-index:   1000;
    display:   flex;
    align-items:     center;
    justify-content: center;
    padding:   1rem;
}
.modal[hidden] { display: none; }

.modal-overlay {
    position:   absolute; inset: 0;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(3px);
}
.modal-box {
    position:      relative;
    background:    var(--bg2);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    box-shadow:    var(--shadow);
    max-height:    92vh;
    overflow-y:    auto;
    z-index:       1;
    width:         100%;
}
.modal-sm  { max-width: 440px; }
.modal-md  { max-width: 600px; }
.modal-lg  { max-width: 780px; }

.modal-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1rem 1.25rem;
    border-bottom:   1px solid var(--border);
    position:        sticky;
    top:             0;
    background:      var(--bg2);
    z-index:         2;
}
.modal-header h2 { font-size: 1.1rem; }
.modal-body { padding: 1.25rem; }

/* ── Filter bar ──────────────────────────────────────────── */
.filter-bar {
    display:       flex;
    gap:           .65rem;
    flex-wrap:     wrap;
    align-items:   center;
    margin-bottom: 1.25rem;
}
.filter-bar select {
    background:    var(--bg2);
    border:        1px solid var(--border);
    color:         var(--text);
    padding:       .4rem .75rem;
    border-radius: var(--radius-sm);
    font-size:     .875rem;
}
.input-search {
    padding:       .4rem .75rem;
    background:    var(--bg2);
    border:        1px solid var(--border);
    border-radius: var(--radius-sm);
    color:         var(--text);
    font-size:     .875rem;
    flex:          1;
    min-width:     180px;
}
.input-search:focus { outline: none; border-color: var(--root); }

/* ── Form hint ───────────────────────────────────────────── */
.form-hint { color: var(--text2); font-size: .82rem; margin-bottom: .75rem; }
.text-muted { color: var(--text2); font-size: .875rem; }

/* ── 2FA setup styles (reused from app.css) ──────────────── */
.twofa-steps { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.25rem; }
.twofa-step {
    display:       flex;
    align-items:   flex-start;
    gap:           .75rem;
    background:    var(--bg3);
    border-radius: var(--radius-sm);
    padding:       .75rem 1rem;
    font-size:     .875rem;
}
.twofa-step-num {
    width: 24px; height: 24px;
    background: var(--root); color: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700; flex-shrink: 0;
}
.twofa-qr-section { display: flex; gap: 1.5rem; align-items: flex-start; margin: 1.25rem 0; flex-wrap: wrap; }
.twofa-qr-canvas  { flex-shrink: 0; background: #fff; padding: 6px; border-radius: 8px; }
.twofa-secret-wrap { flex: 1; display: flex; flex-direction: column; gap: .5rem; min-width: 200px; }
.twofa-secret-wrap label { font-size: .8rem; color: var(--text2); }
.twofa-secret-box {
    display: flex; align-items: center; gap: .5rem;
    background: var(--bg3); border-radius: var(--radius-sm); padding: .5rem .75rem; flex-wrap: wrap;
}
.twofa-secret-box code { font-family: monospace; font-size: .95rem; letter-spacing: .08em; word-break: break-all; }
.twofa-activo-badge {
    background:    rgba(45,190,108,.1);
    border:        1px solid var(--success);
    border-radius: var(--radius-sm);
    padding:       1rem 1.25rem;
    color:         var(--success);
    font-size:     .9rem;
    text-align:    center;
    margin:        1rem 0;
}

/* ── Input OTP ───────────────────────────────────────────── */
.input-otp {
    letter-spacing: .35em; text-align: center;
    font-size: 1.5rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── Confirm-delete modal ────────────────────────────────── */
.delete-confirm-name {
    font-weight:   700;
    color:         var(--danger);
    margin-bottom: .75rem;
    font-size:     .9rem;
}

/* ── Color picker preview ────────────────────────────────── */
input[type="color"] {
    padding:    2px;
    height:     36px;
    width:      60px;
    cursor:     pointer;
}

/* ══════════════════════════════════════════════════════════
   MÓDULO TEMAS LOGIN — estilos del panel root
   Para quitar: eliminar este bloque.
   ══════════════════════════════════════════════════════════ */

/* Badge de tema en la card de empresa */
.login-theme-badge {
    font-size:     .72rem;
    font-weight:   700;
    padding:       2px 9px;
    border-radius: 20px;
    white-space:   nowrap;
}
.login-theme-badge--default { background: rgba(136,145,176,.12); color: var(--text2); }
.login-theme-badge--sauna   { background: rgba(245,166,35,.15);  color: #f5c07a; }
.login-theme-badge--dress   { background: rgba(220,80,150,.15);  color: #ff88b5; }

/* Fila del tema dentro del cuerpo de la card */
.empresa-detail--theme { align-items: center; }

/* Grid de opciones de tema en el modal */
.theme-options-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   .75rem;
    margin-bottom:         1rem;
}
.theme-option {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .35rem;
    padding:        .75rem .5rem;
    border:         2px solid var(--border);
    border-radius:  var(--radius);
    cursor:         pointer;
    transition:     border-color .15s, background .15s;
    background:     var(--bg3);
    text-align:     center;
}
.theme-option:hover { border-color: var(--root); }
.theme-option--selected {
    border-color: var(--root);
    background:   rgba(124,77,255,.12);
}
.theme-option-preview {
    width:         56px;
    height:        56px;
    border-radius: var(--radius-sm);
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     1.6rem;
}
.theme-preview-default { background: var(--bg);   border: 1px solid var(--border); }
.theme-preview-sauna   { background: #2a1810; }
.theme-preview-dress   { background: #1a0015; }

.theme-option-lbl { font-size: .82rem; font-weight: 700; color: var(--text); }
.theme-option-sub { font-size: .72rem; color: var(--text2); }

/* Alias para modales root (root-modal / root-modal-box etc.) */
.root-modal {
    position:  fixed; inset: 0; z-index: 1000;
    display:   flex; align-items: center; justify-content: center; padding: 1rem;
}
.root-modal[hidden] { display: none; }
.root-modal-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.72); backdrop-filter: blur(3px);
}
.root-modal-box {
    position: relative; background: var(--bg2);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); max-height: 92vh; overflow-y: auto;
    z-index: 1; width: 100%;
}
.root-modal-sm  { max-width: 440px; }
.root-modal-md  { max-width: 620px; }
.root-modal-lg  { max-width: 800px; }
.root-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
    position: sticky; top: 0; background: var(--bg2); z-index: 2;
}
.root-modal-header h2 { font-size: 1.1rem; }
.root-modal-body   { padding: 1.25rem; }
.root-modal-footer {
    display: flex; gap: .5rem; justify-content: flex-end;
    padding: .85rem 1.25rem; border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

/* Alias de formulario root en modal */
.root-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1.25rem 1.25rem 0; }

/* Preview de imagen */
.img-preview-wrap { margin-top: .5rem; }
.img-preview { max-width: 120px; border-radius: var(--radius-sm); border: 1px solid var(--border); }

/* Color picker inline */
.color-picker-wrap { display: flex; align-items: center; gap: .6rem; }

/* Confirmación eliminación */
.elim-confirm-input { width: 100%; margin-top: .5rem; }

/* ══════════════════════════════════════ FIN MÓDULO TEMAS ══ */

/* ════════════════════════════════════════════════════════════
   THEME TOGGLE en navbar root
   ════════════════════════════════════════════════════════════ */
.theme-toggle {
    background:    var(--bg3);
    border:        1px solid var(--border);
    color:         var(--text);
    width:         34px;
    height:        34px;
    border-radius: 50%;
    cursor:        pointer;
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    font-size:     .98rem;
    line-height:   1;
    padding:       0;
    transition:    transform .25s cubic-bezier(.4,0,.2,1),
                   background .15s, border-color .15s;
}
.theme-toggle:hover {
    background:    var(--bg2);
    border-color:  var(--root);
    transform:     rotate(20deg);
}
.theme-toggle:active { transform: rotate(180deg); }

/* Tweaks tema light en panel root */
[data-theme="light"] .root-navbar { background: rgba(255,255,255,.95); }
[data-theme="light"] .empresa-card,
[data-theme="light"] .root-stat-card,
[data-theme="light"] .modal-box,
[data-theme="light"] .root-modal-box,
[data-theme="light"] .root-login-card { box-shadow: 0 1px 4px rgba(20,30,60,.08); }
[data-theme="light"] .root-login-body {
    background: radial-gradient(ellipse at 50% 25%, #ddd5fa 0%, #f4f6fa 70%);
}
[data-theme="light"] .empresa-card-header { background: var(--bg3); border-bottom-color: var(--root); }

/* Ajustar botón salir para que respete el tema */
[data-theme="light"] .root-btn-logout {
    background: var(--bg3); color: var(--text); border-color: var(--border);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
    .root-main { padding: 1rem; }
    .empresa-cards-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .modal { padding: .5rem; align-items: flex-end; }
    .modal-box { border-radius: var(--radius) var(--radius) 0 0; max-width: 100% !important; max-height: 96vh; }
    .root-navbar { padding: 0 .75rem; }
    .root-navbar-links { gap: .75rem; }
}