/* ============================================================================
   XtraPanel — sistema de estilos
   ----------------------------------------------------------------------------
   Paleta oficial
     Granate oscuro  #4B0017  rgba(75, 0, 23)
     Rojo            #B50220  rgba(181, 2, 32)
     Crema           #E9E0CF  rgba(233, 224, 207)
     Blanco roto     #EAEAE8  rgba(234, 234, 232)
     Gris            #454140  rgba(69, 65, 64)

   Regla: fuera de este bloque :root/.theme-dark no debe haber hex sueltos.
   Los tonos de superficie (fondos claros) y los estados se derivan de la
   paleta con pequeñas mezclas para conseguir jerarquía y contraste AA.
   ========================================================================== */

:root{
	/* --- Colores base --- */
	--c-granate:     #4B0017;
	--c-rojo:        #B50220;
	--c-crema:       #E9E0CF;
	--c-blanco-roto: #EAEAE8;
	--c-gris:        #454140;

	/* --- Marca --- */
	--brand:         #4B0017;   /* header, footer, sidebar, botón primario */
	--brand-strong:  #3a0011;   /* sombra / borde de marca */
	--brand-hover:   #5f0a1e;   /* granate → rojo al pasar el ratón */
	--accent:        #B50220;   /* enlaces, iconos activos, badges, foco */
	--accent-strong: #4B0017;
	--accent-soft:   #8f1a26;   /* rojo apagado, buena lectura sobre crema */

	/* --- Superficies (derivadas de la crema para dar jerarquía) --- */
	--bg:            #E9E0CF;   /* fondo de página (crema) */
	--bg-2:          #E1D6C0;   /* sección alterna / hover de fila */
	--panel-bg:      #F3EEE1;   /* tarjetas — claramente más claro que el fondo */
	--surface:       #FBF8F1;   /* inputs y elementos elevados (casi blanco cálido) */
	--chip-bg:       #E1D6C0;   /* chips / botones suaves */

	/* --- Bordes (mezcla crema + gris, visibles pero sutiles) --- */
	--border:        #CDBFA6;
	--border-soft:   #DED2BB;

	/* --- Texto (todos AA sobre bg, bg-2, panel-bg y surface) --- */
	--text-strong:   #2b2724;
	--text:          #3f3b38;
	--text-muted:    #6b645d;
	--muted:         var(--text-muted);
	--on-brand:      #F5EEDF;   /* texto sobre granate (≈13:1) */
	--on-brand-muted:#D9CBB2;   /* texto secundario sobre granate (≈8:1) */

	/* --- Estados (chips / avisos) --- */
	--success:       #1f6b3f;  --success-bg: #dcebe0;
	--warning:       #79590a;  --warning-bg: #efe4c9;
	--danger:        #a5121f;  --danger-bg:  #f2dcdd;
	--info:          #2c586f;  --info-bg:    #dde7ec;

	/* --- Radios --- */
	--r-sm: 8px;  --r: 12px;  --r-lg: 16px;  --r-pill: 999px;

	/* --- Sombras --- */
	--shadow-sm: 0 2px 8px rgba(75,0,23,0.06);
	--shadow:    0 10px 28px rgba(75,0,23,0.10);
	--shadow-lg: 0 24px 56px rgba(75,0,23,0.14);
	--glass:     rgba(251,248,241,0.7);

	/* --- Sidebar --- */
	--sidebar-width: 260px;
	--sidebar-collapsed-width: 84px;
	--sidebar-bg:     #440015;
	--sidebar-text:   #F1E7D6;
	--sidebar-muted:  #C6B39B;
	--sidebar-border: rgba(241,231,214,0.14);
	--sidebar-hover:  rgba(241,231,214,0.10);
	--sidebar-active: rgba(181,2,32,0.32);

	--progress-base:  #DED2BB;
	--progress-fill:  var(--accent-soft);
}

/* Modo oscuro — granate muy oscuro + crema (nunca azul) */
.theme-dark,
:root[data-theme="dark"]{
	--brand:         #47021a;
	--brand-strong:  #2c0010;
	--brand-hover:   #6a0c26;
	--accent:        #e8566b;
	--accent-strong: #47021a;
	--accent-soft:   #e08491;

	--bg:            #1a1012;
	--bg-2:          #221619;
	--panel-bg:      #241a1d;
	--surface:       #2c2024;
	--chip-bg:       #33262a;

	--border:        #4a373b;
	--border-soft:   #3a2b2f;

	--text-strong:   #f6ede0;
	--text:          #e9ddcc;
	--text-muted:    #b7a99b;
	--on-brand:      #f5eedf;
	--on-brand-muted:#d9cbb2;

	--success:       #63c78c;  --success-bg: rgba(99,199,140,0.16);
	--warning:       #d9b455;  --warning-bg: rgba(217,180,85,0.16);
	--danger:        #ee7b86;  --danger-bg:  rgba(238,123,134,0.16);
	--info:          #7fb2cf;  --info-bg:    rgba(127,178,207,0.16);

	--shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
	--shadow:    0 14px 40px rgba(0,0,0,0.5);
	--shadow-lg: 0 24px 60px rgba(0,0,0,0.6);
	--glass:     rgba(44,32,36,0.7);

	--sidebar-bg:     #200008;
	--sidebar-text:   #f1e7d6;
	--sidebar-muted:  #b9a68f;
	--sidebar-border: rgba(241,231,214,0.10);
	--sidebar-hover:  rgba(241,231,214,0.08);
	--sidebar-active: rgba(232,86,107,0.26);

	--progress-base:  rgba(241,231,214,0.12);
}

.theme-dark html,
.theme-dark body,
.theme-dark{
	background: var(--bg) !important;
	background-image: none !important;
	color: var(--text) !important;
}

/* ============================================================================
   Base
   ========================================================================== */
*{box-sizing:border-box}
html,body{height:100%}
body{
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	margin:0; padding:0;
	background: var(--bg);
	color: var(--text);
	line-height: 1.55;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4{color:var(--text-strong);line-height:1.25;margin:0 0 0.6rem}
h2{margin-top:0;font-size:1.4rem}
h3{font-size:1.12rem}
p{margin:0 0 0.8rem}
a{color:var(--accent-soft);text-decoration:none}
a:hover{color:var(--brand);text-decoration:underline}

/* ---------------------------------------------------------------------------
   Texto SIEMPRE en crema cuando el fondo es granate (header, sidebar, footer
   de auth, botones primarios y cualquier superficie con .on-brand).
   Cubre explícitamente los títulos, que si no heredan el color oscuro global.
   --------------------------------------------------------------------------- */
header, header h1, header h2, header h3, header p, header span, header strong, header label,
.auth-header, .auth-header h1, .auth-header h2, .auth-header p, .auth-header a,
.auth-footer, .auth-footer h1, .auth-footer h2, .auth-footer p, .auth-footer a,
.sidebar, .sidebar h1, .sidebar h2, .sidebar h3, .sidebar p, .sidebar .sidebar-title,
.on-brand, .on-brand h1, .on-brand h2, .on-brand h3, .on-brand h4, .on-brand p,
.on-brand span, .on-brand strong, .on-brand label{
	color: var(--on-brand);
}
.sidebar .sidebar-group-title,
.on-brand .muted, .on-brand small{ color: var(--on-brand-muted); }
.on-brand a{ color: var(--on-brand); text-decoration: underline; }

/* Utilidad: contenedor con fondo de marca */
.bg-brand{ background: var(--brand); }
.bg-brand, .on-brand.bg-brand{ color: var(--on-brand); }
.theme-dark a:hover{color:var(--accent)}
small{color:var(--text-muted)}
hr{border:0;border-top:1px solid var(--border-soft);margin:1.25rem 0}
code,kbd{font-family:'Fira Mono',ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--bg-2);color:var(--text-strong);padding:0.15em 0.4em;border-radius:6px;font-size:0.88em}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.muted,.small-note{color:var(--text-muted)}
.small-note{font-size:0.85rem;margin-top:0.8rem}
.nowrap{white-space:nowrap}
.error{color:var(--danger)}

/* Scrollbar sutil en la paleta */
*{scrollbar-width:thin;scrollbar-color:var(--border) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--accent-soft)}

/* ============================================================================
   Header
   ========================================================================== */
header{
	display:flex;align-items:center;justify-content:space-between;gap:1rem;
	padding:0.85rem 1.5rem;
	background:var(--brand);
	color:var(--on-brand);
	border-bottom:1px solid var(--brand-strong);
	box-shadow:0 1px 0 rgba(0,0,0,0.18), 0 8px 22px rgba(75,0,23,0.16);
	position:sticky;top:0;z-index:1100;width:100%;
}
header h1{margin:0;font-weight:700;letter-spacing:0.4px;color:var(--on-brand);font-size:1.2rem}

nav{display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap}
nav a{color:var(--on-brand-muted);text-decoration:none;padding:0.35rem 0.6rem;border-radius:var(--r-sm)}
nav a:hover{background:var(--brand-hover);color:var(--on-brand);text-decoration:none}
header nav span{color:var(--on-brand);font-weight:500}
header .bi-bell{color:var(--on-brand);font-size:1.15rem}

#theme-toggle,.auth-theme{background:transparent;border:1px solid rgba(245,238,223,0.35);padding:0.4rem 0.6rem;border-radius:var(--r-sm);cursor:pointer;color:var(--on-brand);line-height:1}
#theme-toggle:hover,.auth-theme:hover{background:rgba(245,238,223,0.12)}
header form{display:inline}
header form button{background:var(--on-brand);border:none;color:var(--brand);padding:0.4rem 0.75rem;border-radius:var(--r-sm);cursor:pointer;font-weight:600}
header form button:hover{background:#fff}

main{padding:1.75rem 1.5rem 3rem;max-width:1440px;margin:0 auto;width:100%}

/* Barra "Ver cuenta como" (impersonación de solo lectura) */
.impersonation-bar{
	position:sticky; top:0; z-index:1101;
	display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
	padding:0.55rem 1.25rem;
	background:var(--warning); color:#fff;
	font-size:0.9rem; font-weight:600;
	box-shadow:0 2px 10px rgba(75,0,23,0.2);
}
.impersonation-bar span{ display:flex; align-items:center; gap:0.5rem }
.impersonation-bar strong{ color:#fff }
.impersonation-bar .pill-btn{ background:#fff; color:var(--warning); border:0 }
.impersonation-bar .pill-btn:hover{ background:var(--bg) }

/* Aviso "no tienes tarjeta de acceso" al iniciar sesión */
.card-notice-bar{
	position:sticky; top:0; z-index:1100;
	display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
	padding:0.55rem 1.25rem;
	background:var(--warning); color:#fff;
	font-size:0.9rem; font-weight:600;
	box-shadow:0 2px 10px rgba(75,0,23,0.2);
}
.card-notice-bar span{ display:flex; align-items:center; gap:0.5rem }
.card-notice-bar strong{ color:#fff }
.card-notice-bar .pill-btn{ background:#fff; color:var(--warning); border:0 }
.card-notice-bar .pill-btn:hover{ background:var(--bg) }

/* Indicador de tarjeta en la cabecera */
.card-chip{
	display:inline-flex; align-items:center; gap:0.35rem;
	padding:0.15rem 0.6rem; border-radius:var(--r-pill);
	font-size:0.78rem; font-weight:600; text-decoration:none;
	border:1px solid transparent;
}
.card-chip.ok{ background:var(--success-bg,#e3f1e4); color:var(--success,#256d2b); border-color:var(--success,#256d2b) }
.card-chip.warn{ background:var(--warning-bg,#f6e6cf); color:var(--warning,#8a5a00); border-color:var(--warning,#8a5a00) }
@media (max-width:640px){ .card-chip .card-chip-text{ display:none } }

/* ============================================================================
   Tarjetas y contenedores
   ========================================================================== */
.card,.form-card,.inherit-card,.team-card{
	background:var(--panel-bg);
	border:1px solid var(--border);
	border-radius:var(--r-lg);
	box-shadow:var(--shadow-sm);
}
.card{padding:1.25rem}
.form-card,.inherit-card,.team-card{padding:1.5rem}
.form-card{margin-top:1rem}
.card+.card,.form-card+.form-card{margin-top:1rem}

.table-card{
	background:var(--panel-bg);
	border:1px solid var(--border);
	border-radius:var(--r-lg);
	box-shadow:var(--shadow-sm);
	overflow:hidden;
}

.resume-page .card{position:relative;box-shadow:var(--shadow)}
.resume-page .card::before{content:'';position:absolute;inset:-6px;border-radius:20px;background:linear-gradient(135deg,var(--bg-2),rgba(181,2,32,0.14));opacity:0.6;filter:blur(22px);z-index:-1}

/* ============================================================================
   Cabeceras de página
   ========================================================================== */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem}
.page-header h2{margin-bottom:0.15rem}
.page-header .muted{margin:0}
.page-actions{display:flex;gap:0.6rem;align-items:center;flex-wrap:wrap}
.page-header.danger{border-left:4px solid var(--danger);padding-left:1.2rem}

/* ============================================================================
   Botones
   ========================================================================== */
.pill-btn,button.primary,button.ghost{
	display:inline-flex;align-items:center;justify-content:center;gap:0.45rem;
	font:inherit;font-weight:600;line-height:1;cursor:pointer;text-decoration:none;
	border-radius:var(--r-pill);border:1px solid transparent;
	padding:0.6rem 1.05rem;
	transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.pill-btn:hover,button.primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.pill-btn:active,button.primary:active{transform:translateY(0)}

.pill-btn.primary,button.primary{background:var(--brand);color:var(--on-brand);border-color:var(--brand-strong)}
.pill-btn.primary:hover,button.primary:hover{background:var(--brand-hover)}

.pill-btn.primary-light{background:var(--accent);color:#fff;border-color:var(--accent-strong)}
.pill-btn.primary-light:hover{background:var(--accent-soft)}

.pill-btn.success{background:var(--success);color:#fff}
.pill-btn.danger{background:var(--danger);color:#fff}
.pill-btn.success:hover,.pill-btn.danger:hover{filter:brightness(1.08)}

.pill-btn.secondary{background:var(--surface);color:var(--brand);border-color:var(--border)}
.pill-btn.secondary:hover{background:var(--panel-bg);border-color:var(--accent-soft)}

.pill-btn.ghost,button.ghost{background:transparent;border-color:var(--border);color:var(--text)}
.pill-btn.ghost:hover,button.ghost:hover{background:var(--bg-2);border-color:var(--text-muted)}
.pill-btn.ghost.danger{border-color:var(--danger);color:var(--danger);background:transparent}
.pill-btn.ghost.danger:hover{background:var(--danger-bg)}

.pill-btn.small{padding:0.38rem 0.75rem;font-size:0.83rem}
.pill-btn[disabled],.pill-btn[aria-disabled="true"],button[disabled]{opacity:0.5;cursor:not-allowed;transform:none;box-shadow:none}
.row-actions{display:flex;gap:0.5rem;flex-wrap:wrap;justify-content:flex-end}

/* ============================================================================
   Chips y badges
   ========================================================================== */
.chips,.chip-list,.inherit-chip-list{display:flex;flex-wrap:wrap;gap:0.35rem}
.chip{display:inline-flex;align-items:center;gap:0.3rem;padding:0.26rem 0.6rem;border-radius:var(--r-pill);background:var(--chip-bg);color:var(--text-strong);font-size:0.76rem;font-weight:600;border:1px solid transparent}
.chip.small{font-size:0.7rem;padding:0.16rem 0.48rem}
.chip.subtle{background:var(--bg-2);color:var(--text-muted)}
.chip.team-count,.chip.permission-count{background:var(--chip-bg);color:var(--text-strong)}

.chip.status-active{background:var(--success-bg);color:var(--success);border-color:rgba(31,107,63,0.25)}
.chip.status-inactive{background:var(--warning-bg);color:var(--warning);border-color:rgba(121,89,10,0.25)}
.chip.status-partial,.chip.status-pending{background:var(--info-bg);color:var(--info);border-color:rgba(44,88,111,0.25)}
.chip.status-blocked,.chip.status-disabled{background:var(--danger-bg);color:var(--danger);border-color:rgba(165,18,31,0.25)}

.team-type-badge{display:inline-block;padding:0.22rem 0.6rem;border-radius:var(--r-pill);font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;background:var(--chip-bg);color:var(--text-strong)}
.team-type-badge.type-primary{background:var(--success-bg);color:var(--success)}
.team-type-badge.type-secondary{background:var(--info-bg);color:var(--info)}

/* ============================================================================
   Tablas
   ========================================================================== */
.data-table{width:100%;border-collapse:collapse;font-size:0.95rem}
.data-table thead{background:var(--bg-2)}
.data-table thead th{
	text-align:left;padding:0.7rem 1rem;
	font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;
	color:var(--text-strong);
	border-bottom:2px solid var(--border);
}
.data-table td{padding:0.7rem 1rem;text-align:left;border-bottom:1px solid var(--border-soft);vertical-align:middle}
.data-table tbody tr:nth-child(even){background:rgba(75,0,23,0.028)}
.theme-dark .data-table tbody tr:nth-child(even){background:rgba(255,255,255,0.03)}
.data-table tbody tr:hover{background:rgba(181,2,32,0.07)}
.theme-dark .data-table tbody tr:hover{background:rgba(232,86,107,0.12)}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table td.empty,.empty{text-align:center;color:var(--text-muted);padding:1.75rem 1rem}
.data-table .actions{text-align:right;white-space:nowrap}

/* ============================================================================
   Formularios
   ========================================================================== */
label{display:block;margin-bottom:0.4rem;color:var(--text);font-size:0.9rem;font-weight:600}
label.checkbox-inline,.checkbox-inline{display:flex;align-items:center;gap:0.45rem;font-weight:500;color:var(--text-muted)}

input[type="text"],input[type="password"],input[type="email"],input[type="number"],input[type="date"],
input[type="datetime-local"],input[type="search"],input:not([type]),textarea,select{
	width:100%;
	padding:0.6rem 0.8rem;
	border-radius:var(--r);
	border:1px solid var(--border);
	background:var(--surface);
	color:var(--text-strong);
	font:inherit;
	transition:border-color .12s ease, box-shadow .12s ease;
}
textarea{min-height:6.5rem;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--text-muted);opacity:0.9}
input:focus,textarea:focus,select:focus{
	outline:none;
	border-color:var(--accent);
	box-shadow:0 0 0 3px rgba(181,2,32,0.18);
}
input[readonly]{background:var(--bg-2);cursor:default}
input[disabled],select[disabled],textarea[disabled]{opacity:0.6;cursor:not-allowed}
select[multiple]{padding:0.35rem}

/* Opciones del desplegable: forzar SIEMPRE fondo y color (algunos navegadores
   no heredan el color del <select> en la lista abierta y el texto queda
   ilegible sobre fondos oscuros/granate — p.ej. nombres de equipo). */
option,optgroup{background-color:var(--surface);color:var(--text-strong)}
option:checked,option:hover{background-color:var(--chip-bg);color:var(--text-strong)}
.theme-dark option,.theme-dark optgroup,
:root[data-theme="dark"] option,:root[data-theme="dark"] optgroup{background-color:#33262a;color:#f6ede0}
select[multiple] option{padding:0.3rem 0.4rem;border-radius:6px}

.form-actions{display:flex;justify-content:flex-end;gap:0.6rem;margin-top:1rem}
.form-card .form-actions{grid-column:1 / -1}
.form-card.warning{border-color:var(--danger);background:var(--danger-bg)}

/* rejillas reutilizables */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin:1rem 0}
.confirm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;padding:0;margin:0 0 1.5rem}
.confirm-grid dt{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);margin-bottom:0.3rem}
.confirm-grid dd{margin:0;font-weight:600;color:var(--text-strong)}
.confirm-actions{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1rem}
.confirm-actions .pill-btn{margin-left:auto}

.inline-form,.team-inline-form,.create-permission-form,.permission-inline-form,.filter-form.inline{
	display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center;
}
.inline-form input,.inline-form select,.team-inline-form input,.team-inline-form select,
.permissions-table input,.inherit-multiselect{width:auto;min-width:150px}
.inline-form .pill-btn,.team-inline-form .pill-btn{margin-top:0}

/* ============================================================================
   Avisos
   ========================================================================== */
.notice,.alert{
	padding:0.8rem 1rem;border-radius:var(--r);
	border:1px solid var(--border);border-left-width:4px;
	background:var(--panel-bg);color:var(--text);margin:0.75rem 0;
}
.notice.success,.alert.success{border-color:var(--success);background:var(--success-bg);color:var(--success)}
.notice.error,.alert.error{border-color:var(--danger);background:var(--danger-bg);color:var(--danger)}
.notice.warning,.alert.warning{border-color:var(--warning);background:var(--warning-bg);color:var(--warning)}
.notice.info,.alert.info{border-color:var(--info);background:var(--info-bg);color:var(--info)}
.notice strong,.alert strong{color:inherit}

/* ============================================================================
   Componentes de administración
   ========================================================================== */
.admin-users-page,.admin-teams-page,.admin-permissions-page,.admin-permissions-inherit,
.admin-pages,.admin-announcements-page,.admin-records-page,.admin-audit-page,.admin-search-page,
.admin-devices-page,.admin-user-edit,.notifications-page,.dashboard-page{
	display:flex;flex-direction:column;gap:1.5rem;
}

.admin-teams-page .teams-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem}
.team-card{display:flex;flex-direction:column;gap:1rem}
.team-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.team-card-header h3{margin:0 0 0.3rem}
.team-card-header .muted{margin:0}
.team-actions{display:flex;flex-wrap:wrap;gap:0.6rem}
.team-table-card{margin:0;border-radius:var(--r)}

.empty-team,.empty-team-list,.empty-permissions,.empty-pages,.empty-state .empty-card{
	padding:1.75rem;border:1px dashed var(--border);border-radius:var(--r);text-align:center;color:var(--text-muted);
}

.permissions-table input[disabled]{opacity:0.5}
.permissions-table .restricted-note{display:flex;align-items:center;gap:0.35rem;font-size:0.82rem;color:var(--text-muted)}
.permissions-table .restricted-note i{font-size:1rem;color:var(--accent)}
.permission-power{white-space:nowrap}
.permission-power .power-rank,.stack-rank{
	display:inline-flex;align-items:center;justify-content:center;
	background:var(--chip-bg);color:var(--brand);font-weight:700;border-radius:var(--r-pill);
}
.stack-rank{width:2.25rem;height:2.25rem}
.theme-dark .permission-power .power-rank,.theme-dark .stack-rank{color:var(--accent)}

.action-menu{position:relative;display:inline-block}
.action-menu>summary{list-style:none;cursor:pointer}
.action-menu>summary::-webkit-details-marker{display:none}
.action-menu-items{
	position:absolute;top:calc(100% + 0.4rem);right:0;min-width:190px;display:none;flex-direction:column;
	padding:0.4rem;border-radius:var(--r);background:var(--surface);
	box-shadow:var(--shadow);border:1px solid var(--border);z-index:20;
}
.action-menu[open]>.action-menu-items{display:flex}
.action-menu .menu-item{display:flex;align-items:center;gap:0.45rem;padding:0.45rem 0.55rem;border-radius:var(--r-sm);font-size:0.86rem;text-decoration:none;border:none;background:transparent;color:var(--text);text-align:left;cursor:pointer}
.action-menu .menu-item:hover,.action-menu .menu-item:focus{background:var(--bg-2)}

.inherit-metadata{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin:0 0 1.5rem}
.inherit-metadata dt{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);margin:0 0 0.3rem}
.inherit-metadata dd{margin:0;font-weight:600;color:var(--text-strong)}
.inherit-form{display:flex;flex-direction:column;gap:0.8rem}
.inherit-form select{max-width:360px}

.permission-stack{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.7rem}
.permission-stack-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.75rem 1rem;border-radius:var(--r);border:1px solid var(--border);background:var(--surface)}
.permission-stack-item.locked{opacity:0.55}
.stack-info{display:flex;align-items:center;gap:0.75rem}
.stack-labels{display:flex;flex-direction:column;gap:0.1rem}
.stack-labels .small{font-size:0.8rem;color:var(--text-muted)}
.stack-actions{display:flex;gap:0.4rem;align-items:center}
.stack-actions form{margin:0}

.filter-form{
	display:flex;flex-wrap:wrap;gap:0.9rem;align-items:end;
	padding:1rem 1.25rem;border-radius:var(--r);
	background:var(--panel-bg);border:1px solid var(--border);box-shadow:var(--shadow-sm);
}
.filter-row{display:flex;flex-wrap:wrap;gap:1rem}
.filter-field{display:flex;flex-direction:column;gap:0.35rem;min-width:180px;flex:1}
.filter-actions{display:flex;gap:0.6rem;flex-wrap:wrap}

.pages-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1.5rem;align-items:start}
@media (max-width:1100px){.pages-layout{grid-template-columns:1fr}.category-order-card{order:-1}}
.category-order-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.8rem}
.category-order-item{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.category-order-label{display:flex;align-items:center;gap:0.5rem;font-weight:600}
.category-order-controls{display:flex;gap:0.4rem;align-items:center}
.category-order-controls form{margin:0}

.announcements-feed .card{border-left:4px solid var(--brand)}

/* Botón que parece enlace (nombre de equipo, etc.) */
.link-btn{background:none;border:0;padding:0;margin:0;font:inherit;color:var(--accent-soft);cursor:pointer;text-align:left;display:inline-flex;align-items:center;gap:0.4rem}
.link-btn:hover{color:var(--brand);text-decoration:underline}
.theme-dark .link-btn{color:var(--accent)}

/* ============================================================================
   Ventana emergente de equipos (dialog nativo)
   ========================================================================== */
dialog.team-modal{
	border:0; padding:0; margin:auto;
	background:transparent;
	max-width:760px; width:calc(100% - 2rem);
	max-height:calc(100dvh - 3rem);
	overflow:visible;
}
dialog.team-modal::backdrop{
	background:rgba(42,0,16,0.55);
	backdrop-filter:blur(3px);
}

.team-modal-card{
	display:flex; flex-direction:column;
	max-height:calc(100dvh - 3rem);
	background:var(--panel-bg);
	border:1px solid var(--border);
	border-radius:var(--r-lg);
	box-shadow:var(--shadow-lg);
	overflow:hidden;
}
dialog.team-modal[open] .team-modal-card{ animation:tm-pop .16s ease-out }
@keyframes tm-pop{ from{ opacity:0; transform:translateY(10px) scale(.985) } }
@media (prefers-reduced-motion:reduce){ dialog.team-modal[open] .team-modal-card{ animation:none } }

/* Cabecera granate */
.team-modal-header{
	display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
	padding:1rem 1.25rem;
	background:var(--brand); color:var(--on-brand);
	flex-shrink:0;
}
.team-modal-header .tm-title h3{ margin:0; color:var(--on-brand); font-size:1.15rem }
.team-modal-header .tm-title h3 span{ opacity:.7; font-weight:500; font-size:.95rem }
.team-modal-header .tm-title p{ margin:.2rem 0 0; color:var(--on-brand-muted); font-size:.85rem }
.tm-close{
	flex-shrink:0; width:34px; height:34px; display:grid; place-items:center;
	border:0; border-radius:var(--r-sm); cursor:pointer;
	background:rgba(245,238,223,.14); color:var(--on-brand); font-size:.95rem;
	transition:background .12s ease;
}
.tm-close:hover{ background:rgba(245,238,223,.28) }

/* Cuerpo con scroll */
.team-modal-body{
	padding:1.25rem;
	overflow-y:auto;
	display:flex; flex-direction:column; gap:1.5rem;
}

.tm-block{ margin:0 }
.tm-block-title{
	margin:0 0 .7rem;
	font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
	color:var(--text-muted);
}

/* Configuración: campos apilados label + control */
.tm-config{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
	gap:1rem 1.25rem;
}
.tm-field{ display:flex; flex-direction:column; gap:.4rem; margin:0 }
.tm-field > label{ font-weight:600; font-size:.85rem; color:var(--text) }
.tm-field-row{ display:flex; gap:.5rem; align-items:center }
.tm-field-row select{ flex:1; min-width:0 }
.tm-check{
	display:flex; align-items:center; gap:.45rem;
	font-size:.82rem; font-weight:400; color:var(--text-muted); margin:0;
}
.tm-check input{ width:auto }
.tm-hint{ margin:.75rem 0 0; font-size:.82rem; color:var(--text-muted) }
.tm-hint a{ color:var(--accent-soft) }

/* Tabla de miembros dentro del modal */
.tm-table-wrap{
	border:1px solid var(--border); border-radius:var(--r); overflow:hidden;
}
.tm-table-wrap .data-table{ font-size:.88rem }
.tm-table-wrap .data-table th,
.tm-table-wrap .data-table td{ padding:.55rem .75rem }
.team-modal .row-actions{ gap:.35rem }
.team-modal .team-inline-form{ gap:.35rem }
.team-modal .team-inline-form select{ min-width:120px; padding:.4rem .55rem }

/* Panel "añadir miembro" */
.tm-add{ background:var(--bg-tint); border:1px solid var(--border-soft); border-radius:var(--r); padding:1rem }
.tm-add-form{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center }
.tm-add-form select{ flex:1 1 180px; min-width:0 }

@media (max-width:560px){
	.team-modal-body{ padding:1rem }
	.tm-config{ grid-template-columns:1fr }
	.tm-add-form{ flex-direction:column; align-items:stretch }
	.tm-add-form select,.tm-add-form .pill-btn{ width:100% }
}

/* Perfil / ajustes */
.profile-page .details{display:grid;grid-template-columns:180px 1fr;gap:0.5rem 1rem;align-items:center;margin:0}
.profile-page dt{font-size:0.85rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.04em}
.profile-page dd{margin:0;padding:0.5rem 0.75rem;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);color:var(--text-strong)}
.settings-page .card h2{margin-bottom:0.25rem}
.settings-page .auth-actions{justify-content:flex-start}

/* ============================================================================
   Auth (login / registro)
   ========================================================================== */
body.auth-layout{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg-2)}
.auth-page{min-height:calc(100vh - 72px);display:flex;align-items:center;justify-content:center;padding:2rem 1rem}
.auth-main{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem 1rem}

.auth-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;gap:1rem;background:var(--brand);color:var(--on-brand);border-bottom:1px solid var(--brand-strong)}
.auth-brand{display:flex;align-items:center;gap:0.6rem;font-weight:700;font-size:1.1rem;color:var(--on-brand);text-decoration:none}
.auth-brand i{font-size:1.25rem;color:var(--on-brand)}

.auth-footer{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1.25rem;background:var(--brand);color:var(--on-brand-muted);border-top:1px solid var(--brand-strong)}
.auth-footer a{color:var(--on-brand-muted);font-size:0.9rem}
.auth-footer a:hover{color:var(--on-brand)}
.auth-footer-links{display:flex;gap:0.75rem}

.auth-card{
	position:relative;width:100%;max-width:420px;padding:2rem;border-radius:var(--r-lg);
	background:var(--panel-bg);border:1px solid var(--border);box-shadow:var(--shadow-lg);
}
.auth-card:before{content:'';position:absolute;left:2rem;right:2rem;top:0;height:4px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,var(--brand),var(--accent))}
.auth-title{font-size:1.5rem;margin-bottom:0.4rem;color:var(--text-strong)}
.auth-sub{color:var(--text-muted);margin-bottom:1.4rem;font-size:0.95rem}
.auth-actions{display:flex;gap:0.6rem;align-items:center;justify-content:flex-end;margin-top:1.25rem}
.auth-card form label{margin-top:0.6rem}
.auth-card .error{margin:0 0 0.5rem}

/* ============================================================================
   Layout con sidebar
   ========================================================================== */
.app-shell{min-height:100vh;display:flex;flex-direction:column;margin-left:var(--sidebar-width);transition:margin-left 220ms ease}

footer{margin:0;padding:14px 18px;padding-left:calc(var(--sidebar-width) + 18px);background:transparent;border-top:1px solid var(--border);color:var(--text-muted);font-size:0.85rem;position:relative;z-index:1}
body.auth-layout footer{padding-left:18px}

.sidebar{
	position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-width);
	background:var(--sidebar-bg);color:var(--sidebar-text);
	border-right:1px solid var(--brand-strong);
	display:flex;flex-direction:column;padding:18px 14px;gap:12px;z-index:1200;
	transition:width 220ms ease, transform 220ms ease;
}
.sidebar-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:6px;border-bottom:1px solid var(--sidebar-border)}
.sidebar-title{margin:0;font-size:1.1rem;font-weight:700;color:var(--sidebar-text);letter-spacing:0.3px}
.sidebar-actions{display:flex;gap:8px;align-items:center}
.sidebar-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:var(--r);border:1px solid var(--sidebar-border);background:transparent;color:var(--sidebar-text);cursor:pointer;transition:background .18s ease}
.sidebar-btn:hover,.sidebar-btn:focus{outline:none;background:var(--sidebar-hover)}

.sidebar-nav{flex:1;overflow-y:auto;padding:6px 0 16px;display:flex;flex-direction:column}
.sidebar-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.sidebar-nav li{margin:0}
.sidebar-link{
	display:flex;align-items:center;gap:12px;padding:0.6rem 0.75rem;border-radius:var(--r);
	color:var(--sidebar-text);text-decoration:none;font-weight:500;
	border-left:3px solid transparent;
	transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.sidebar-link:hover,.sidebar-link:focus{background:var(--sidebar-hover);transform:translateX(3px);outline:none;text-decoration:none;color:var(--sidebar-text)}
.sidebar-link.active{background:var(--sidebar-active);color:#fff;border-left-color:var(--accent);font-weight:600}
.sidebar-link.active .sidebar-icon{color:#fff}
.sidebar-icon{font-size:1.15rem;width:24px;display:flex;align-items:center;justify-content:center;color:var(--sidebar-muted)}
.sidebar-label{font-weight:inherit;white-space:nowrap}
.sidebar-group-title{margin:16px 12px 6px;font-size:0.72rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--sidebar-muted)}
.sidebar-divider{height:1px;background:var(--sidebar-border);margin:10px 12px}

body.sidebar-collapsed .sidebar{width:var(--sidebar-collapsed-width);padding:18px 10px}
body.sidebar-collapsed .sidebar-title,
body.sidebar-collapsed .sidebar-label,
body.sidebar-collapsed .sidebar-group-title,
body.sidebar-collapsed .sidebar-divider{display:none}
body.sidebar-collapsed .sidebar-link{justify-content:center;transform:none;border-left-color:transparent}
body.sidebar-collapsed .sidebar-link.active{border-left-color:transparent;box-shadow:inset 3px 0 0 var(--accent)}
body.sidebar-collapsed .sidebar-header{justify-content:center}
body.sidebar-collapsed .sidebar-actions{flex-direction:column}
body.sidebar-collapsed .app-shell{margin-left:var(--sidebar-collapsed-width)}
body.sidebar-collapsed footer{padding-left:calc(var(--sidebar-collapsed-width) + 18px)}
body.sidebar-hidden .sidebar{transform:translateX(calc(-1 * var(--sidebar-width) - 12px));box-shadow:none}
body.sidebar-hidden .app-shell,
body.sidebar-hidden footer{padding-left:18px;margin-left:0}

#sidebar-backdrop{position:fixed;inset:0;background:rgba(42,0,16,0.5);opacity:0;pointer-events:none;transition:opacity 200ms ease;z-index:1150}
body.sidebar-dimmed #sidebar-backdrop{opacity:1;pointer-events:auto}

@media (max-width:768px){
	.app-shell,footer{margin-left:0 !important;padding-left:18px !important}
	.sidebar{transform:translateX(calc(-1 * var(--sidebar-width) - 24px))}
	body.sidebar-dimmed .sidebar{transform:translateX(0)}
}
@media (max-width:600px){
	header{padding:0.7rem 0.9rem}
	main{padding:1rem}
	nav{gap:0.4rem}
	.page-header{gap:0.6rem}
}

::selection{background:var(--accent);color:#fff}

/* Barras de progreso (deshabilitadas por ahora) */
.progress,.progress .bar,.progress.labeled,.progress .pct{display:none}