/* ========================================= JOULE — Design System Dark: #0B1220 | Amber: #F5B72B ========================================= */ :root { --bg-primary: #0B1220; --bg-secondary: #111827; --bg-card: #161F30; --bg-card-hover: #1C2840; --border: #1E2E47; --text-primary: #F0F4FF; --text-secondary: #8899B4; --text-muted: #4A5E78; --accent: #F5B72B; --accent-hover: #E0A520; --accent-glow: rgba(245, 183, 43, 0.15); --success: #22C55E; --danger: #EF4444; --info: #3B82F6; --radius: 12px; --radius-sm: 8px; --shadow: 0 4px 24px rgba(0, 0, 0, 0.4); --transition: 0.2s ease; } [data-theme="light"] { --bg-primary: #F5F7FA; --bg-secondary: #FFFFFF; --bg-card: #FFFFFF; --bg-card-hover: #F0F4FF; --border: #DDE3EE; --text-primary: #0B1220; --text-secondary: #4A5E78; --text-muted: #8899B4; --accent: #D4960F; --accent-hover: #B87D0A; --accent-glow: rgba(212, 150, 15, 0.12); --shadow: 0 4px 24px rgba(0, 0, 0, 0.08); } /* ========================================= Paleta PÚBLICA — Azul marino + Ámbar + Verde Solo en páginas con .skin-public en (landing + acceso). El área de empresa (empresa.html / dashboard.html) NO la lleva y conserva su paleta. No se redefinen --danger/--info/--radius: se heredan de :root. ========================================= */ .skin-public { --bg-primary: #1A2F5E; /* navy base (fondo de página/hero) */ --bg-secondary: #1E3666; /* sección alterna, un punto más clara */ --bg-card: #243F78; /* tarjetas / elevación */ --bg-card-hover: #2C4A86; /* hover de tarjeta */ --border: #324C84; /* borde navy */ --text-secondary: #A6B2CC; /* azul grisáceo claro sobre navy */ --text-muted: #6E7C9C; --success: #18A87A; /* verde "Disponible" / éxito */ --shadow: 0 8px 32px rgba(8, 16, 40, 0.45); /* --accent ámbar #F5B72B se mantiene (heredado de :root) */ } .skin-public[data-theme="light"] { --bg-primary: #F8F9FC; /* superficie clara de la paleta */ --bg-secondary: #FFFFFF; --bg-card: #FFFFFF; --bg-card-hover: #F1F4FA; --border: #E4E7EC; --text-primary: #1A2F5E; /* texto navy sobre claro */ --text-secondary: #5B6676; --text-muted: #8A94A6; --success: #18A87A; --shadow: 0 4px 24px rgba(26, 47, 94, 0.10); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; transition: background var(--transition), color var(--transition); } /* ---- Typography ---- */ h1, h2, h3, h4 { font-weight: 700; line-height: 1.2; } h1 { font-size: clamp(2rem, 5vw, 3.5rem); } h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); } h3 { font-size: 1.25rem; } p { color: var(--text-secondary); } .accent { color: var(--accent); } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: var(--radius-sm); font-size: 0.95rem; font-weight: 600; cursor: pointer; border: none; transition: all var(--transition); text-decoration: none; white-space: nowrap; } .btn-primary { background: var(--accent); color: #0B1220; } .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 6px 20px var(--accent-glow); } .btn-outline { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); } .btn-outline:hover { background: var(--accent-glow); transform: translateY(-1px); } .btn-ghost { background: var(--bg-card); color: var(--text-primary); border: 1.5px solid var(--border); } .btn-ghost:hover { background: var(--bg-card-hover); } .btn-danger { background: var(--danger); color: #fff; } .btn-success { background: var(--success); color: #fff; } .btn-sm { padding: 8px 18px; font-size: 0.85rem; } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* ---- Navbar ---- */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(16px, 5vw, 80px); height: 70px; background: rgba(11, 18, 32, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); transition: background var(--transition); } [data-theme="light"] .navbar { background: rgba(245, 247, 250, 0.9); } /* Navbar bajo la paleta pública: navy translúcido (oscuro) / claro de la paleta */ .skin-public .navbar { background: rgba(26, 47, 94, 0.85); } .skin-public[data-theme="light"] .navbar { background: rgba(248, 249, 252, 0.9); } .navbar-logo { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); text-decoration: none; display: flex; align-items: center; gap: 8px; } .navbar-logo span { color: var(--accent); } .navbar-links { display: flex; align-items: center; gap: 32px; list-style: none; } .navbar-links a { color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color var(--transition); } .navbar-links a:hover { color: var(--text-primary); } .navbar-actions { display: flex; align-items: center; gap: 12px; } /* Theme toggle */ .theme-toggle { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-card); border: 1.5px solid var(--border); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: all var(--transition); color: var(--text-secondary); } .theme-toggle:hover { background: var(--bg-card-hover); color: var(--accent); } /* Mobile menu */ .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; } .hamburger span { width: 24px; height: 2px; background: var(--text-primary); border-radius: 2px; transition: all var(--transition); } /* ---- Hero ---- */ .hero { min-height: 100vh; display: flex; align-items: center; padding: 120px clamp(16px, 5vw, 80px) 80px; position: relative; overflow: hidden; } .hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 70% 50%, rgba(245,183,43,0.06) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 20% 80%, rgba(59,130,246,0.05) 0%, transparent 60%); pointer-events: none; } .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(245,183,43,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(245,183,43,0.04) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; } .hero-content { max-width: 650px; position: relative; z-index: 1; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; background: var(--accent-glow); border: 1px solid rgba(245,183,43,0.3); border-radius: 100px; font-size: 0.8rem; font-weight: 600; color: var(--accent); margin-bottom: 24px; } .hero-title { margin-bottom: 20px; } .hero-subtitle { font-size: 1.1rem; margin-bottom: 40px; max-width: 520px; } .hero-cta { display: flex; gap: 16px; flex-wrap: wrap; } .hero-stats { display: flex; gap: 40px; margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--border); } .stat-value { font-size: 2rem; font-weight: 800; color: var(--accent); display: block; } .stat-label { font-size: 0.85rem; color: var(--text-muted); } /* ---- Sections ---- */ section { padding: clamp(60px, 8vw, 100px) clamp(16px, 5vw, 80px); } .section-header { text-align: center; margin-bottom: 60px; } .section-header h2 { margin-bottom: 12px; } .section-header p { max-width: 560px; margin: 0 auto; } /* ---- Services Grid ---- */ .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } .service-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; transition: all var(--transition); position: relative; overflow: hidden; } .service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); opacity: 0; transition: opacity var(--transition); } .service-card:hover { background: var(--bg-card-hover); border-color: rgba(245,183,43,0.3); transform: translateY(-4px); box-shadow: var(--shadow); } .service-card:hover::before { opacity: 1; } .service-icon { width: 52px; height: 52px; background: var(--accent-glow); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 20px; } .service-card h3 { margin-bottom: 10px; } /* ---- How it works ---- */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; counter-reset: steps; } .step { text-align: center; padding: 32px 24px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); position: relative; } .step-number { width: 48px; height: 48px; background: var(--accent); color: #0B1220; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 800; margin: 0 auto 20px; } .step h3 { margin-bottom: 8px; } /* ---- CTA Banner ---- */ .cta-banner { background: linear-gradient(135deg, var(--bg-card) 0%, rgba(245,183,43,0.08) 100%); border: 1px solid rgba(245,183,43,0.2); border-radius: var(--radius); padding: clamp(40px, 6vw, 80px); text-align: center; } .cta-banner h2 { margin-bottom: 16px; } .cta-banner p { margin-bottom: 32px; } .cta-banner .btn-primary { font-size: 1rem; padding: 14px 36px; } /* ---- Footer ---- */ footer { background: var(--bg-secondary); border-top: 1px solid var(--border); padding: 60px clamp(16px, 5vw, 80px) 30px; } .footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 40px; margin-bottom: 40px; } .footer-brand p { margin-top: 12px; font-size: 0.9rem; } .footer-col h4 { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 16px; } .footer-col ul { list-style: none; } .footer-col ul li + li { margin-top: 10px; } .footer-col ul a { color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; transition: color var(--transition); } .footer-col ul a:hover { color: var(--accent); } .footer-bottom { border-top: 1px solid var(--border); padding-top: 24px; display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; color: var(--text-muted); } /* ---- Páginas legales / informativas ---- */ .legal { max-width: 880px; margin: 0 auto; padding: 110px clamp(16px, 5vw, 40px) 90px; } .legal-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(28px, 5vw, 56px); } .legal-back { display: inline-block; color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; margin-bottom: 18px; transition: color var(--transition); } .legal-back:hover { color: var(--accent); } .legal h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 6px; } .legal-date { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 30px; } .legal h2 { font-size: 1.15rem; color: var(--accent); margin: 30px 0 10px; } .legal p, .legal li { color: var(--text-secondary); line-height: 1.75; font-size: 0.95rem; } .legal p { margin-bottom: 12px; } .legal ul { margin: 8px 0 14px 22px; } .legal li { margin-bottom: 6px; } .legal a { color: var(--accent); } .legal strong { color: var(--text-primary); font-weight: 600; } .legal-note { margin-top: 34px; padding: 16px 18px; background: var(--accent-glow); border: 1px solid rgba(245, 183, 43, 0.3); border-radius: var(--radius-sm); font-size: 0.88rem; color: var(--text-secondary); } /* ---- Auth Pages ---- */ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--bg-primary); } .auth-card { width: 100%; max-width: 480px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(28px, 5vw, 48px); box-shadow: var(--shadow); } .auth-logo { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 1.6rem; font-weight: 800; color: var(--text-primary); text-decoration: none; margin-bottom: 8px; } .auth-logo span { color: var(--accent); } .auth-header { text-align: center; margin-bottom: 32px; } .auth-header h2 { margin-top: 16px; margin-bottom: 8px; } .auth-header p { font-size: 0.9rem; } /* User type selector */ .user-type-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 28px; } .type-option { border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 16px; cursor: pointer; text-align: center; transition: all var(--transition); position: relative; } .type-option:hover { border-color: rgba(245,183,43,0.4); } .type-option.active { border-color: var(--accent); background: var(--accent-glow); } .type-option .type-icon { font-size: 1.5rem; margin-bottom: 6px; } .type-option .type-label { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); } .type-option .type-desc { font-size: 0.75rem; color: var(--text-muted); } /* Form */ .form-group { margin-bottom: 20px; } .form-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; } .form-input { width: 100%; padding: 12px 16px; background: var(--bg-primary); border: 1.5px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.95rem; transition: border-color var(--transition), box-shadow var(--transition); outline: none; } .form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .form-input::placeholder { color: var(--text-muted); } /* Hint text under a field */ .form-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 6px; } .form-hint.error-hint { color: var(--danger); } /* Field with trailing icon (password show/hide via bulb) */ .input-wrap { position: relative; } .input-wrap .form-input { padding-right: 46px; } .input-toggle { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 4px; line-height: 0; color: var(--text-muted); display: flex; align-items: center; justify-content: center; } /* Bombilla apagada: contorno gris */ .input-toggle .bulb { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: filter 0.2s ease, color 0.2s ease; } .input-toggle .bulb-rays { opacity: 0; transition: opacity 0.2s ease; } .input-toggle:hover { color: var(--text-secondary); } /* Bombilla encendida: ámbar, vidrio relleno, destellos y resplandor */ .input-toggle.on { color: var(--accent); } .input-toggle.on .bulb { filter: drop-shadow(0 0 5px rgba(245,183,43,0.65)); } .input-toggle.on .bulb-glass { fill: rgba(245,183,43,0.35); } .input-toggle.on .bulb-rays { opacity: 1; } /* Country select */ select.form-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238899B4' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; cursor: pointer; } /* Phone field with dial-code prefix */ .phone-group { display: flex; gap: 8px; } .dial-code { display: flex; align-items: center; padding: 0 14px; background: var(--bg-primary); border: 1.5px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 0.95rem; font-weight: 600; white-space: nowrap; flex-shrink: 0; } .phone-group .form-input { flex: 1; } /* Invalid field highlight */ .form-input.invalid { border-color: var(--danger); } .form-input.invalid:focus { box-shadow: 0 0 0 3px rgba(239,68,68,0.15); } .checkbox-group { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; } .checkbox-group input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; margin-top: 2px; } .checkbox-label { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; } .checkbox-label a { color: var(--accent); } .form-divider { position: relative; text-align: center; margin: 24px 0; } .form-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--border); } .form-divider span { position: relative; background: var(--bg-card); padding: 0 12px; font-size: 0.8rem; color: var(--text-muted); } .form-footer { text-align: center; margin-top: 24px; font-size: 0.875rem; color: var(--text-secondary); } .form-footer a { color: var(--accent); font-weight: 600; text-decoration: none; } .btn-full { width: 100%; justify-content: center; } /* Alert messages */ .alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 0.875rem; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; } .alert-success { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3); color: #22C55E; } .alert-error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: #EF4444; } .alert-info { background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.3); color: #3B82F6; } .alert-warning { background: rgba(245,183,43,0.1); border: 1px solid rgba(245,183,43,0.3); color: var(--accent); } /* ---- Admin Panel ---- */ .admin-layout { display: flex; min-height: 100vh; } .sidebar { width: 260px; flex-shrink: 0; background: var(--bg-secondary); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 24px 0; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; overflow: hidden; /* el scroll lo hace .sidebar-nav por dentro */ } .sidebar-logo { padding: 0 24px 24px; border-bottom: 1px solid var(--border); font-size: 1.3rem; font-weight: 800; display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text-primary); } .sidebar-logo span { color: var(--accent); } /* flex:1 + min-height:0 + overflow-y = el menú hace scroll interno cuando crece (antes se cortaba y "Cerrar sesión" quedaba fuera de pantalla). */ .sidebar-nav { padding: 16px 12px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .sidebar-nav::-webkit-scrollbar { width: 8px; } .sidebar-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 100px; } .sidebar-nav::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } .sidebar-section { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); padding: 8px 12px; margin-top: 8px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text-secondary); font-size: 0.9rem; font-weight: 500; transition: all var(--transition); cursor: pointer; border: none; background: none; width: 100%; text-align: left; } .nav-item:hover { background: var(--bg-card-hover); color: var(--text-primary); } .nav-item.active { background: var(--accent-glow); color: var(--accent); } .nav-item .nav-badge { margin-left: auto; background: var(--accent); color: #0B1220; font-size: 0.7rem; font-weight: 700; padding: 2px 7px; border-radius: 100px; } .admin-main { flex: 1; margin-left: 260px; padding: 32px; } .page-header { margin-bottom: 32px; } .page-header h1 { font-size: 1.75rem; margin-bottom: 4px; } .page-header p { font-size: 0.9rem; } /* Stats row */ .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 32px; } .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; } .stat-card-label { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; } .stat-card-value { font-size: 2rem; font-weight: 800; color: var(--text-primary); } .stat-card-sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; } .stat-card.accent-card { border-color: rgba(245,183,43,0.3); } .stat-card.accent-card .stat-card-value { color: var(--accent); } /* Table */ .table-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .table-card-header { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .table-card-header h3 { font-size: 1rem; } .data-table { width: 100%; border-collapse: collapse; } .data-table th { padding: 12px 20px; text-align: left; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); background: var(--bg-secondary); border-bottom: 1px solid var(--border); } .data-table td { padding: 14px 20px; font-size: 0.9rem; border-bottom: 1px solid var(--border); vertical-align: middle; } .data-table tr:last-child td { border-bottom: none; } .data-table tr:hover td { background: var(--bg-card-hover); } .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 100px; font-size: 0.75rem; font-weight: 600; } .badge-pending { background: rgba(245,183,43,0.15); color: var(--accent); } .badge-approved { background: rgba(34,197,94,0.15); color: var(--success); } .badge-rejected { background: rgba(239,68,68,0.15); color: var(--danger); } .badge-suspended { background: rgba(136,153,180,0.18); color: var(--text-muted); } .badge-user { background: rgba(59,130,246,0.15); color: var(--info); } .actions-cell { display: flex; gap: 8px; } /* Empty state */ .empty-state { text-align: center; padding: 60px 24px; color: var(--text-muted); } .empty-state .empty-icon { font-size: 2.5rem; margin-bottom: 12px; } .empty-state p { font-size: 0.9rem; } /* Modal */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity var(--transition); } .modal-overlay.open { opacity: 1; pointer-events: all; } .modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; width: 100%; max-width: 500px; transform: scale(0.95); transition: transform var(--transition); } .modal-overlay.open .modal { transform: scale(1); } .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .modal-header h3 { font-size: 1.1rem; } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 1.3rem; padding: 4px; } .modal-close:hover { color: var(--text-primary); } .modal-body { margin-bottom: 24px; } .detail-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; } .detail-row:last-child { border-bottom: none; } .detail-label { color: var(--text-muted); } .detail-value { font-weight: 600; color: var(--text-primary); } .modal-actions { display: flex; gap: 12px; justify-content: flex-end; } /* Toast */ .toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 300; display: flex; flex-direction: column; gap: 10px; } .toast { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 18px; min-width: 280px; max-width: 360px; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow); animation: slideIn 0.3s ease; font-size: 0.875rem; } .toast.success { border-left: 3px solid var(--success); } .toast.error { border-left: 3px solid var(--danger); } .toast.info { border-left: 3px solid var(--info); } @keyframes slideIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(120%); opacity: 0; } } .toast.hiding { animation: slideOut 0.3s ease forwards; } /* Spinner */ .spinner { width: 18px; height: 18px; border: 2px solid rgba(245,183,43,0.3); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.6s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } /* Pending approval message */ .pending-message { text-align: center; padding: 60px 32px; } .pending-message .pending-icon { font-size: 3rem; margin-bottom: 16px; } .pending-message h2 { margin-bottom: 12px; } /* ---- Admin: campañas por empresa (toggles) ---- */ .cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .cc-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--bg-card); cursor: pointer; transition: all var(--transition); opacity: 0.65; } .cc-card:hover { border-color: var(--accent); opacity: 1; } .cc-card.on { border-color: rgba(34,197,94,0.5); background: rgba(34,197,94,0.06); opacity: 1; } .cc-logo { width: 82px; height: 44px; background: #FFFFFF; border: 1px solid var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 6px; } .cc-logo img { max-width: 100%; max-height: 100%; } .cc-info { flex: 1; min-width: 0; } .cc-name { font-weight: 700; font-size: 0.92rem; color: var(--text-primary); } .cc-type { font-size: 0.75rem; color: var(--text-muted); } .cc-state { font-size: 1.05rem; flex-shrink: 0; } /* ---- Admin: detalles y archivos por campaña ---- */ .cd-file { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-primary); margin-bottom: 8px; } .cd-file .cd-file-name { flex: 1; font-size: 0.88rem; font-weight: 500; color: var(--text-primary); word-break: break-word; } .cd-file .cd-file-size { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; } /* Responsive */ @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .admin-main { margin-left: 0; padding: 20px; } .sidebar { transform: translateX(-100%); transition: transform var(--transition); } .sidebar.open { transform: translateX(0); } } @media (max-width: 640px) { .navbar-links { display: none; } .hamburger { display: flex; } .hero-stats { flex-wrap: wrap; gap: 24px; } .footer-grid { grid-template-columns: 1fr; } .user-type-selector { grid-template-columns: 1fr; } .modal-actions { flex-direction: column; } .actions-cell { flex-direction: column; } } /* ---- Auditoría de chats (admin, solo lectura) ---- */ .chat-audit { padding: 0; } .ca-wrap { display: grid; grid-template-columns: 260px 1fr; min-height: 440px; } .ca-list { border-right: 1px solid var(--border); max-height: 64vh; overflow-y: auto; padding: 8px; } .ca-ch { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 10px 12px; cursor: pointer; color: var(--text-primary); } .ca-ch:hover { background: var(--bg-card-hover); } .ca-ch.active { background: var(--accent-glow); border-color: color-mix(in srgb, var(--accent) 40%, transparent); } .ca-ch-ico { font-size: 1.1rem; flex: none; } .ca-ch-txt { display: flex; flex-direction: column; min-width: 0; } .ca-ch-name { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ca-ch-sub { font-size: 0.72rem; color: var(--text-muted); } .ca-msgs { display: flex; flex-direction: column; min-width: 0; } .ca-hint { padding: 40px; text-align: center; color: var(--text-muted); } .ca-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: 1.2rem; } .ca-head-name { font-size: 0.98rem; font-weight: 700; color: var(--text-primary); } .ca-head-sub { font-size: 0.76rem; color: var(--text-muted); } .ca-scroll { padding: 14px 18px; max-height: 56vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; } .ca-msg { border-left: 3px solid var(--border); padding: 4px 0 4px 12px; } .ca-msg.is-del { opacity: 0.65; border-left-color: var(--danger); } .ca-msg-head { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 3px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ca-msg-head strong { color: var(--text-primary); } .ca-role { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.04em; background: var(--bg-card-hover); color: var(--text-muted); padding: 1px 7px; border-radius: 100px; } .ca-time { color: var(--text-muted); } .ca-deleted { color: var(--danger); font-weight: 600; } .ca-edited { color: var(--accent); font-weight: 600; font-style: italic; } .ca-msg.is-del .ca-msg-body { text-decoration: line-through; } .ca-msg-body { font-size: 0.9rem; color: var(--text-primary); white-space: pre-wrap; word-break: break-word; } .ca-att { font-size: 0.8rem; color: var(--text-secondary); margin-top: 3px; } @media (max-width: 720px) { .ca-wrap { grid-template-columns: 1fr; } .ca-list { max-height: 200px; border-right: none; border-bottom: 1px solid var(--border); } }