/* ===== GOOGLE FONTS: INTER ===== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); /* ===== VARIABLES CSS - Fácil de personalizar ===== */ :root { /* Familia tipográfica */ --bs-font-sans-serif: 'Inter', system-ui, -apple-system, sans-serif; --bs-body-font-family: var(--bs-font-sans-serif); --bs-body-font-size: 0.95rem; --bs-body-font-weight: 400; --bs-body-line-height: 1.6; /* Colores principales (inspirado en diseños modernos 2025) */ --primary: #26fadf; --primary-hover: #3a56d4; --secondary: #64748b; --success: #10b981; --info: #06b6d4; --warning: #f59e0b; --danger: #ef4444; --light: #f8fafc; --dark: #0f172a; --muted: #94a3b8; /* Fondos y textos */ --body-bg: #f1f5f9; --body-color: #1e293b; --heading-color: #0f172a; --border-color: #e2e8f0; /* Navbar */ --navbar-bg: #1e293b; --navbar-text: #e2e8f0; --navbar-text-hover: #ffffff; } /* Modo oscuro (actívalo añadiendo class="dark" al o ) */ .dark { --body-bg: #0f172a; --body-color: #e2e8f0; --heading-color: #f1f5f9; --border-color: #334155; --light: #1e293b; --dark: #f8fafc; --primary: #3ee3c9; --navbar-bg: #0f172a; --navbar-text: #e2e8f0; --navbar-text-hover: #ffffff; } /* Aplicar variables a Bootstrap */ body { background-color: var(--body-bg); color: var(--body-color); transition: background-color 0.3s ease, color 0.3s ease; } h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 700; } /* Botones y colores Bootstrap */ .btn-primary { background-color: var(--primary); border-color: var(--primary); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-outline-primary { color: var(--primary); border-color: var(--primary); } .btn-outline-primary:hover { background-color: var(--primary); color: white; } .navbar { background-color: var(--navbar-bg) !important; transition: background-color 0.25s ease; } .navbar .nav-link, .navbar .navbar-brand, .navbar .btn-link, .navbar-text { color: var(--navbar-text) !important; transition: color 0.2s ease; } .navbar .nav-link:hover, .navbar .btn-link:hover { color: var(--navbar-text-hover) !important; } .text-primary { color: var(--primary) !important; } .bg-primary { background-color: var(--primary) !important; } .border { border-color: var(--border-color) !important; } /* Mejora de legibilidad */ .form-control, .form-select { font-size: 0.95rem; background-color: var(--bs-body-bg); border-color: var(--border-color); color: var(--body-color); } .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 0.2rem rgba(67, 97, 238, 0.25); } /* ============================================================= */ /* MODO OSCURO – FIXES COMPLETOS (Yii2 + Bootstrap 5 – 2025) */ /* ============================================================= */ .dark { color-scheme: dark; /* Fondos generales */ --bs-body-bg: #0f172a; --bs-body-color: #e2e8f0; /* Cards */ --bs-card-bg: #1e293b; --bs-card-border-color: #334155; /* Formularios */ --bs-form-control-bg: #1e293b; --bs-form-control-color: #e2e8f0; --bs-form-control-border: #334155; --bs-form-control-focus-border: #26fadf; --bs-form-control-placeholder: #94a3b8; /* Tablas */ --bs-table-bg: transparent; --bs-table-striped-bg: rgba(255,255,255,0.03); --bs-table-hover-bg: rgba(255,255,255,0.06); /* Alertas, badges, etc. */ --bs-light: #1e293b; --bs-dark: #f8fafc; } /* Aplicar las variables */ .dark body { background-color: var(--bs-body-bg); color: var(--bs-body-color); } /* Cards */ .dark .card { background-color: var(--bs-card-bg) !important; border-color: var(--bs-card-border-color) !important; color: var(--bs-body-color); } /* Formularios – el gran dolor de cabeza */ .dark .form-control, .dark .form-select, .dark .input-group-text { background-color: var(--bs-form-control-bg) !important; border-color: var(--bs-form-control-border) !important; color: var(--bs-form-control-color) !important; } .dark .form-control::placeholder, .dark .form-select::placeholder { color: var(--bs-form-control-placeholder) !important; } .dark .form-control:focus, .dark .form-select:focus { background-color: var(--bs-form-control-bg) !important; color: var(--bs-form-control-color) !important; border-color: var(--bs-form-control-focus-border) !important; box-shadow: 0 0 0 0.2rem rgba(67, 97, 238, 0.25) !important; } /* Tablas */ .dark .table { --bs-table-bg: var(--bs-table-bg); --bs-table-striped-bg: var(--bs-table-striped-bg); --bs-table-hover-bg: var(--bs-table-hover-bg); color: var(--bs-body-color); } .dark .table-bordered { border-color: #334155; } /* Alertas */ .dark .alert { color: #e2e8f0; } .dark .alert-light { background-color: #1e293b; border-color: #334155; } /* Badges, progress, etc. */ .dark .badge.bg-light { background-color: #334155 !important; } .dark .progress { background-color: #334155; } /* Fix para modales */ .dark .modal-content { background-color: #1e293b; color: #e2e8f0; } .dark .modal-header, .dark .modal-footer { border-color: #334155; } /* ============================================================= */ /* LOGIN BONITO 2025 – Modo claro y oscuro automático */ /* ============================================================= */ .login-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; /* Fondo degradado brutal (cambia los colores si quieres) */ background: linear-gradient(-45deg, #26fadf, #3b82f6, #06b6d4, #0ea5e9); background-size: 400% 400%; animation: gradientShift 15s ease infinite; } /* Modo oscuro: fondo más oscuro y elegante */ .dark .login-container { background: linear-gradient(-45deg, #0f172a, #1e293b, #334155, #475569); } /* Caja del login */ .login-box { background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 1rem; padding: 3rem 2.5rem; width: 100%; max-width: 420px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); } /* Modo claro: caja más clara */ html:not(.dark) .login-box { background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(255, 255, 255, 0.3); } /* Inputs */ .login-form .form-control { background-color: rgba(30, 41, 59, 0.8); border: 1px solid rgba(148, 163, 184, 0.3); color: white; border-radius: 0.75rem; padding: 0.75rem 1rem; } .login-form .form-control:focus { background-color: rgba(30, 41, 59, 0.9); border-color: #26fadf; box-shadow: 0 0 0 0.2rem rgba(67, 97, 238, 0.3); color: white; } .login-form .form-control::placeholder { color: #94a3b8; } /* Botón principal */ .btn-primary { border-radius: 0.75rem; font-weight: 600; padding: 0.75rem; } /* Animación del fondo */ @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* TEXTOS DEL LOGIN – se ven perfectos en modo claro y oscuro */ .login-box h1, .login-box .h3, .login-box p, .login-box label, .login-box a { color: white !important; /* siempre blanco en modo oscuro */ text-shadow: 0 1px 3px rgba(0,0,0,0.4); } html:not(.dark) .login-box h1, html:not(.dark) .login-box .h3, html:not(.dark) .login-box p, html:not(.dark) .login-box label, html:not(.dark) .login-box a { color: #0f172a !important; /* gris muy oscuro en modo claro */ text-shadow: none; } /* El placeholder también necesita fix en modo claro */ html:not(.dark) .login-form .form-control { background-color: rgba(15, 23, 42, 0.12) !important; color: #0f172a !important; } html:not(.dark) .login-form .form-control::placeholder { color: #64748b !important; } /* ============================================================= */ /* MyTickets BONITO 2025 – Modo claro y oscuro automático */ /* ============================================================= */ .site-mytickets { min-height: 100vh; display: flex; align-items: center; justify-content: center; /* Fondo degradado brutal (cambia los colores si quieres) */ background: linear-gradient(-45deg, #26fadf, #3b82f6, #06b6d4, #0ea5e9); background-size: 400% 400%; animation: gradientShift 15s ease infinite; } /* Modo oscuro: fondo más oscuro y elegante */ .dark .site-mytickets { background: linear-gradient(-45deg, #0f172a, #1e293b, #334155, #475569); } /* Caja del login */ .mytickets-box { background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 1rem; padding: 3rem 2.5rem; width: 100%; max-width: 420px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); } /* Modo claro: caja más clara */ html:not(.dark) .mytickets-box { background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(255, 255, 255, 0.3); } /* Inputs */ .mytickets-form .form-control { background-color: rgba(30, 41, 59, 0.8); border: 1px solid rgba(148, 163, 184, 0.3); color: white; border-radius: 0.75rem; padding: 0.75rem 1rem; } .mytickets-form .form-control:focus { background-color: rgba(30, 41, 59, 0.9); border-color: #26fadf; box-shadow: 0 0 0 0.2rem rgba(67, 97, 238, 0.3); color: white; } .mytickets-form .form-control::placeholder { color: #94a3b8; } /* Botón principal */ .btn-primary { border-radius: 0.75rem; font-weight: 600; padding: 0.75rem; } /* Animación del fondo */ @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* TEXTOS DEL LOGIN – se ven perfectos en modo claro y oscuro */ .mytickets-box h1, .mytickets-box .h3, .mytickets-box p, .mytickets-box label, .mytickets-box a { color: white !important; /* siempre blanco en modo oscuro */ text-shadow: 0 1px 3px rgba(0,0,0,0.4); } html:not(.dark) .mytickets-box h1, html:not(.dark) .mytickets-box .h3, html:not(.dark) .mytickets-box p, html:not(.dark) .mytickets-box label, html:not(.dark) .mytickets-box a { color: #0f172a !important; /* gris muy oscuro en modo claro */ text-shadow: none; } /* El placeholder también necesita fix en modo claro */ html:not(.dark) .mytickets-form .form-control { background-color: rgba(15, 23, 42, 0.12) !important; color: #0f172a !important; } html:not(.dark) .mytickets-form .form-control::placeholder { color: #64748b !important; } /* BOTÓN HAMBURGUESA (toggler) – perfecto en los dos modos */ .navbar-toggler { border-color: rgba(255, 255, 255, 0.4) !important; padding: 0.35rem 0.6rem; } /* Icono de las 3 rayitas */ .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; } /* En modo claro → color oscuro para que se vea bien */ html:not(.dark) .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; } /* ============================================================= */ /* KARTIK GRIDVIEW – Modo oscuro completo (2025) */ /* ============================================================= */ .dark .grid-view table { background-color: #1e293b !important; color: #e2e8f0; } .dark .grid-view th, .dark .grid-view th a { background-color: #0f172a !important; color: #94a3b8 !important; border-bottom: 1px solid #334155 !important; } .dark .grid-view td { background-color: #1e293b !important; border-bottom: 1px solid #334155 !important; color: #cbd5e1; } .dark .grid-view .table-striped tbody tr:nth-of-type(odd) td { background-color: rgba(255,255,255,0.03) !important; } .dark .grid-view .table-hover tbody tr:hover td { background-color: rgba(67, 97, 238, 0.15) !important; } /* Paginación */ .dark .pagination .page-item .page-link { background-color: #1e293b; border-color: #334155; color: #e2e8f0; } .dark .pagination .page-item.active .page-link { background-color: var(--primary); border-color: var(--primary); } /* Filtros (ya los cambia Kartik, pero por si acaso) */ .dark .grid-view .filters input, .dark .grid-view .filters select { background-color: #0f172a !important; color: #e2e8f0 !important; border-color: #334155 !important; }