/* * tema.css — paleta única de Arribaar para páginas hechas con componentes de Bootstrap * (tools/*, admin/register.php). Mismos colores y fuente que las secciones principales * (config_*.php, profile.php, reservations.php...). * * Uso: + Inter + bootstrap 5.3 + este archivo (después de bootstrap). */ /* ---------- Tokens (idénticos a las páginas principales) ---------- */ :root, [data-bs-theme="dark"] { --bg-darkest: #020617; --bg-darker: #0f172a; --bg-dark: #1e293b; --bg-card: #1e293b; --border: rgba(148,163,184,0.12); --border-strong: rgba(148,163,184,0.22); --text-primary: #f8fafc; --text-secondary: #94a3b8; --text-muted: #64748b; --accent: #60a5fa; --primary-gradient: linear-gradient(135deg,#4f46e5 0%,#8b5cf6 100%); --success: #10b981; --warning: #f59e0b; --danger: #ef4444; /* Variables de Bootstrap → tokens */ --bs-body-bg: var(--bg-darkest); --bs-body-color: var(--text-primary); --bs-emphasis-color: var(--text-primary); --bs-secondary-color: var(--text-secondary); --bs-tertiary-color: var(--text-muted); --bs-secondary-bg: var(--bg-dark); --bs-tertiary-bg: var(--bg-darker); --bs-border-color: var(--border-strong); --bs-border-color-translucent: var(--border); --bs-heading-color: var(--text-primary); --bs-link-color: var(--accent); --bs-link-hover-color: #93c5fd; --bs-link-color-rgb: 96,165,250; --bs-link-hover-color-rgb: 147,197,253; --bs-primary: #6366f1; --bs-primary-rgb: 99,102,241; --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } * { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { background: var(--bg-darkest); color: var(--text-primary); min-height: 100vh; } h1, h2, h3, h4, h5, h6 { font-weight: 600; } .text-muted, .form-text { color: var(--text-secondary) !important; } .text-light, .text-white { color: var(--text-primary) !important; } code { color: #f0abfc; } /* ---------- Tarjetas ---------- */ .card { --bs-card-bg: var(--bg-card); --bs-card-border-color: var(--border); --bs-card-cap-bg: var(--bg-darker); --bs-card-color: var(--text-primary); border-radius: .85rem; overflow: hidden; } .card-header { border-bottom: 1px solid var(--border-strong); color: var(--text-primary); font-weight: 500; } /* ---------- Tablas (antes: tabla blanca en Mensaje de Reserva) ---------- */ .table { --bs-table-bg: transparent; --bs-table-color: var(--text-primary); --bs-table-border-color: var(--border); --bs-table-hover-bg: rgba(148,163,184,.06); --bs-table-hover-color: var(--text-primary); --bs-table-striped-bg: rgba(148,163,184,.04); font-size: .875rem; } .table > thead th, .table > thead td { background: var(--bg-darker); color: var(--text-secondary); font-weight: 500; border-bottom-color: var(--border-strong); } /* ---------- Formularios (antes: etiquetas y placeholders ilegibles) ---------- */ .form-label, .form-check-label { color: var(--text-secondary); font-size: .82rem; font-weight: 500; margin-bottom: .35rem; } .form-control, .form-select { background-color: var(--bg-darker); border: 1px solid var(--border-strong); color: var(--text-primary); border-radius: .5rem; font-size: .875rem; } .form-control::placeholder { color: var(--text-muted); opacity: 1; } .form-control:focus, .form-select:focus { background-color: var(--bg-darker); border-color: var(--accent); color: var(--text-primary); box-shadow: 0 0 0 3px rgba(96,165,250,.12); } .form-control:disabled, .form-control[readonly] { background-color: var(--bg-dark); color: var(--text-secondary); } .form-select option { background: var(--bg-dark); color: var(--text-primary); } .form-check-input { background-color: var(--bg-darker); border-color: var(--border-strong); } .form-check-input:checked { background-color: #6366f1; border-color: #6366f1; } /* ---------- Botones ---------- */ .btn { border-radius: .5rem; font-weight: 500; font-size: .875rem; transition: opacity .18s, transform .18s; } .btn-sm { font-size: .78rem; border-radius: .4rem; } .btn-primary, .btn-primary:disabled { background: var(--primary-gradient); border: none; color: #fff; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--primary-gradient) !important; opacity: .88; transform: translateY(-1px); color: #fff; } .btn-success { background: rgba(16,185,129,.18); color: #6ee7b7; border: 1px solid rgba(16,185,129,.35); } .btn-success:hover, .btn-success:active { background: rgba(16,185,129,.28) !important; color: #a7f3d0 !important; border-color: rgba(16,185,129,.5) !important; } /* Variantes "outline" → estilo suave de las páginas principales (.btn-tbl-*) */ .btn-outline-light, .btn-outline-secondary { color: var(--text-primary); border: 1px solid var(--border-strong); background: transparent; } .btn-outline-light:hover, .btn-outline-secondary:hover { background: rgba(148,163,184,.12); color: var(--text-primary); border-color: var(--border-strong); } .btn-outline-info { background: rgba(96,165,250,.12); color: #93c5fd; border: 1px solid rgba(96,165,250,.28); } .btn-outline-warning { background: rgba(245,158,11,.12); color: #fcd34d; border: 1px solid rgba(245,158,11,.28); } .btn-outline-danger { background: rgba(239,68,68,.12); color: #fca5a5; border: 1px solid rgba(239,68,68,.28); } .btn-outline-info:hover { background: rgba(96,165,250,.22); color: #bfdbfe; border-color: rgba(96,165,250,.4); } .btn-outline-warning:hover { background: rgba(245,158,11,.22); color: #fde68a; border-color: rgba(245,158,11,.4); } .btn-outline-danger:hover { background: rgba(239,68,68,.22); color: #fecaca; border-color: rgba(239,68,68,.4); } .btn-close { filter: invert(1) brightness(.7); } /* ---------- Badges → píldoras suaves, como en Reservas/Facturación ---------- */ .badge { font-weight: 600; border-radius: 999px; padding: .3em .7em; border: 1px solid transparent; } .badge.bg-warning { background: rgba(245,158,11,.15) !important; color: #fcd34d !important; border-color: rgba(245,158,11,.28); } .badge.bg-success { background: rgba(16,185,129,.15) !important; color: #34d399 !important; border-color: rgba(16,185,129,.28); } .badge.bg-info { background: rgba(96,165,250,.15) !important; color: #93c5fd !important; border-color: rgba(96,165,250,.28); } .badge.bg-danger { background: rgba(239,68,68,.15) !important; color: #fca5a5 !important; border-color: rgba(239,68,68,.28); } .badge.bg-secondary, .badge.bg-light { background: rgba(148,163,184,.15) !important; color: #cbd5e1 !important; border-color: rgba(148,163,184,.28); } /* ---------- Alertas ---------- */ .alert { border-radius: .6rem; } .alert-success { background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.25); color: #6ee7b7; } .alert-danger { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.25); color: #fca5a5; } .alert-warning { background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.25); color: #fcd34d; } .alert-info { background: rgba(96,165,250,.12); border: 1px solid rgba(96,165,250,.25); color: #93c5fd; } .alert-link { color: inherit; } /* ---------- Pestañas ---------- */ .nav-tabs { --bs-nav-tabs-border-color: var(--border-strong); } .nav-tabs .nav-link { color: var(--text-secondary); border-radius: .5rem .5rem 0 0; } .nav-tabs .nav-link:hover { color: var(--text-primary); border-color: var(--border) var(--border) var(--border-strong); } .nav-tabs .nav-link.active { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-strong) var(--border-strong) var(--bg-card); } /* ---------- Modales ---------- */ .modal-content { background: var(--bg-dark); border: 1px solid var(--border-strong); border-radius: .85rem; color: var(--text-primary); } .modal-header { border-bottom: 1px solid var(--border); } .modal-footer { border-top: 1px solid var(--border); } .modal-title { font-weight: 600; font-size: 1rem; } /* ---------- Colores de íconos de tools/index.php ---------- */ .text-emerald { color: #34d399; } .text-info-light { color: #60a5fa; } .text-warning-light { color: #fbbf24; } /* ---------- Encabezado de página (título + botones): en celular los botones bajan de línea ---------- */ .container > .d-flex.justify-content-between.align-items-center.mb-3 { flex-wrap: wrap; gap: .75rem; }