/* ═══════════════════════════════════════════════════════════════
   PALETA DE COLORES — Plataforma de Automatización y Digitalización
   ═══════════════════════════════════════════════════════════════

   🎨 Paleta Tecnológica:

   1) AZUL TECH        #0A84FF  → Color principal. Representa tecnología,
                                   precisión y digitalización.
                                   Uso: botones primarios, iconos interactivos,
                                   navegación, elementos clave del flujo.

   2) GRIS GRAFITO     #1E1E1E  → Color estructural / corporativo.
                                   Da seriedad, estabilidad y look profesional.
                                   Uso: barras laterales, headers, modo oscuro.

   3) GRIS CLARO       #F2F2F2  → Base minimalista.
                                   Mantiene la interfaz limpia y facilita lectura.
                                   Uso: tarjetas, formularios, áreas de contenido.

   4) BLANCO PURO      #FFFFFF  → Espacios y contraste.
                                   Imprescindible para diseño moderno y aireado.
                                   Uso: superficies, fondos de tarjetas, modales.

   5) VERDE AUTOMATIZACIÓN  #00C853  → Color de acción / éxito.
                                   Uso: estados "completado", "automatizado", "OK",
                                   confirmaciones, indicadores, métricas de éxito.

   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ─── COLOR PRIMARIO: AZUL TECH ─── */
    /* Botones primarios, enlaces, bordes de focus, accentos interactivos */
    --primary: #0A84FF;
    /* Hover del primario: azul ligeramente más oscuro para feedback */
    --primary-hover: #0070E0;
    /* Active/pressed: azul más profundo para estado pulsado */
    --primary-dark: #005BBB;
    /* Ring de foco: azul con transparencia para accesibilidad */
    --focus-ring: rgba(10, 132, 255, 0.25);

    /* ─── COLOR ÉXITO: VERDE AUTOMATIZACIÓN ─── */
    /* Estados completado, automatizado, OK, métricas de éxito */
    --success: #00C853;
    /* Fondo sutil para alertas de éxito y badges */
    --success-bg: #E8F9EF;

    /* ─── COLOR ERROR ─── */
    /* Estados de error, validación fallida, alertas críticas */
    --error: #FF3B30;
    /* Fondo sutil para alertas de error */
    --error-bg: #FFF0EF;

    /* ─── COLOR ADVERTENCIA ─── */
    /* Estados de warning, procesos en curso, atención requerida */
    --warning: #FF9500;
    /* Fondo sutil para alertas de advertencia */
    --warning-bg: #FFF8ED;

    /* ─── GRIS GRAFITO: ESTRUCTURA CORPORATIVA ─── */
    /* Texto principal: sobre fondos claros, máxima legibilidad */
    --text: #1E1E1E;
    /* Texto secundario: descripciones, metadata, labels */
    --text-muted: #6E6E6E;
    /* Labels de formularios: tono intermedio para jerarquía visual */
    --text-label: #555555;

    /* ─── GRIS CLARO: BASE MINIMALISTA ─── */
    /* Fondo general de la aplicación */
    --bg: #F2F2F2;
    /* Bordes suaves para separar secciones sin saturar */
    --border-light: #E5E5E5;
    /* Bordes estándar para inputs, líneas de separación */
    --border: #CCCCCC;

    /* ─── BLANCO PURO: SUPERFICIES Y CONTRASTE ─── */
    /* Superficies de tarjetas, formularios, modales */
    --surface: #FFFFFF;
    /* Fondo de inputs y campos de formulario */
    --input-bg: #FFFFFF;

    /* ─── COLORES DERIVADOS ─── */
    /* Enlaces: hereda el azul tech para coherencia */
    --link: #0A84FF;
    /* Hover de enlaces: azul más profundo */
    --link-hover: #005BBB;

    /* ─── UTILIDADES ─── */
    /* Sombra sutil para tarjetas y elevación */
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    /* Transición uniforme para todos los elementos interactivos */
    --transition: 0.15s ease;
    /* Stack de fuentes: SAP 72 primero, fallbacks seguros */
    --font: '72', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;
}

/* ═══ RESET ═══ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ═══ BASE ═══ */
html {
    font-size: 16px;
}

body {
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
}

/* ─── Navegación ─── */
/* Barra principal: fondo azul tech para identidad tecnológica */
.nav {
    position: relative;
    z-index: 100;
    padding: 0 1.5rem;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--primary);
    color: #FFFFFF;
}

/* Brand del nav: texto blanco sobre azul */
.nav-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #FFFFFF;
}

.nav-logo {
    height: 28px;
    width: auto;
    display: block;
    object-fit: contain;
}

/* Links de navegación: blanco translúcido, refuerzo al hover */
.nav-links {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    list-style: none;
}

.nav-links a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 400;
    transition: var(--transition);
    letter-spacing: 0.01em;
}

.nav-links a:hover {
    color: #FFFFFF;
}

/* Botón hamburguesa móvil: blanco sobre azul */
.nav-menu-btn {
    display: none;
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 4px;
}

/* ─── Sección de Login ─── */
/* Contenedor centrado: fondo gris claro para contraste con tarjeta blanca */
.login-section {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 2rem 1rem;
}

/* Tarjeta de login: superficie blanca con sombra sutil */
.login-card {
    background: var(--surface);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-card);
    width: 100%;
    max-width: 400px;
    padding: 2rem 2.25rem 2.5rem;
}

/* ─── Header del Login ─── */
/* Borde inferior gris claro separa header del formulario */
.login-header {
    text-align: left;
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-light);
}

.login-header h1 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.25rem;
    letter-spacing: -0.01em;
}

.login-header p {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

/* ─── Formulario ─── */
/* Labels: texto gris para jerarquía visual */
.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--text-label);
    margin-bottom: 0.375rem;
}

/* Input: borde gris, focus ring azul tech */
.form-input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-family: var(--font);
    transition: var(--transition);
    background: var(--input-bg);
    color: var(--text);
    height: 2.25rem;
}

/* Focus: borde azul tech + ring de accesibilidad */
.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

/* Placeholder: gris suave para no competir con contenido */
.form-input::placeholder {
    color: #AAAAAA;
}

/* ─── Botones ─── */
/* Base: height consistente, transición suave */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0 1.25rem;
    height: 2.25rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    letter-spacing: 0.01em;
}

/* Botón primario: azul tech, blanco sobre azul */
.btn-primary {
    background: var(--primary);
    color: #FFFFFF;
    border-color: var(--primary);
}

.btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.btn-primary:active {
    background: var(--primary-dark);
}

.btn-primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Botón outline: borde azul tech, fondo transparente */
.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
    margin-top: 0.625rem;
}

/* Hover outline: tinte azul muy sutil */
.btn-outline:hover {
    background: rgba(10, 132, 255, 0.06);
}

/* Botón pequeño: para acciones secundarias */
.btn-sm {
    height: 2rem;
    padding: 0 0.875rem;
    font-size: 0.8125rem;
    width: auto;
}

/* ─── Alertas ─── */
/* Contenedor base: oculto por defecto, se muestra con .show */
.alert {
    padding: 0.625rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    margin-bottom: 1rem;
    display: none;
    align-items: center;
    gap: 0.5rem;
}

.alert.show {
    display: flex;
}

/* Alerta de error: fondo rojo suave, texto rojo */
.alert-error {
    background: var(--error-bg);
    color: var(--error);
    border: 1px solid rgba(255, 59, 48, 0.2);
}

/* Alerta de éxito: fondo verde suave, texto verde automación */
.alert-success {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid rgba(0, 200, 83, 0.2);
}

/* Alerta de advertencia: fondo naranja suave, texto naranja */
.alert-warning {
    background: var(--warning-bg);
    color: var(--warning);
    border: 1px solid rgba(255, 149, 0, 0.2);
}

/* ─── Pasos del wizard ─── */
.step {
    display: none;
}

.step.active {
    display: block;
}

.step-indicator {
    display: none;
}

/* ─── Checkbox Row ─── */
/* Fila alineada: checkbox a la izquierda, enlace a la derecha */
.checkbox-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.checkbox-row label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text);
    cursor: pointer;
}

/* Checkbox: accent-color azul tech para coherencia de marca */
.checkbox-row input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--primary);
    cursor: pointer;
}

/* Enlace del checkbox: azul tech para CTA */
.checkbox-row a {
    font-size: 0.8125rem;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.checkbox-row a:hover {
    text-decoration: underline;
}

/* ─── Footer del formulario ─── */
/* Separador sutil + enlace de registro */
.form-footer {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-light);
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.form-footer a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.form-footer a:hover {
    text-decoration: underline;
}

/* ─── Spinner de carga ─── */
/* Anillo giratorio: borde blanco translúcido sobre botón azul */
.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: none;
}

.btn.loading .spinner { display: block; }
.btn.loading .btn-text { display: none; }

/* ─── Toggle de contraseña ─── */
.pass-wrapper {
    position: relative;
}

.toggle-pass {
    position: absolute;
    right: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD
   ═══════════════════════════════════════════════════════════════ */

/* Contenedor del dashboard: oculto por defecto */
.dashboard {
    display: none;
    min-height: 100vh;
    background: var(--bg);
    position: relative;
    z-index: 10;
}

.dashboard.show {
    display: block;
}

/* ─── Navegación del Dashboard ─── */
/* Barra sticky: azul tech para identidad constante */
.dash-nav {
    background: var(--primary);
    padding: 0 1.5rem;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Brand del dashboard: blanco sobre azul */
.dash-nav-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #FFFFFF;
}

.dash-nav-brand .nav-logo {
    height: 26px;
}

/* Sección de usuario: alineada a la derecha */
.dash-nav-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dash-user-info {
    text-align: right;
}

/* Nombre del usuario: blanco, jerarquía alta */
.dash-user-name {
    font-size: 0.8125rem;
    font-weight: 400;
    color: #FFFFFF;
}

/* Rol del usuario: blanco translucido para jerarquía baja */
.dash-user-role {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.7);
}

/* ─── Badges de Rol ─── */
/* Badge superadmin: fondo blanco translúcido, texto blanco */
.dash-role-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 0.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.badge-superadmin {
    background: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
}

/* Badge usuario estándar: fondo más translúcido */
.badge-user {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
}

/* ─── Avatar ─── */
/* Circulo con iniciales: fondo blanco translúcido sobre azul */
.dash-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.8125rem;
}

/* ─── Cuerpo del Dashboard ─── */
/* Contenedor centrado con max-width para legibilidad */
.dash-body {
    padding: 1.5rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.dash-body-main {
    flex: 1;
    min-width: 0;
}

.dash-body-side {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: 76px;
}

/* ─── Widget Calendario Dashboard ─── */
.dash-cal-widget {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: 0.75rem;
    overflow: hidden;
}

.dash-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border-light);
}

.dash-cal-header h3 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.dash-cal-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.dash-cal-nav-btn {
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.dash-cal-nav-btn:hover {
    background: var(--bg);
}

.dash-cal-days-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid var(--border-light);
}

.dash-cal-days-header div {
    text-align: center;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.dash-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 0.25rem 0.5rem 0.5rem;
}

.dash-cal-day {
    text-align: center;
    padding: 0.25rem 0;
    font-size: 0.75rem;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s;
    color: var(--text);
}

.dash-cal-day:hover {
    background: var(--bg);
}

.dash-cal-day.other {
    color: var(--text-muted);
    opacity: 0.4;
}

.dash-cal-day.today {
    background: var(--primary);
    color: #fff;
    font-weight: 700;
}

.dash-cal-day.has-events {
    background: rgba(10, 132, 255, 0.1);
    font-weight: 600;
}

.dash-cal-day.has-events:hover {
    background: rgba(10, 132, 255, 0.18);
}

.dash-cal-day.today.has-events {
    background: var(--primary);
    color: #fff;
}

.dash-cal-events {
    border-top: 1px solid var(--border-light);
    max-height: 200px;
    overflow-y: auto;
}

.dash-cal-event {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    cursor: pointer;
    transition: background 0.12s;
    font-size: 0.75rem;
}

.dash-cal-event:hover {
    background: var(--bg);
}

.dash-cal-event-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dash-cal-event-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}

.dash-cal-event-time {
    color: var(--text-muted);
    font-size: 0.6875rem;
    flex-shrink: 0;
}

.dash-cal-event-profile {
    font-size: 0.5625rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(10, 132, 255, 0.1);
    color: var(--primary);
    white-space: nowrap;
    flex-shrink: 0;
}

.dash-cal-filter {
    padding: 0.375rem 0.75rem;
    border-bottom: 1px solid var(--border-light);
}

.dc-filter-select {
    width: 100%;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    background: var(--surface);
    color: var(--text);
    font-size: 0.6875rem;
    cursor: pointer;
    outline: none;
}

.dc-filter-select:focus {
    border-color: var(--primary);
}

.dash-cal-empty {
    text-align: center;
    padding: 1rem;
    color: var(--text-muted);
    font-size: 0.75rem;
}

@media (max-width: 1024px) {
    .dash-body {
        flex-direction: column;
    }

    .dash-body-side {
        width: 100%;
        position: static;
    }
}

@media (max-width: 768px) {
    .dash-body {
        padding: 1rem;
    }
}

/* ─── Secciones del Dashboard ─── */
.dash-section {
    margin-bottom: 2rem;
}

/* Header de sección: borde inferior gris claro */
.dash-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-light);
}

.dash-section-header h2 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
}

/* Badge de sección: azul tech para identificación */
.dash-section-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 0.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--primary);
    color: #FFFFFF;
}

/* Contenido de sección: tarjeta blanca con borde sutil */
.dash-section-content {
    background: var(--surface);
    border-radius: 0.5rem;
    border: 1px solid var(--border-light);
    padding: 1.25rem;
}

/* Placeholder de contenido vacío */
.dash-placeholder {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* ═══════════════════════════════════════════════════════════════
   TARJETAS DE SERVICIO
   ═══════════════════════════════════════════════════════════════ */

/* Grid responsivo: mínimo 220px por columna */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

/* Tarjeta individual: fondo gris claro, borde sutil */
.service-card {
    background: var(--bg);
    border-radius: 0.5rem;
    border: 1px solid var(--border-light);
    padding: 1.25rem;
    transition: var(--transition);
}

.service-card:hover {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

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

.service-icon {
    font-size: 1.5rem;
}

/* ─── LED de estado del servicio ─── */
/* LED default: gris neutro (sin datos) */
.service-led {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #CCCCCC;
    transition: var(--transition);
}

/* LED OK: verde automación con glow */
.service-led.led-ok {
    background: var(--success);
    box-shadow: 0 0 6px rgba(0, 200, 83, 0.5);
}

/* LED Warning: naranja con glow */
.service-led.led-warning {
    background: var(--warning);
    box-shadow: 0 0 6px rgba(255, 149, 0, 0.5);
}

/* LED Down: rojo error con glow */
.service-led.led-down {
    background: var(--error);
    box-shadow: 0 0 6px rgba(255, 59, 48, 0.5);
}

/* LED Loading: gris con pulsación */
.service-led.led-loading {
    background: #CCCCCC;
    animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Título del servicio: texto principal */
.service-card h4 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.25rem;
}

/* Detalle del servicio: texto secundario */
.service-detail {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ─── Footer del Dashboard ─── */
.dash-footer {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    border-top: 1px solid var(--border-light);
    margin-top: 2rem;
}

/* ═══════════════════════════════════════════════════════════════
   PANTALLA DE CARGA
   ═══════════════════════════════════════════════════════════════ */

/* Overlay de carga: fondo gris claro, centrado */
.page-loader {
    position: fixed;
    inset: 0;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease;
}

.page-loader.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Ring de carga: borde gris, borde superior azul tech */
.loader-ring {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════
   ANIMACIONES
   ═══════════════════════════════════════════════════════════════ */

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .nav {
        padding: 0 1rem;
    }

    /* Menú hamburguesa: fondo azul tech */
    .nav-links {
        display: none;
        position: absolute;
        top: 48px;
        left: 0;
        right: 0;
        background: var(--primary);
        flex-direction: column;
        padding: 0.5rem 1rem;
        gap: 0;
    }

    .nav-links.open {
        display: flex;
    }

    /* Separadores del menú móvil: blanco translúcido */
    .nav-links li {
        padding: 0.625rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .nav-links li:last-child {
        border-bottom: none;
    }

    .nav-menu-btn {
        display: block;
    }

    .login-card {
        margin: 0 0.5rem;
        padding: 1.5rem;
    }

    .dash-body {
        padding: 1rem;
    }

    .dash-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════
   REFERENCIA RÁPIDA DE COLORES
   ═══════════════════════════════════════════════════════════════

   Uso en la interfaz:

   AZUL TECH     #0A84FF  → botones primarios, iconos interactivos,
                             navegación, elementos clave del flujo

   GRAFITO       #1E1E1E  → texto principal, navegación lateral,
                             headers, modo oscuro

   GRIS CLARO    #F2F2F2  → fondos, tarjetas, formularios, tablas

   BLANCO        #FFFFFF  → superficies, contraste, espacios

   VERDE         #00C853  → confirmaciones, indicadores de procesos,
                             métricas de éxito, LED de servicio OK

   NARANJA       #FF9500  → advertencias, procesos en curso

   ROJO          #FF3B30  → errores, alertas críticas, LED de servicio DOWN

   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   TARJETAS DE PERFIL
   ═══════════════════════════════════════════════════════════════ */

.profiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}

.profile-card {
    background: var(--bg);
    border-radius: 0.5rem;
    border: 1px solid var(--border-light);
    padding: 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
}

.profile-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-color: var(--primary);
}

.profile-card-image {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto 0.75rem;
    overflow: hidden;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
}

.profile-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-card-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-card-type {
    font-size: 0.625rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════════════════════════════
   PANEL CREAR PERFIL — FLOTANTE CENTRADO
   ═══════════════════════════════════════════════════════════════ */

.panel-top-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.45);
}

.panel-top-overlay.open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.panel-top {
    background: var(--surface);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    border-radius: 0.75rem;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-top-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-light);
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 1;
}

.panel-top-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.panel-top-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
}

.panel-top-close:hover {
    color: var(--text);
    background: var(--bg);
}

.panel-top-body {
    padding: 1.25rem 1.5rem;
    flex: 1;
    overflow-y: auto;
}

.panel-top-fields {
    max-width: 480px;
}

.panel-top-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-light);
    background: var(--surface);
    position: sticky;
    bottom: 0;
}

.profile-image-preview {
    text-align: center;
    margin-top: 0.75rem;
}

.profile-image-preview img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-light);
}

/* ═══════════════════════════════════════════════════════════════
   SECCION APLICACION — TARJETAS
   ═══════════════════════════════════════════════════════════════ */

.app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.app-card {
    background: var(--bg);
    border-radius: 0.5rem;
    border: 1px solid var(--border-light);
    padding: 1.5rem;
    cursor: pointer;
    transition: var(--transition);
}

.app-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-color: var(--primary);
}

.app-card-icon {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
}

.app-card h4 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.25rem;
}

.app-card-detail {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════
   PANEL ESTRUCTURA DE PERFILES — ARBOL
   ═══════════════════════════════════════════════════════════════ */

.struct-top-actions {
    margin-bottom: 1rem;
}

.struct-tree {
    font-size: 0.8125rem;
}

.struct-node {
    border-left: 2px solid var(--border-light);
    margin-left: 0.5rem;
    padding-left: 0.75rem;
}

.struct-node:first-child {
    margin-top: 0;
}

.struct-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.625rem;
    border-radius: 0.375rem;
    margin-bottom: 0.25rem;
    transition: var(--transition);
}

.struct-item:hover {
    background: var(--bg);
}

.struct-item-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
}

.struct-toggle {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.625rem;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: var(--transition);
}

.struct-toggle:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.struct-toggle.open {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.struct-toggle.no-children {
    visibility: hidden;
}

.struct-item-name {
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.struct-item-desc {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-left: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.struct-item-actions {
    display: flex;
    gap: 0.125rem;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}

.struct-item:hover .struct-item-actions {
    opacity: 1;
}

.struct-item-actions button {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.75rem;
    transition: var(--transition);
}

.struct-btn-add {
    color: var(--success);
}

.struct-btn-add:hover {
    background: var(--success-bg);
}

.struct-btn-edit {
    color: var(--primary);
}

.struct-btn-edit:hover {
    background: rgba(10, 132, 255, 0.08);
}

.struct-btn-delete {
    color: var(--error);
}

.struct-btn-delete:hover {
    background: var(--error-bg);
}

.struct-children {
    display: none;
}

.struct-children.open {
    display: block;
}

/* ─── Modulos en formulario ─── */

.struct-modules-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.25rem;
}

.struct-module-check {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--border-light);
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.75rem;
    transition: var(--transition);
    user-select: none;
}

.struct-module-check:hover {
    border-color: var(--primary);
}

.struct-module-check.selected {
    background: rgba(10, 132, 255, 0.08);
    border-color: var(--primary);
    color: var(--primary);
}

.struct-module-check input {
    display: none;
}

/* ─── Modulos badges en el arbol ─── */

.struct-item-modules {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
    padding-left: 1.75rem;
}

.struct-mod-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: rgba(10, 132, 255, 0.08);
    border-radius: 1rem;
    font-size: 0.625rem;
    color: var(--primary);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   MATRIZ DE MODULOS
   ═══════════════════════════════════════════════════════════════ */

.matrix-wrap {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 65vh;
}

.matrix-table {
    border-collapse: collapse;
    font-size: 0.75rem;
    width: 100%;
    min-width: max-content;
}

.matrix-table th,
.matrix-table td {
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border-light);
    text-align: center;
    white-space: nowrap;
}

.matrix-table thead th {
    background: var(--bg);
    font-weight: 700;
    color: var(--text-muted);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    position: sticky;
    top: 0;
    z-index: 2;
}

.matrix-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--bg);
}

.matrix-table tbody th {
    background: var(--surface);
    font-weight: 600;
    color: var(--text);
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 140px;
}

.matrix-table tbody th .mod-icon {
    margin-right: 0.375rem;
}

.matrix-table tbody td {
    background: var(--surface);
}

.matrix-table tbody tr:hover td,
.matrix-table tbody tr:hover th {
    background: rgba(10, 132, 255, 0.02);
}

.matrix-table .struct-col {
    font-size: 0.6875rem;
    color: var(--primary);
    font-weight: 600;
    writing-mode: horizontal-tb;
}

.matrix-table .struct-col.sub {
    color: var(--text-muted);
    font-weight: 400;
    font-style: italic;
}

/* Toggle switch */
.toggle-cell {
    display: flex;
    justify-content: center;
    align-items: center;
}

.toggle {
    position: relative;
    width: 2rem;
    height: 1.125rem;
    cursor: pointer;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--border);
    border-radius: 1rem;
    transition: background 0.2s;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 0.875rem;
    height: 0.875rem;
    left: 0.125rem;
    top: 0.125rem;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.toggle input:checked + .toggle-slider {
    background: var(--primary);
}

.toggle input:checked + .toggle-slider::before {
    transform: translateX(0.875rem);
}

.toggle-locked {
    opacity: 0.6;
    pointer-events: none;
}

.toggle-locked .toggle-slider {
    background: var(--primary) !important;
    opacity: 0.5;
}

.matrix-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

@media (max-width: 768px) {
    .matrix-table {
        font-size: 0.6875rem;
    }

    .matrix-table th,
    .matrix-table td {
        padding: 0.375rem 0.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   CALENDARIO — GOOGLE CALENDAR STYLE
   ═══════════════════════════════════════════════════════════════ */

.cal-module {
    padding: 0 !important;
    height: calc(100vh - 56px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cal-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
    gap: 1rem;
    flex-wrap: wrap;
}

.cal-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cal-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
    margin-left: 0.5rem;
    min-width: 160px;
}

.cal-btn {
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--surface);
    color: var(--text);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.cal-btn:hover {
    background: var(--bg);
    border-color: var(--primary);
}

.cal-btn-primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.cal-btn-primary:hover {
    background: #0070e0;
}

.cal-nav-btn {
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.cal-nav-btn:hover {
    background: var(--bg);
}

.cal-grid {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cal-days-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--border-light);
}

.cal-days-header div {
    padding: 0.5rem;
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    flex: 1;
}

.cal-day {
    border-right: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    padding: 0.25rem;
    min-height: 80px;
    cursor: pointer;
    transition: background 0.12s;
    overflow: hidden;
}

.cal-day:hover {
    background: rgba(10, 132, 255, 0.03);
}

.cal-day.other-month {
    background: var(--bg);
}

.cal-day.other-month .cal-day-num {
    color: var(--text-muted);
    opacity: 0.5;
}

.cal-day.today {
    background: rgba(10, 132, 255, 0.04);
}

.cal-day.today .cal-day-num {
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.cal-day-num {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text);
    display: inline-block;
    margin-bottom: 0.125rem;
}

.cal-day-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cal-event-chip {
    font-size: 0.625rem;
    font-weight: 500;
    padding: 1px 4px;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    line-height: 1.4;
}

.cal-more {
    font-size: 0.5625rem;
    color: var(--text-muted);
    padding: 0 4px;
}

/* Event panel */
.cal-event-panel {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    max-width: 90vw;
    height: 100vh;
    background: var(--surface);
    border-left: 1px solid var(--border-light);
    z-index: 200;
    display: flex;
    flex-direction: column;
    transition: right 0.25s ease;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
}

.cal-event-panel.open {
    right: 0;
}

.cal-event-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
}

.cal-event-panel-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

.cal-event-panel-close {
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.cal-event-panel-close:hover {
    background: var(--bg);
}

.cal-event-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
}

.cal-event-panel-footer {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-light);
}

.cal-form-group {
    margin-bottom: 0.875rem;
}

.cal-form-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.cal-form-group input[type="checkbox"] {
    margin-right: 0.375rem;
}

.cal-form-row {
    display: flex;
    gap: 0.75rem;
}

.cal-form-row .cal-form-group {
    flex: 1;
}

.cal-colors {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cal-color-dot {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s, transform 0.15s;
}

.cal-color-dot:hover {
    transform: scale(1.15);
}

.cal-color-dot.active {
    border-color: var(--text);
    transform: scale(1.15);
}

/* Day detail panel */
.cal-day-detail {
    position: fixed;
    bottom: -100%;
    left: 0;
    right: 0;
    max-height: 50vh;
    background: var(--surface);
    border-top: 1px solid var(--border-light);
    z-index: 190;
    transition: bottom 0.25s ease;
    overflow-y: auto;
}

.cal-day-detail.open {
    bottom: 0;
}

.cal-day-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 1;
}

.cal-day-detail-header span {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--text);
}

.cal-day-detail-events {
    padding: 0.5rem 1.25rem;
}

.cal-detail-event {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background 0.12s;
}

.cal-detail-event:last-child {
    border-bottom: none;
}

.cal-detail-event:hover {
    background: var(--bg);
}

.cal-detail-color {
    width: 4px;
    height: 2rem;
    border-radius: 2px;
    flex-shrink: 0;
}

.cal-detail-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cal-detail-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
}

.cal-detail-time {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.btn-danger {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

.btn-danger:hover {
    background: #d32f2f;
}

@media (max-width: 768px) {
    .cal-day {
        min-height: 56px;
    }

    .cal-day-num {
        font-size: 0.6875rem;
    }

    .cal-event-chip {
        font-size: 0.5rem;
    }

    .cal-event-panel {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PANTALLA DE PERFIL
   ═══════════════════════════════════════════════════════════════ */

.profile-screen {
    display: none;
    min-height: 100vh;
    background: var(--bg);
}

.profile-screen.show {
    display: block;
}

.profile-topbar {
    background: var(--primary);
    padding: 0 1.5rem;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
}

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

.profile-topbar-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem;
    overflow: hidden;
    flex-shrink: 0;
}

.profile-topbar-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-topbar-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.profile-topbar-name {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
}

.profile-topbar-type {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.6875rem;
}

.profile-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.profile-topbar-back {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font);
}

.profile-topbar-back:hover {
    background: rgba(255, 255, 255, 0.25);
}

.profile-layout {
    display: flex;
    min-height: calc(100vh - 56px);
}

.profile-sidebar {
    width: 220px;
    background: var(--surface);
    border-right: 1px solid var(--border-light);
    padding: 1rem 0;
    flex-shrink: 0;
}

.profile-sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}

.profile-sidebar-item:hover {
    background: var(--bg);
    color: var(--text);
}

.profile-sidebar-item.active {
    color: var(--primary);
    background: rgba(10, 132, 255, 0.06);
    font-weight: 600;
    border-right: 2px solid var(--primary);
}

.profile-sidebar-item span:first-child {
    font-size: 1rem;
}

.profile-main {
    flex: 1;
    padding: 1.5rem 2rem;
}

.profile-main-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.profile-main-module {
    display: none;
}

.profile-main-module.active {
    display: block;
}

@media (max-width: 768px) {
    .profile-sidebar {
        width: 56px;
        padding: 0.5rem 0;
    }

    .profile-sidebar-item {
        justify-content: center;
        padding: 0.625rem;
    }

    .profile-sidebar-item span:last-child {
        display: none;
    }

    .profile-main {
        padding: 1rem;
    }

    .struct-item-desc {
        display: none;
    }

    .struct-item-actions {
        opacity: 1;
    }
}