@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap'); :root { --primary-color: #111; --accent: #374151; --accent-light: rgba(55, 65, 81, 0.08); --bg-body: #f8fafc; --bg-primary: #ffffff; --bg-secondary: #f1f5f9; --bg-tertiary: #e2e8f0; --text-primary: #0f172a; --text-main: #0f172a; --text-secondary: #334155; --text-muted: #64748b; --card-bg: #ffffff; --border-color: #e2e8f0; --border-light: rgba(0,0,0,0.05); --shadow-hover: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --navbar-bg: rgba(255, 255, 255, 0.9); --input-bg: rgba(255, 255, 255, 0.9); /* Border Radius Scale */ --radius-sm: 8px; /* badges, small elements */ --radius-md: 12px; /* inputs, alerts, tables */ --radius-lg: 16px; /* cards, modals */ --radius-pill: 50px; /* buttons */ } /* Modo oscuro. Cualificado con :root para que SOLO redefina las variables en el elemento . Sin :root, este selector tambien casaba con cualquier elemento que tuviera data-theme="dark" (p.ej. el boton "Oscuro" del selector de tema del perfil), pintandolo oscuro aunque la web estuviera en modo claro. */ :root[data-theme="dark"] { --primary-color: #ffffff; --accent: #94a3b8; --accent-light: rgba(148, 163, 184, 0.12); --bg-body: #0f0f0f; --bg-primary: #1a1a1a; --bg-secondary: #252525; --bg-tertiary: #333333; --text-primary: #f1f5f9; --text-main: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --card-bg: #1a1a1a; --border-color: #333333; --border-light: rgba(255,255,255,0.08); --shadow-hover: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3); --navbar-bg: rgba(26, 26, 26, 0.95); --input-bg: #252525; } /* RESET BÁSICO IMPORTANTE */ html, body { height: 100%; margin: 0; padding: 0; font-family: 'Plus Jakarta Sans', sans-serif; background-color: var(--bg-body); color: var(--text-main); overflow-x: hidden; } /* Scrollbars adaptados al tema */ html { scrollbar-color: var(--bg-tertiary) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 8px; border: 2px solid var(--bg-body); } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* Main content - ocupa altura disponible centrado */ .main-content { min-height: calc(100vh - 61px); min-height: calc(100dvh - 61px); display: flex; flex-direction: column; padding-top: 1rem; padding-bottom: 1rem; } /* Scroll interno: el body no scrollea, el scroll vive dentro de .main-content. Asi la scrollbar vertical NO se ve detras del navbar sticky · queda confinada al area de contenido (debajo del header). Antes esto solo se aplicaba a PWA standalone, ahora siempre. */ html, body { overflow: hidden; position: fixed; width: 100%; } /* El alto va en dvh y el vh es SOLO el respaldo para navegadores sin dvh, asi que el orden importa: la ultima declaracion valida es la que manda. Estaban al reves (dvh primero, vh despues), o sea que dvh no se aplicaba nunca. En movil, 100vh es el viewport GRANDE (como si la barra de direcciones estuviera plegada), asi que el contenedor con scroll medía mas que la pantalla visible: en un iPhone 14 Pro Max ~90px del contenedor quedaban por debajo del pliegue y, como el body no scrollea (overflow hidden + fixed), esa franja era inalcanzable: hueco muerto al final y contenido que no se llega a ver. Con dvh el contenedor mide lo que se ve. Ojo: aqui dvh no baila mientras se hace scroll porque la pagina no scrollea (el scroll vive dentro), o sea que el navegador no plega ni despliega sus barras. */ .main-content { min-height: unset; height: calc(100vh - 61px); height: calc(100dvh - 61px); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* NAVBAR */ /* Banner de impersonación */ .impersonation-banner { position: sticky; top: 0; z-index: 1040; background: #fbbf24; color: #78350f; text-align: center; padding: 6px 16px; font-size: 0.82rem; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 12px; } .impersonation-exit { background: #78350f; color: #fef3c7; padding: 2px 12px; border-radius: 6px; text-decoration: none; font-size: 0.75rem; font-weight: 600; transition: opacity 0.15s; } .impersonation-exit:hover { opacity: 0.85; color: #fef3c7; } .navbar-custom { background: var(--navbar-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-light); /* Misma altura que la cabecera de /entradas/ (.ent-header, 60px). Sin padding vertical: el min-height manda y el contenido (iconos de 40px) se centra por el align-items del propio navbar. Asi Home/Perfil y Fiesta tienen la barra a la misma altura. */ padding: 0; min-height: 60px; align-items: center; } /* Mismo sangrado horizontal que la cabecera de /entradas/ (.ent-header: 0 20px), para que el logo arranque en la MISMA x en Home/Perfil y en Fiesta. Sustituye al px-4 que metia 24px en escritorio (el logo se veia un pelin mas a la derecha). Las pantallas muy pequeñas mantienen su sangrado reducido mas abajo para no comerse el ancho de la fila de iconos. */ .navbar-custom .container-fluid { padding-left: 20px; padding-right: 20px; } .navbar-brand { font-weight: 700; font-size: 1.2rem; color: var(--text-main) !important; } /* Logo responsive: por defecto mostrar logo completo, ocultar icono */ .logo-full { display: inline-block; } .logo-icon { display: none !important; } /* Logo claro/oscuro según tema - solo afecta a logos full */ .logo-full.logo-light { display: inline-block; } .logo-full.logo-dark { display: none; } [data-theme="dark"] .logo-full.logo-light { display: none; } [data-theme="dark"] .logo-full.logo-dark { display: inline-block; } /* El logo con la palabra "Linkers" (wordmark) se mantiene en movil: es la marca que Pedro quiere ver arriba, igual que en /entradas/. Solo en pantallas muy estrechas (<=360px) se cae al icono suelto para que la fila de iconos de un admin no se vaya a dos lineas. */ @media (max-width: 360px) { .logo-full.logo-light, .logo-full.logo-dark { display: none !important; } .logo-icon { display: inline-block !important; } } /* El aviso de entorno (BETA/LOCAL/DEV/PISOS) solo en escritorio: en movil estorba y ademas ya vamos justos de ancho con el wordmark + los iconos. */ @media (max-width: 768px) { .beta-badge, .dev-badge, .pisos-badge { display: none !important; } } /* Badge BETA */ .beta-badge { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.5px; padding: 3px 6px; background: var(--bg-secondary); color: var(--text-muted); border-radius: 4px; text-transform: uppercase; } /* Badge DEV/LOCAL (entorno de desarrollo). Sutil (peticion de Pedro): sin el naranja llamativo ni el parpadeo, pero con un tinte ambar apagado para distinguir de un vistazo que NO estas en produccion. */ .dev-badge { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.5px; padding: 3px 6px; background: rgba(255, 107, 53, 0.12); color: #b45309; border-radius: 4px; text-transform: uppercase; } /* Badge PISOS - verde apagado, mismo criterio sutil. */ .pisos-badge { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.5px; padding: 3px 6px; background: rgba(16, 185, 129, 0.12); color: #047857; border-radius: 4px; text-transform: uppercase; } /* Navbar icon buttons - botones con borde, bien escalados */ .nav-icon-btn { width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-secondary) !important; border: 1.5px solid var(--border-color) !important; color: var(--text-secondary) !important; border-radius: 8px; text-decoration: none; box-sizing: border-box; } .nav-icon-btn:hover { background: var(--bg-tertiary) !important; border-color: var(--border-color) !important; color: var(--text-main) !important; } /* Icono activo en la navbar (solo color, sin outline ni background) */ .nav-icon-active { color: var(--accent, #6366f1) !important; } .nav-icon-btn svg { flex-shrink: 0; width: 18px; height: 18px; } /* Badge de notificación para navbar */ .badge-notification { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; font-size: 11px; font-weight: 700; color: #000; background: #fbbf24; border-radius: 9px; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; line-height: 1; box-sizing: border-box; padding: 0 4px; } /* Badge de warning (exclamación) */ .badge-notification.badge-warning { min-width: 18px; padding: 0; } /* El boton de novedades era un flotante fijo abajo a la izquierda y se quedaba encima del contenido a cualquier altura de scroll: un flotante no se aparta. Ahora es un .nav-icon-btn de la navbar (ver base.html) y su contador usa el mismo badge que el de administracion, mas abajo en esta hoja. */ /* Botón flotante de comunidad (derecha) */ .preview-fab-group { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 1000; } .preview-fab-group .comunidad-fab { position: relative; right: auto; bottom: auto; } .preview-fab-secondary:hover { background: #333 !important; } /* Toggle simulación participación: per-card (el toggle global muestra los botones per-card) */ body.sim-participacion-activa .sim-card-activo .sim-vista-no { display: none !important; } body.sim-participacion-activa .sim-card-activo .sim-vista-si { display: inline-flex !important; } /* Botón toggle sim per-card (solo visible en modo simulación) */ .sim-card-toggle { position: absolute; top: 14px; left: 14px; z-index: 3; height: 28px; width: 28px; border-radius: 10px; border: none; background: rgba(0,0,0,0.35); backdrop-filter: blur(4px); cursor: pointer; display: none; align-items: center; justify-content: center; transition: all 0.2s ease; padding: 0; } body.sim-participacion-activa .sim-card-toggle { display: flex; } .sim-card-toggle:hover { background: rgba(0,0,0,0.5); } .sim-card-toggle .sim-check-icon { display: none; color: white; } .sim-card-toggle .sim-empty-icon { display: block; color: rgba(255,255,255,0.8); } .sim-card-activo .sim-card-toggle { background: #22c55e; } .sim-card-activo .sim-card-toggle .sim-check-icon { display: block; } .sim-card-activo .sim-card-toggle .sim-empty-icon { display: none; } @media (max-width: 575px) { .sim-card-toggle { top: 10px; left: 10px; height: 22px; width: 22px; border-radius: 7px; } } .comunidad-fab { position: fixed; right: 20px; bottom: 20px; width: 40px; height: 40px; background: #111; color: white; border: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; z-index: 1000; box-shadow: 0 2px 8px rgba(0,0,0,0.2); } .comunidad-fab:hover { background: #333; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.25); } .fab-comunidad-badge { position: absolute; top: -6px; right: -6px; min-width: 28px; height: 16px; background: #667eea; color: white; font-size: 0.55rem; font-weight: 700; border-radius: 4px; display: flex; align-items: center; justify-content: center; padding: 0 4px; letter-spacing: 0.5px; } .fab-comunidad-badge.fab-todas { background: #64748b; } /* Boton de vista previa admin */ .admin-preview-form { position: fixed; right: 20px; bottom: 70px; z-index: 1000; margin: 0; } .preview-fab { width: 40px; height: 40px; background: #111; color: white; border: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.2); } .preview-fab:hover { background: #333; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.25); } .preview-fab.preview-active { background: #667eea; animation: pulse-preview 2s infinite; } .preview-fab.preview-active:hover { background: #5a6fd6; } @keyframes pulse-preview { 0%, 100% { box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4); } 50% { box-shadow: 0 2px 16px rgba(102, 126, 234, 0.6); } } @media (max-width: 768px) { .admin-preview-form { bottom: 66px; right: 16px; } } /* Lista de comunidades en modal */ .comunidad-selector-list { display: flex; flex-direction: column; gap: 8px; } .comunidad-selector-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg-secondary); border: 1.5px solid var(--border-color); border-radius: 10px; text-decoration: none; color: var(--text-secondary); font-weight: 500; font-size: 0.9rem; transition: all 0.15s ease; } .comunidad-selector-item:hover { background: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-main); } .comunidad-selector-item.active { background: var(--primary-color); border-color: var(--primary-color); color: var(--bg-body); } .comunidad-selector-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .comunidad-selector-item.active .comunidad-selector-icon { background: rgba(255,255,255,0.2) !important; color: white !important; } /* Row de comunidad con botón de preview */ .comunidad-selector-row { display: flex; align-items: center; gap: 8px; background: var(--bg-secondary); border: 1.5px solid var(--border-color); border-radius: 10px; padding-right: 8px; transition: all 0.15s ease; } .comunidad-selector-row .comunidad-selector-item { flex-grow: 1; border: none; background: transparent; padding-right: 4px; } .comunidad-selector-row:hover { background: var(--bg-tertiary); border-color: var(--border-color); } .comunidad-selector-row.active { background: var(--primary-color); border-color: var(--primary-color); } .comunidad-selector-row.active .comunidad-selector-item { color: var(--bg-body); } .comunidad-selector-row.active .comunidad-selector-icon { background: rgba(255,255,255,0.2) !important; color: white !important; } /* Botón de ojo para preview */ .preview-eye-btn { width: 32px; height: 32px; border: none; background: var(--bg-tertiary); border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); transition: all 0.15s ease; flex-shrink: 0; } .preview-eye-btn:hover { background: #8b5cf620; color: #8b5cf6; } .comunidad-selector-row.active .preview-eye-btn { background: rgba(255,255,255,0.2); color: white; } .comunidad-selector-row.active .preview-eye-btn:hover { background: rgba(255,255,255,0.3); } /* Botones flotantes en móvil (solo queda el de comunidad, de administración) */ @media (max-width: 768px) { .comunidad-fab { bottom: 16px; right: 16px; } } /* Navbar buttons con texto */ .navbar-custom .action-btn { height: 40px; padding: 0 16px !important; font-size: 0.85rem; display: inline-flex; align-items: center; justify-content: center; } /* TARJETAS */ .card-custom { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05); transition: transform 0.2s, box-shadow 0.2s; } .card-custom:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } /* LOGIN A PANTALLA COMPLETA (FIX DEFINITIVO) */ .login-container { /* POSICIONAMIENTO FIJO: Esto saca el div fuera del 'container' de Bootstrap */ position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; /* Nos aseguramos de estar encima de todo */ /* CENTRADO */ display: flex; align-items: center; justify-content: center; /* FONDO DEGRADADO */ background: linear-gradient(135deg, #fce7f3 0%, #e0f2fe 100%); /* Reseteo de márgenes por si acaso */ margin: 0; padding: 0; /* Ajuste óptico: mover contenido ligeramente hacia arriba */ padding-bottom: 4vh; } .login-card { width: 100%; max-width: 420px; padding: 2.5rem; border-radius: 16px; background: rgba(255, 255, 255, 0.85); /* Semitransparente */ backdrop-filter: blur(20px); /* Efecto cristal */ border: 1px solid rgba(255,255,255,0.6); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1); /* Sombra suave y larga */ } /* RESPONSIVE - MÓVIL */ @media (max-width: 480px) { .login-container { padding: 24px; padding-bottom: 8vh; /* Ajuste óptico */ } /* En móvil: sin tarjeta, contenido directo sobre el fondo */ .login-card { padding: 0; border-radius: 0; background: transparent; backdrop-filter: none; border: none; box-shadow: none; max-width: 100%; } .login-card h2 { font-size: 1.75rem; } .login-card .mb-5 { margin-bottom: 1.5rem !important; } /* Inputs con fondo sólido en móvil para mejor legibilidad */ .login-card .form-control { background-color: rgba(255, 255, 255, 0.95); border: 1px solid rgba(0, 0, 0, 0.1); } .login-card .input-group-text { background-color: rgba(255, 255, 255, 0.95); border: 1px solid rgba(0, 0, 0, 0.1); } /* Botón más prominente en móvil */ .login-card .action-btn-primary { padding: 14px 16px !important; font-size: 1rem !important; border-radius: 12px; } /* Texto de enlaces más legible */ .login-card .text-muted { color: #475569 !important; } } /* RESPONSIVE GENERAL - TABLETS Y MÓVILES */ @media (max-width: 768px) { .container { padding-left: 16px; padding-right: 16px; } .navbar-custom { /* El alto lo fija el min-height:60px de la regla base; aqui no se reañade padding vertical para que no crezca respecto a /entradas/. */ padding: 0; } .navbar-custom .container-fluid { /* 20px como /entradas/ y como el escritorio: el badge oculto en movil deja sitio de sobra para el wordmark + los iconos. */ padding-left: 20px; padding-right: 20px; } /* Bootstrap le pone margin-right: 1rem a .navbar-brand, pensado para cuando la marca y el menu van pegados. Aqui el contenedor es space-between (van a los dos extremos), asi que ese margen no separa nada: solo resta ancho a la fila de iconos. Y en movil ese ancho se cuenta: a 375px la caja de contenido del header son 327px, y la marca (89 con el logo y la etiqueta de entorno) mas los cinco iconos de un admin que tambien es propietario (232) suman 321, que caben, pero con el margen suman 337 y la fila se iba a una segunda linea (header de 107px de alto en vez de 67). */ .navbar-custom .navbar-brand { margin-right: 0; } /* Cards */ .card-custom, .card { border-radius: 12px; } .card-body { padding: 1rem; } /* Modales */ .modal-dialog { margin: 12px; } .modal-content { border-radius: 12px; } /* Botones de acción */ .action-btn { padding: 10px 16px; font-size: 0.85rem; } /* Filtros en móvil - más compactos */ .filter-tabs { gap: 6px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .filter-tabs::-webkit-scrollbar { display: none; } .filter-tab { padding: 8px 12px; font-size: 0.8rem; white-space: nowrap; } /* Vista toggle más compacto */ .view-toggle { flex-shrink: 0; } .view-btn { display: flex; align-items: center; justify-content: center; height: 32px; width: 32px; padding: 0; border: none; background: transparent; color: var(--text-muted); border-radius: 6px; cursor: pointer; transition: all 0.2s ease; font-size: 0.75rem; font-weight: 500; white-space: nowrap; } .view-btn:hover { color: var(--text-secondary); } .view-btn.active { background: var(--card-bg); color: var(--primary-color); box-shadow: 0 1px 3px rgba(0,0,0,0.1); } /* Texto de botones de vista - oculto por defecto */ .view-btn-text { display: none; margin-left: 6px; } /* En pantallas grandes (>=992px), mostrar texto */ @media (min-width: 992px) { .view-toggle { padding: 4px; } .view-btn { width: auto; padding: 0 12px; height: 34px; } .view-btn svg { flex-shrink: 0; } .view-btn-text { display: inline; } } /* Botón nuevo */ .btn-nuevo { padding: 8px 14px; font-size: 0.8rem; } /* Tabla en móvil */ .table th, .table td { padding: 0.5rem 0.4rem; font-size: 0.8rem; } /* Status badge */ .status-btn { padding: 6px 10px; font-size: 0.7rem; min-width: 70px; } /* Formularios */ .form-control, .form-select { padding: 0.75rem 1rem; font-size: 0.95rem; } /* Espaciado vertical */ .py-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } } /* RESPONSIVE EXTRA PEQUEÑO - Móviles pequeños */ @media (max-width: 375px) { .navbar-custom .container-fluid { padding-left: 8px; padding-right: 8px; } .container { padding-left: 12px; padding-right: 12px; } .login-container { padding: 12px; padding-bottom: 8vh; /* Ajuste óptico */ } /* Filtros más compactos */ .filter-tab { padding: 6px 10px; font-size: 0.75rem; } .filter-count { min-width: 18px; height: 18px; font-size: 0.65rem; } /* Botones */ .action-btn { padding: 8px 12px; font-size: 0.8rem; } .btn-nuevo { padding: 6px 10px; font-size: 0.75rem; } .view-btn { width: 32px; height: 32px; } } /* INPUTS */ .form-control { background-color: var(--input-bg); border: 2px solid var(--border-color); border-radius: 12px; padding: 0.75rem 1rem; font-size: 0.95rem; color: var(--text-main); } .form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(0,0,0,0.05); outline: none; } .form-control::placeholder { color: var(--text-muted); } /* Form select */ .form-select { appearance: none; -webkit-appearance: none; background-color: #f8fafc; border: 1.5px solid var(--border-color); border-radius: 12px; padding: 10px 40px 10px 14px; font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; transition: all 0.2s ease; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } .form-select:hover { border-color: #cbd5e1; background-color: white; } .form-select:focus { border-color: #667eea; background-color: white; box-shadow: 0 0 0 3px rgba(102,126,234,0.12); outline: none; } /* File input styling */ input[type="file"].form-control { padding: 0; overflow: hidden; } input[type="file"].form-control::file-selector-button { padding: 0.75rem 1rem; margin-right: 1rem; background: var(--bg-secondary); border: none; border-right: 2px solid var(--border-color); color: var(--text-main); font-weight: 500; cursor: pointer; transition: all 0.2s ease; } input[type="file"].form-control::file-selector-button:hover { background: var(--bg-tertiary); } /* BOTONES (FIX HOVER) */ .btn-primary-custom { background-color: var(--primary-color); /* Negro por defecto */ border: 2px solid var(--primary-color); border-radius: 12px; padding: 12px 0; font-weight: 600; color: white; transition: all 0.2s ease; } /* Aquí estaba el error: forzamos color blanco y fondo oscuro al pasar el ratón */ .btn-primary-custom:hover { background-color: #333 !important; /* Gris muy oscuro */ border-color: #333 !important; color: white !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .btn-outline-custom { background: transparent; border: 2px solid #e2e8f0; border-radius: 50px; color: var(--text-muted); font-weight: 600; } .btn-outline-custom:hover { border-color: var(--primary-color); color: var(--primary-color); background: white; } /* BOTONES ADICIONALES */ .btn-info-custom { background-color: #0ea5e9; border: 2px solid #0ea5e9; border-radius: 50px; color: white; font-weight: 600; transition: all 0.2s ease; } .btn-info-custom:hover { background-color: #0284c7 !important; border-color: #0284c7 !important; color: white !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3); } .btn-warning-custom { background-color: #f59e0b; border: 2px solid #f59e0b; border-radius: 50px; color: white; font-weight: 600; transition: all 0.2s ease; } .btn-warning-custom:hover { background-color: #d97706 !important; border-color: #d97706 !important; color: white !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); } .btn-success-custom { background-color: #10b981; border: 2px solid #10b981; border-radius: 50px; color: white; font-weight: 600; transition: all 0.2s ease; } .btn-success-custom:hover { background-color: #059669 !important; border-color: #059669 !important; color: white !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); } /* UTILS */ .badge { padding: 0.4em 0.7em; font-size: 0.75rem; font-weight: 600; border-radius: 6px; } /* TARJETAS CON ESTILO CONSISTENTE */ .card { background: var(--card-bg); border-radius: 16px; border: 1px solid var(--border-color); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05); } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); transition: all 0.2s ease; } /* TABLAS CON ESTILO MINIMALISTA */ .table { border-radius: 12px; overflow: hidden; color: var(--text-main); } .table th { background-color: var(--bg-secondary); border-bottom: 2px solid var(--border-color); font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; } .table td { border-bottom: 1px solid var(--border-light); vertical-align: middle; background-color: var(--card-bg); } /* MODALES CON ESTILO REDONDEADO */ .modal-content { background: var(--card-bg); border-radius: 16px; border: none; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); color: var(--text-main); } .modal-header { border-bottom: 1px solid var(--border-light); padding: 1.5rem; } .modal-body { color: var(--text-main); } .modal-footer { border-top: 1px solid var(--border-light); padding: 1.5rem; } /* ALERTAS CON ESTILO MODERNO */ .alert { border-radius: 12px; border: none; padding: 1rem 1.5rem; } .alert-info { background-color: #e0f2fe; color: #0369a1; } .alert-success { background-color: #dcfce7; color: #166534; } .alert-warning { background-color: #fef3c7; color: #92400e; } .alert-danger { background-color: #fee2e2; color: #991b1b; } /* ESTILOS ADICIONALES PARA PANEL DE EVENTO */ .evento-header-gradient { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 16px 16px 0 0; } .evento-content-white { background: white; border-radius: 0 0 16px 16px; } .date-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .date-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .btn-edit-mode { transition: all 0.3s ease; } .form-control-lg { font-size: 1.25rem; padding: 0.75rem 1rem; } .evento-title-input { background: rgba(255,255,255,0.95); border: 2px solid rgba(255,255,255,0.3); color: #333; } .evento-title-input:focus { background: white; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } /* ACTION BUTTONS - Sistema de botones consistente */ .action-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; font-size: 0.8rem; font-weight: 600; border: 1.5px solid transparent; border-radius: 8px; text-decoration: none; cursor: pointer; transition: all 0.2s ease; } .action-btn-primary { background: #111; color: white; border-color: #111; } .action-btn-primary:hover { background: #333; border-color: #333; color: white; } .action-btn-secondary { background: var(--bg-secondary); color: var(--text-secondary); border-color: var(--border-color); } .action-btn-secondary:hover { background: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-main); } .action-btn-success { background: #16a34a; color: white; border-color: #16a34a; } .action-btn-success:hover { background: #15803d; border-color: #15803d; color: white; } .action-btn-warning { background: #f59e0b; color: white; border-color: #f59e0b; } .action-btn-warning:hover { background: #d97706; border-color: #d97706; color: white; } .action-btn-danger { background: #dc2626; color: white; border-color: #dc2626; } .action-btn-danger:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; color: white; } .action-btn-danger:disabled { background: #fecaca; border-color: #fecaca; color: #f87171; cursor: not-allowed; opacity: 0.7; } /* BACK LINK - Boton "Volver" consistente con SVG */ .back-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 10px; background: var(--card-bg); border: 1px solid var(--border-color); color: var(--text-secondary); font-size: 0.82rem; font-weight: 500; text-decoration: none; line-height: 1; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .back-link:hover { border-color: var(--accent); color: var(--accent); background: var(--card-bg); } .back-link svg { flex-shrink: 0; width: 14px; height: 14px; } .back-link span { line-height: 1; } .action-btn-danger-outline { background: transparent; color: #dc2626; border-color: #fecaca; } .action-btn-danger-outline:hover { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; } .action-btn-info { background: #0ea5e9; color: white; border-color: #0ea5e9; } .action-btn-info:hover { background: #0284c7; border-color: #0284c7; color: white; } /* Estado vacío centrado */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; gap: 1rem; flex-grow: 1; } /* Filtros que ocupan todo el ancho - 2x2 en móvil, 4 en desktop */ .filter-tabs.w-100 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .filter-tabs.w-100 .filter-tab { justify-content: center; } @media (min-width: 768px) { .filter-tabs.w-100 { display: flex; } .filter-tabs.w-100 .filter-tab { flex: 1; } } .empty-state p { font-size: 1.1rem; line-height: 1.6; } /* Tabla admin */ .admin-table th { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); } .admin-table td { vertical-align: middle; padding: 0.875rem 0.5rem; color: var(--text-main); } .admin-table a { color: var(--text-main); } .admin-table a:hover { color: var(--text-secondary); } /* Badges uniformes en tabla admin */ .admin-table .badge-tabla { display: inline-block; min-width: 80px; padding: 8px 14px; font-size: 0.8rem; font-weight: 500; text-align: center; border-radius: 8px; } /* Colores suaves para badges de estado (global) */ .badge.bg-success { background-color: #dcfce7 !important; color: #166534 !important; } .badge.bg-danger { background-color: #fee2e2 !important; color: #991b1b !important; } .badge.bg-secondary { background-color: #f1f5f9 !important; color: #475569 !important; } /* Dark mode badges */ [data-theme="dark"] .badge.bg-success { background-color: rgba(22, 163, 74, 0.2) !important; color: #4ade80 !important; } [data-theme="dark"] .badge.bg-danger { background-color: rgba(220, 38, 38, 0.2) !important; color: #f87171 !important; } [data-theme="dark"] .badge.bg-secondary { background-color: var(--bg-tertiary) !important; color: var(--text-secondary) !important; } /* ======================================== DARK MODE - Estilos adicionales ======================================== */ /* Empty states */ [data-theme="dark"] .empty-state svg { color: var(--text-muted); opacity: 0.5; } /* Usuario items (admin panel) */ [data-theme="dark"] .usuario-item { background: var(--bg-secondary); } [data-theme="dark"] .usuario-item:hover { background: var(--bg-tertiary); } [data-theme="dark"] .usuario-email { color: var(--text-main); } [data-theme="dark"] .usuario-instagram { color: var(--text-muted); } [data-theme="dark"] .usuario-instagram a { color: var(--text-muted); } [data-theme="dark"] .avatar-placeholder { background: var(--bg-tertiary); color: var(--text-muted); } /* Email auth form (admin) */ [data-theme="dark"] .email-auth-input-group { background: var(--bg-secondary); } [data-theme="dark"] .email-auth-input { color: var(--text-main); } [data-theme="dark"] .email-auth-input::placeholder { color: var(--text-muted); } [data-theme="dark"] .email-auth-check { background: var(--bg-tertiary); color: var(--text-muted); } [data-theme="dark"] .email-auth-check:has(input:checked) { background: rgba(220, 38, 38, 0.2); color: #f87171; } [data-theme="dark"] .email-auth-btn { background: rgba(37, 99, 235, 0.2); color: #60a5fa; } [data-theme="dark"] .email-auth-btn:hover { background: rgba(37, 99, 235, 0.3); } /* Action buttons (admin) */ [data-theme="dark"] .btn-accion-primary { background: rgba(37, 99, 235, 0.2); color: #60a5fa; } [data-theme="dark"] .btn-accion-primary:hover { background: rgba(37, 99, 235, 0.3); } [data-theme="dark"] .btn-accion-warning { background: rgba(217, 119, 6, 0.2); color: #fbbf24; } [data-theme="dark"] .btn-accion-warning:hover { background: rgba(217, 119, 6, 0.3); } [data-theme="dark"] .btn-accion-danger { background: rgba(220, 38, 38, 0.2); color: #f87171; } [data-theme="dark"] .btn-accion-danger:hover { background: rgba(220, 38, 38, 0.3); } /* Perfil modal in admin */ [data-theme="dark"] .perfil-modal-avatar { background: var(--bg-tertiary); color: var(--text-muted); } [data-theme="dark"] .perfil-modal-info { background: var(--bg-secondary); } [data-theme="dark"] .perfil-modal-row:not(:last-child) { border-bottom-color: var(--border-color); } [data-theme="dark"] .perfil-modal-label { color: var(--text-muted); } [data-theme="dark"] .perfil-modal-value { color: var(--text-main); } [data-theme="dark"] .perfil-modal-bio .perfil-modal-value { color: var(--text-secondary); } /* Reclamaciones items */ [data-theme="dark"] .reclamacion-item { background: var(--bg-secondary); } [data-theme="dark"] .reclamacion-item:hover { background: var(--bg-tertiary); } [data-theme="dark"] .reclamacion-instagram { color: var(--text-main); } [data-theme="dark"] .reclamacion-meta { color: var(--text-muted); } /* Filter tabs dark mode */ [data-theme="dark"] .filter-tab { background: var(--bg-secondary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .filter-tab:hover { background: var(--bg-tertiary) !important; } /* Todas/Todos - activo en dark mode */ [data-theme="dark"] .filter-tab[href*="todas"].active, [data-theme="dark"] .filter-tab[data-filter="all"].active { background: var(--bg-tertiary) !important; border-color: var(--text-muted) !important; color: var(--text-main) !important; } [data-theme="dark"] .filter-tab[href*="todas"].active .filter-count, [data-theme="dark"] .filter-tab[data-filter="all"].active .filter-count { background: var(--text-muted) !important; color: var(--bg-body) !important; } /* Programados - dark mode */ [data-theme="dark"] .filter-tab[data-filter="future"].active { border-color: #94a3b8 !important; color: #94a3b8 !important; } [data-theme="dark"] .filter-tab[data-filter="future"] .filter-count { background: rgba(148, 163, 184, 0.2) !important; color: #94a3b8 !important; } [data-theme="dark"] .filter-tab[data-filter="future"].active .filter-count { background: #94a3b8 !important; color: var(--bg-body) !important; } /* Abiertos - dark mode */ [data-theme="dark"] .filter-tab[data-filter="open"].active { border-color: #4ade80 !important; color: #4ade80 !important; } [data-theme="dark"] .filter-tab[data-filter="open"] .filter-count { background: rgba(74, 222, 128, 0.2) !important; color: #4ade80 !important; } [data-theme="dark"] .filter-tab[data-filter="open"].active .filter-count { background: #4ade80 !important; color: var(--bg-body) !important; } /* Pasados - dark mode */ [data-theme="dark"] .filter-tab[data-filter="past"].active { border-color: #f87171 !important; color: #f87171 !important; } [data-theme="dark"] .filter-tab[data-filter="past"] .filter-count { background: rgba(248, 113, 113, 0.2) !important; color: #f87171 !important; } [data-theme="dark"] .filter-tab[data-filter="past"].active .filter-count { background: #f87171 !important; color: var(--bg-body) !important; } /* Pagination dark mode */ [data-theme="dark"] .pagination .page-link { background: var(--bg-secondary); color: var(--text-muted); } [data-theme="dark"] .pagination .page-link:hover { background: var(--bg-tertiary); color: var(--text-main); } [data-theme="dark"] .pagination .page-item.disabled .page-link { background: transparent; color: var(--text-main); } /* Bootstrap .bg-light override */ [data-theme="dark"] .bg-light { background-color: var(--bg-secondary) !important; } /* Profile page sections */ [data-theme="dark"] .form-label { color: var(--text-main); } [data-theme="dark"] .form-label.fw-semibold { color: var(--text-main); } /* Instagram pending box */ [data-theme="dark"] .instagram-pending { background: var(--bg-secondary); } /* Código de reclamación */ [data-theme="dark"] .codigo-box-perfil { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-main); } /* Badge comunidad avatar */ [data-theme="dark"] .badge-comunidad-avatar { box-shadow: 0 0 0 2px var(--bg-secondary); } /* Search input icon */ [data-theme="dark"] .position-relative input + svg { stroke: var(--text-muted); } /* Bootstrap text-muted override - ensure it uses CSS variable */ [data-theme="dark"] .text-muted { color: var(--text-muted) !important; } /* Bootstrap text-secondary override */ [data-theme="dark"] .text-secondary { color: var(--text-secondary) !important; } /* Horizontal rules */ [data-theme="dark"] hr { border-color: var(--border-color); opacity: 1; } /* Bootstrap alert overrides */ [data-theme="dark"] .alert-warning { background-color: rgba(217, 119, 6, 0.15); border-color: rgba(217, 119, 6, 0.3); color: #fbbf24; } [data-theme="dark"] .alert-warning strong { color: #fcd34d; } [data-theme="dark"] .alert-warning a { color: #60a5fa; } /* Badge bg-dark in dark mode */ [data-theme="dark"] .badge.bg-dark { background-color: var(--bg-tertiary) !important; color: var(--text-main) !important; } /* Badge bg-warning */ [data-theme="dark"] .badge.bg-warning { background-color: rgba(245, 158, 11, 0.2) !important; color: #fbbf24 !important; } /* Confirm modal icons dark mode */ [data-theme="dark"] [style*="background: #fee2e2"] { background: rgba(220, 38, 38, 0.2) !important; } [data-theme="dark"] [style*="background: #dbeafe"] { background: rgba(37, 99, 235, 0.2) !important; } [data-theme="dark"] [style*="background: #fef3c7"] { background: rgba(217, 119, 6, 0.2) !important; } /* Reclamation items in perfil page */ [data-theme="dark"] .reclamacion-item-usuario.pendiente { background: rgba(217, 119, 6, 0.15); border-color: rgba(217, 119, 6, 0.3); } [data-theme="dark"] .reclamacion-item-usuario.aprobada { background: rgba(22, 163, 74, 0.15); border-color: rgba(22, 163, 74, 0.3); } [data-theme="dark"] .reclamacion-item-usuario.rechazada, [data-theme="dark"] .reclamacion-item-usuario.perdida { background: rgba(220, 38, 38, 0.15); border-color: rgba(220, 38, 38, 0.3); } [data-theme="dark"] .badge-pendiente { background: rgba(217, 119, 6, 0.2); color: #fbbf24; } [data-theme="dark"] .badge-aprobada { background: rgba(22, 163, 74, 0.2); color: #4ade80; } [data-theme="dark"] .badge-rechazada, [data-theme="dark"] .badge-perdida { background: rgba(220, 38, 38, 0.2); color: #f87171; } /* Instagram pending status */ [data-theme="dark"] .instagram-pending { background: var(--bg-secondary); border-radius: 10px; padding: 14px 16px; } /* ======================================== DARK MODE - Home page toggles ======================================== */ /* View toggle (Lista/Calendario) */ [data-theme="dark"] .view-toggle { background: var(--bg-secondary); } [data-theme="dark"] .view-btn { color: var(--text-muted); } [data-theme="dark"] .view-btn:hover { color: var(--text-secondary); } [data-theme="dark"] .view-btn.active { background: var(--bg-tertiary); color: var(--text-main); } /* Comunidad toggle - mismo estilo que view-toggle en dark mode */ [data-theme="dark"] .comunidad-toggle { background: var(--bg-secondary) !important; } [data-theme="dark"] .comunidad-toggle-slider { display: none !important; } [data-theme="dark"] .comunidad-toggle-btn { color: var(--text-muted); } [data-theme="dark"] .comunidad-toggle-btn:hover { color: var(--text-secondary); } [data-theme="dark"] .comunidad-toggle-btn.active { background: var(--bg-tertiary) !important; color: var(--text-main); border-radius: 6px; box-shadow: none; } /* Comunidad selector (Dashboard) en dark mode */ [data-theme="dark"] .comunidad-selector-item.active { background: var(--bg-tertiary); border-color: var(--primary-color); color: var(--text-main); } [data-theme="dark"] .comunidad-selector-item.active .comunidad-selector-icon { background: rgba(255,255,255,0.15) !important; color: var(--text-main) !important; } [data-theme="dark"] .comunidad-selector-row.active { background: var(--bg-tertiary); border-color: var(--primary-color); } [data-theme="dark"] .comunidad-selector-row.active .comunidad-selector-item { color: var(--text-main); } [data-theme="dark"] .comunidad-selector-row.active .comunidad-selector-icon { background: rgba(255,255,255,0.15) !important; color: var(--text-main) !important; } [data-theme="dark"] .comunidad-selector-row.active .preview-eye-btn { background: rgba(255,255,255,0.1); color: var(--text-secondary); } /* Btn Nuevo */ [data-theme="dark"] .btn-nuevo { background: rgba(14, 165, 233, 0.15); color: #38bdf8; } [data-theme="dark"] .btn-nuevo:hover { background: rgba(14, 165, 233, 0.25); color: #7dd3fc; } /* Calendar table */ [data-theme="dark"] #calendarTable { border-color: var(--border-color); } [data-theme="dark"] #calendarTable th { background: var(--bg-secondary) !important; color: var(--text-muted); border-color: var(--border-color); } [data-theme="dark"] #calendarTable td { background: var(--bg-primary); border-color: var(--border-color); color: var(--text-main); } [data-theme="dark"] #calendarTable td:hover { background: var(--bg-secondary); } [data-theme="dark"] .calendar-today { background: var(--bg-tertiary) !important; } [data-theme="dark"] .calendar-day-other { color: var(--text-muted) !important; background: var(--bg-body) !important; } /* Calendar event days - dark mode */ [data-theme="dark"] #calendarTable td.event-open { background: rgba(22, 163, 74, 0.25) !important; border-color: rgba(22, 163, 74, 0.4) !important; } [data-theme="dark"] #calendarTable td.event-open .day-number { color: #4ade80; } [data-theme="dark"] #calendarTable td.event-open .event-title { color: #86efac; } [data-theme="dark"] #calendarTable td.event-past { background: rgba(220, 38, 38, 0.2) !important; border-color: rgba(220, 38, 38, 0.35) !important; } [data-theme="dark"] #calendarTable td.event-past .day-number { color: #f87171; } [data-theme="dark"] #calendarTable td.event-past .event-title { color: #fca5a5; } [data-theme="dark"] #calendarTable td.event-future { background: rgba(100, 116, 139, 0.2) !important; border-color: rgba(100, 116, 139, 0.35) !important; } [data-theme="dark"] #calendarTable td.event-future .day-number { color: #94a3b8; } [data-theme="dark"] #calendarTable td.event-future .event-title { color: #cbd5e1; } /* ======================================== DARK MODE - Crear evento page ======================================== */ /* Section titles */ [data-theme="dark"] .text-dark { color: var(--text-main) !important; } /* Card section titles (h5, h6 inside cards) */ [data-theme="dark"] .card-custom h5.fw-bold, [data-theme="dark"] .card-custom h6.fw-bold, [data-theme="dark"] .card h5.fw-bold, [data-theme="dark"] .card h6.fw-bold { color: var(--text-main); } /* Bootstrap .card fuerza color de texto con su propia variable. En dark mode hay que sobreescribirlo para que el texto sea legible. */ [data-theme="dark"] .card, [data-theme="dark"] .card-custom, [data-theme="dark"] .card-body { color: var(--text-main); } /* Comunidad button (crear evento) */ [data-theme="dark"] .comunidad-btn-content { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-secondary); } [data-theme="dark"] .comunidad-btn:hover .comunidad-btn-content { background: var(--bg-tertiary); } /* Select buttons (Todas/Ninguna) */ [data-theme="dark"] .select-btn { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-muted); } [data-theme="dark"] .select-btn:hover { background: var(--bg-tertiary); border-color: var(--border-color); } /* Mini buttons */ [data-theme="dark"] .btn-mini { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-muted); } [data-theme="dark"] .btn-mini:hover { background: var(--bg-tertiary); color: var(--text-secondary); } /* Universidad button */ [data-theme="dark"] .universidad-btn-content { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-secondary); } /* Alert info (tip box) */ [data-theme="dark"] .alert-info { background-color: rgba(14, 165, 233, 0.15); border-color: rgba(14, 165, 233, 0.3); color: #7dd3fc; } [data-theme="dark"] .alert-info strong { color: #38bdf8; } /* Alert success (resolución aprobada) */ [data-theme="dark"] .alert-success { background-color: rgba(22, 163, 74, 0.15); border-color: rgba(22, 163, 74, 0.3); color: #86efac; } [data-theme="dark"] .alert-success strong { color: #4ade80; } /* Alert danger (resolución rechazada) */ [data-theme="dark"] .alert-danger { background-color: rgba(220, 38, 38, 0.15); border-color: rgba(220, 38, 38, 0.3); color: #fca5a5; } [data-theme="dark"] .alert-danger strong { color: #f87171; } /* Código box admin (reclamaciones) */ [data-theme="dark"] .codigo-box-admin { background: rgba(37, 99, 235, 0.15); border-color: rgba(37, 99, 235, 0.3); } [data-theme="dark"] .codigo-box-admin:hover { background: rgba(37, 99, 235, 0.25); } [data-theme="dark"] .codigo-texto-admin { color: #60a5fa; } [data-theme="dark"] .codigo-icono-admin { color: #3b82f6; } /* Pregunta items */ [data-theme="dark"] .pregunta-item { background: var(--bg-secondary); } [data-theme="dark"] .pregunta-item:hover { background: var(--bg-tertiary) !important; } [data-theme="dark"] .pregunta-item:has(input:checked) { background: rgba(102, 126, 234, 0.15) !important; } [data-theme="dark"] .pregunta-item label { color: var(--text-main); } /* Form check cards (tipo evento) */ [data-theme="dark"] .form-check.card { background: var(--bg-secondary); border-color: var(--border-color); } [data-theme="dark"] .form-check.card:hover { border-color: var(--primary-color); } [data-theme="dark"] .form-check.card label strong { color: var(--text-main); } /* ======================================== DARK MODE - Perfil page ======================================== */ /* Username heading in profile */ [data-theme="dark"] .card-custom h3 { color: var(--text-main); } /* Profile info box */ [data-theme="dark"] .card-custom .bg-light { background: var(--bg-secondary) !important; } [data-theme="dark"] .card-custom .bg-light .fw-semibold { color: var(--text-main); } /* Badge tipo cuenta */ [data-theme="dark"] .badge.bg-dark { background: var(--bg-tertiary) !important; color: var(--text-main) !important; } /* Instagram display - username text */ [data-theme="dark"] .instagram-display .fw-semibold { color: var(--text-main); } /* Botones sugerencia y eliminar cuenta */ [data-theme="dark"] .btn-sugerencia { background: transparent; border-color: rgba(59, 130, 246, 0.3); color: #60a5fa; } [data-theme="dark"] .btn-sugerencia:hover { background: rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.5); } [data-theme="dark"] .btn-eliminar-cuenta { background: transparent; border-color: rgba(239, 68, 68, 0.3); color: #f87171; } [data-theme="dark"] .btn-eliminar-cuenta:hover { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.5); } /* ======================================== DARK MODE - Resolver reclamación page ======================================== */ /* Card header - username */ [data-theme="dark"] .card-header h5 { color: var(--text-main); } /* Fecha labels */ [data-theme="dark"] h6.text-muted.text-uppercase { color: var(--text-muted) !important; } /* Fecha values */ [data-theme="dark"] .fw-medium { color: var(--text-main); } /* Mensaje del solicitante box */ [data-theme="dark"] .card-body .bg-light { background: var(--bg-secondary) !important; color: var(--text-main); } /* Action btn info */ [data-theme="dark"] .action-btn-info { background: rgba(14, 165, 233, 0.2); color: #38bdf8; border-color: rgba(14, 165, 233, 0.3); } [data-theme="dark"] .action-btn-info:hover { background: rgba(14, 165, 233, 0.3); color: #7dd3fc; } /* FILTER TABS - Sistema de filtros consistente */ .filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; } .filter-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); background: transparent; border: 1.5px solid var(--border-color); border-radius: 8px; cursor: pointer; transition: all 0.2s ease; text-decoration: none; } .filter-tab:hover { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-muted); } .filter-tab.active { background: var(--card-bg); border-color: var(--primary-color); color: var(--primary-color); } .filter-tab.active:hover { background: var(--bg-secondary); border-color: var(--primary-color); } .filter-tab.active .filter-count { background: var(--primary-color); color: var(--bg-body); } .filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; font-size: 0.7rem; font-weight: 600; border-radius: 6px; background: var(--bg-secondary); color: var(--text-muted); } /* ============================ TARJETAS DE EVENTOS (USUARIO) ============================ */ .evento-card { background: var(--card-bg); border-radius: 20px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; border: 1px solid var(--border-light); } .evento-card:hover { box-shadow: 0 8px 16px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08); transform: translateY(-4px); } .evento-card:active { transform: translateY(-2px); } /* Banner 16:9 con overlay sutil */ .evento-banner { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */ overflow: hidden; } .evento-banner::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, transparent 40%); pointer-events: none; } .evento-banner img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .evento-card:hover .evento-banner img { transform: scale(1.03); } /* Badges sobre el banner - más prominentes */ .evento-badge-abierto, .evento-badge-cerrado, .evento-badge-pendiente, .evento-badge-promo, .evento-badge-proximo, .evento-badge-desarrollo { position: absolute; top: 14px; right: 14px; padding: 8px 14px; font-size: 0.7rem; font-weight: 700; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.8px; z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,0.15); } .evento-badge-abierto { background: #22c55e; color: white; } .evento-badge-cerrado { background: rgba(255,255,255,0.95); color: #64748b; backdrop-filter: blur(4px); } .evento-badge-pendiente { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; } .evento-badge-promo { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } .evento-badge-proximo { background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%); color: white; } .evento-badge-desarrollo { background: rgba(255,255,255,0.95); color: #64748b; backdrop-filter: blur(4px); } /* Card en desarrollo: borde de franjas tipo obras */ .evento-card-desarrollo { position: relative; } .evento-card-desarrollo::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 3px solid transparent; background: repeating-linear-gradient( -45deg, #fbbf24, #fbbf24 5px, #1a1a1a 5px, #1a1a1a 10px ) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 10; pointer-events: none; } .evento-badge-test { background: #111; color: white; } /* Header simple (sin banner) */ .evento-header-simple { display: flex; justify-content: space-between; align-items: flex-start; padding: 20px 20px 0; } .evento-header-simple .evento-titulo { margin: 0; } /* Contenido de la tarjeta */ .evento-content { padding: 20px 20px 24px; display: flex; flex-direction: column; flex-grow: 1; } .evento-titulo { font-size: 1.15rem; font-weight: 700; color: var(--text-main); margin-bottom: 6px; line-height: 1.35; } .evento-descripcion { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 12px; line-height: 1.55; } .evento-cierre { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 16px; padding: 6px 12px; background: var(--bg-secondary); border-radius: 8px; width: fit-content; } .evento-cierre svg { color: var(--text-muted); } .evento-apertura { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: #0ea5e9; margin-bottom: 16px; padding: 6px 12px; background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%); border-radius: 8px; width: fit-content; font-weight: 500; } .evento-apertura svg { color: #0ea5e9; } .evento-action-container { margin-top: auto; } /* Botones de acción - más modernos */ .evento-action { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 16px 24px; font-size: 0.95rem; font-weight: 600; border: none; border-radius: 14px; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none; margin-top: auto; } .evento-action-test { background: #0f172a; color: white; } .evento-action-test:hover { background: #1e293b; color: white; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25); } .evento-action-test:active { transform: translateY(0); } .evento-action-grupos { background: #25D366; color: white; } .evento-action-grupos:hover { background: #1ebd57; color: white; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3); } .evento-action-grupos:active { transform: translateY(0); } .evento-action-resultados { background: #22c55e; color: white; } .evento-action-resultados:hover { background: #16a34a; color: white; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3); } .evento-action-resultados:active { transform: translateY(0); } .evento-action-promo { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } .evento-action-promo:hover { opacity: 0.95; color: white; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35); } .evento-action-disabled { background: var(--bg-secondary); color: var(--text-muted); cursor: not-allowed; } .evento-action-proximo { background: linear-gradient(135deg, rgba(14, 165, 233, 0.15) 0%, rgba(99, 102, 241, 0.15) 100%); color: #0ea5e9; cursor: default; font-weight: 600; } .evento-action-desarrollo { background: var(--bg-secondary); color: var(--text-muted); cursor: default; font-weight: 600; } .evento-action-pendiente { background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.15) 100%); color: #d97706; cursor: default; font-weight: 600; } a.evento-action-pendiente { cursor: pointer; } .evento-action-cerrado { background: linear-gradient(135deg, rgba(107, 114, 128, 0.12) 0%, rgba(75, 85, 99, 0.12) 100%); color: #6b7280; cursor: default; font-weight: 600; } /* Tarjeta de promoción - borde especial */ .evento-card-promo { --promo-color: #667eea; border: 2px solid var(--promo-color); } .evento-card-promo:hover { box-shadow: 0 20px 40px color-mix(in srgb, var(--promo-color) 20%, transparent); } /* Responsive: móvil */ @media (max-width: 576px) { .evento-card { border-radius: 12px; } .evento-content { padding: 10px 12px 14px; } .evento-titulo { font-size: 0.9rem; margin-bottom: 3px; } .evento-descripcion { font-size: 0.75rem; margin-bottom: 8px; } .evento-cierre, .evento-apertura { font-size: 0.7rem; padding: 4px 8px; margin-bottom: 10px; } .evento-action { padding: 10px 16px; font-size: 0.8rem; border-radius: 10px; gap: 6px; } .evento-badge-abierto, .evento-badge-cerrado, .evento-badge-pendiente, .evento-badge-promo, .evento-badge-proximo, .evento-badge-desarrollo { padding: 5px 9px; font-size: 0.6rem; top: 10px; right: 10px; border-radius: 8px; letter-spacing: 0.5px; } } /* Header de bienvenida para usuarios */ .user-welcome-header { text-align: center; margin-bottom: 32px; padding: 0 16px; max-width: 500px; margin-left: auto; margin-right: auto; } .user-welcome-header h1 { font-size: 1.75rem; font-weight: 700; color: var(--text-main); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-welcome-header p { font-size: 1rem; color: var(--text-muted); margin: 0; } @media (max-width: 576px) { .user-welcome-header { margin-bottom: 24px; max-width: 100%; } .user-welcome-header h1 { font-size: 1.35rem; } .user-welcome-header p { font-size: 0.9rem; } } /* Estado vacío mejorado */ .user-empty-state { text-align: center; padding: 60px 20px; } .user-empty-state svg { margin-bottom: 20px; opacity: 0.4; color: var(--text-muted); } .user-empty-state p { font-size: 1rem; color: var(--text-muted); } /* Alertas de usuario mejoradas */ .user-alert { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; background: var(--card-bg); box-shadow: 0 2px 8px rgba(0,0,0,0.06); border: 1px solid var(--border-light); } .user-alert-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; } .user-alert-warning .user-alert-icon { background: #fef3c7; color: #d97706; } .user-alert-info .user-alert-icon { background: #dbeafe; color: #2563eb; } .user-alert-content { flex: 1; min-width: 0; } .user-alert-content strong { display: block; font-size: 0.9rem; font-weight: 600; color: var(--text-main); line-height: 1.3; } .user-alert-content span { font-size: 0.8rem; color: var(--text-muted); } .user-alert-action { flex-shrink: 0; padding: 10px 18px; font-size: 0.85rem; font-weight: 600; border-radius: 10px; text-decoration: none; transition: all 0.2s ease; } .user-alert-warning .user-alert-action { background: #fef3c7; color: #92400e; } .user-alert-warning .user-alert-action:hover { background: #fde68a; } .user-alert-info .user-alert-action { background: #dbeafe; color: #1e40af; } .user-alert-info .user-alert-action:hover { background: #bfdbfe; } /* Variantes para banners opt-in. Especificidad encadenada (.user-alert-action.user-alert-action-success) para ganar a las reglas .user-alert-info .user-alert-action de light y dark mode. */ .user-alert .user-alert-action.user-alert-action-secondary { background: transparent; color: var(--text-muted); } .user-alert .user-alert-action.user-alert-action-secondary:hover { background: rgba(0, 0, 0, 0.05); color: var(--text-main); } .user-alert .user-alert-action.user-alert-action-success { background: #10b981; color: #ffffff; } .user-alert .user-alert-action.user-alert-action-success:hover { background: #059669; color: #ffffff; } [data-theme="dark"] .user-alert .user-alert-action.user-alert-action-success { background: #10b981; color: #ffffff; } [data-theme="dark"] .user-alert .user-alert-action.user-alert-action-success:hover { background: #34d399; color: #ffffff; } [data-theme="dark"] .user-alert .user-alert-action.user-alert-action-secondary { background: transparent; color: var(--text-muted); } [data-theme="dark"] .user-alert .user-alert-action.user-alert-action-secondary:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-main); } /* Reset por si el action se usa como