/* * theme-light.css — Tema claro Portal de Mantenimiento TCC * Se activa añadiendo la clase "theme-light" al elemento * * Paleta: * --bg: #f4f5f9 fondo base gris claro * --surface: #ffffff cards y sidebars * --surface-alt: #f0f1f6 inputs y filas alternas * --border: #dde0ea líneas y bordes * --accent: #b08840 dorado oscuro (legible sobre blanco) * --text: #1e2132 texto principal * --muted: #6b7080 texto secundario * --dim: #a0a5b8 texto muy apagado */ /* ── Transición suave al cambiar tema ─────────────────────────────────────── */ html.theme-light *, html.theme-light *::before, html.theme-light *::after { transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease; } /* ── Base ─────────────────────────────────────────────────────────────────── */ html.theme-light body { background: #f4f5f9; color: #1e2132; } html.theme-light ::-webkit-scrollbar-track { background: #f4f5f9; } html.theme-light ::-webkit-scrollbar-thumb { background: #dde0ea; } html.theme-light ::-webkit-scrollbar-thumb:hover { background: #c4c8d8; } html.theme-light ::selection { background: #b0884033; color: #1e2132; } /* ── Tipografía ───────────────────────────────────────────────────────────── */ html.theme-light .h1 { color: #b08840; } html.theme-light .h2 { color: #1e2132; } html.theme-light .h3 { color: #1e2132; } html.theme-light .p { color: #6b7080; } html.theme-light .muted { color: #6b7080; } html.theme-light .dim { color: #a0a5b8; } html.theme-light .help { color: #a0a5b8; } /* ── Topbar ───────────────────────────────────────────────────────────────── */ html.theme-light .topbar { background: #ffffff; border-bottom: 1px solid #dde0ea; box-shadow: 0 1px 4px rgba(0,0,0,.06); } html.theme-light .iconbtn { border-color: #dde0ea; background: transparent; } html.theme-light .iconbtn:hover { border-color: #b08840; background: #b0884011; } html.theme-light .iconbtn__bar { background: #6b7080; } html.theme-light .iconbtn:hover .iconbtn__bar { background: #b08840; } html.theme-light .brand__logo { background: #b0884018; border-color: #b0884044; color: #b08840; } html.theme-light .brand__title { color: #b08840; } html.theme-light .brand__sub { color: #a0a5b8; } /* ── Sidenav ──────────────────────────────────────────────────────────────── */ html.theme-light .sidenav { background: #ffffff; border-right: 1px solid #dde0ea; } html.theme-light .sidenav__footer { border-top-color: #dde0ea; } html.theme-light .nav__sep { color: #a0a5b8; } html.theme-light .nav__item { color: #6b7080; border-left-color: transparent; } html.theme-light .nav__item:hover { background: #b0884011; color: #b08840; border-left-color: #b0884055; } html.theme-light .nav__item--active, html.theme-light .nav__item.active { background: #b0884018; color: #8a6828; font-weight: 600; border-left-color: #b08840; } /* ── Footer ───────────────────────────────────────────────────────────────── */ html.theme-light .footer { border-top-color: #dde0ea; } /* ── Cards ────────────────────────────────────────────────────────────────── */ html.theme-light .card { background: #ffffff; border-color: #dde0ea; box-shadow: 0 1px 3px rgba(0,0,0,.05); } html.theme-light .card:hover { border-color: #c4c8d8; } html.theme-light .card__title { color: #a0a5b8; } html.theme-light .card__sub { color: #a0a5b8; } /* ── Alert ────────────────────────────────────────────────────────────────── */ html.theme-light .alert { background: #f0f1f6; border-color: #dde0ea; } /* ── Botones ──────────────────────────────────────────────────────────────── */ html.theme-light .btn { background: #f0f1f6; border-color: #dde0ea; color: #6b7080; } html.theme-light .btn:hover { border-color: #b0884055; color: #b08840; background: #b0884011; } html.theme-light .btn--primary { background: #b08840; color: #ffffff; border-color: #b08840; } html.theme-light .btn--primary:hover { background: #9a7436; border-color: #9a7436; color: #ffffff; } html.theme-light .btn--danger { background: #e05c6a18; color: #c0404e; border-color: #e05c6a44; } html.theme-light .btn--danger:hover { background: #e05c6a2a; border-color: #e05c6a66; } html.theme-light .btn--ghost { background: transparent; color: #6b7080; border-color: #dde0ea; } html.theme-light .btn--ghost:hover { color: #b08840; border-color: #b0884055; background: #b0884011; } html.theme-light .btn--ok { background: #4ecb8d1a; color: #2a9e67; border-color: #4ecb8d44; } /* ── Formularios ──────────────────────────────────────────────────────────── */ html.theme-light .label { color: #6b7080; } html.theme-light .input, html.theme-light .select, html.theme-light textarea.input { background: #f8f9fc; border-color: #dde0ea; color: #1e2132; } html.theme-light .input:focus, html.theme-light .select:focus, html.theme-light textarea.input:focus { border-color: #b0884066; box-shadow: 0 0 0 3px #b0884011; } html.theme-light .input::placeholder { color: #a0a5b8; } html.theme-light .select { background-color: #f8f9fc; 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 d='M1 1l5 5 5-5' stroke='%236b7080' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 8px; } html.theme-light .select option { background: #ffffff; color: #1e2132; } /* ── Tablas ───────────────────────────────────────────────────────────────── */ html.theme-light .table thead th { background: #ffffff; color: #a0a5b8; border-bottom-color: #dde0ea; } html.theme-light .table tbody td { border-bottom-color: #e8eaf0; color: #1e2132; } html.theme-light .table tbody tr:nth-child(odd) { background: #ffffff; } html.theme-light .table tbody tr:nth-child(even) { background: #f4f5f9; } html.theme-light .table tbody tr:hover, html.theme-light .table tbody tr:nth-child(odd):hover, html.theme-light .table tbody tr:nth-child(even):hover { background: #e8eaf4; } html.theme-light .table tbody tr:hover td { color: #1e2132; } html.theme-light .table tbody tr.row--danger { background: #fde8ea; } html.theme-light .table tbody tr.row--warn { background: #fef0e6; } html.theme-light .table tbody tr.row--ok { background: #eafaf3; } html.theme-light .table td.td-code { color: #4472c8; } /* ── Notices ──────────────────────────────────────────────────────────────── */ html.theme-light .notice--info { background: #5b8dee0e; color: #3a62b0; border-left-color: #5b8dee; } html.theme-light .notice--warn { background: #f0914d0e; color: #b06020; border-left-color: #f0914d; } html.theme-light .notice--danger { background: #e05c6a0e; color: #a03040; border-left-color: #e05c6a; } html.theme-light .notice--ok { background: #4ecb8d0e; color: #1a8050; border-left-color: #4ecb8d; } /* ── Metrics ──────────────────────────────────────────────────────────────── */ html.theme-light .metric { background: #ffffff; border-color: #dde0ea; box-shadow: 0 1px 3px rgba(0,0,0,.04); } html.theme-light .metric:hover { border-color: #c4c8d8; } html.theme-light .metric__val { color: #1e2132; } html.theme-light .metric__lbl { color: #a0a5b8; } /* ── Progress ─────────────────────────────────────────────────────────────── */ html.theme-light .progress { background: #e8eaf0; } /* ── Links ────────────────────────────────────────────────────────────────── */ html.theme-light .a { color: #4472c8; } html.theme-light .a:hover { color: #b08840; } /* ── Utilidades de color ──────────────────────────────────────────────────── */ html.theme-light .text-accent { color: #b08840; } html.theme-light .text-muted { color: #6b7080; } html.theme-light .text-dim { color: #a0a5b8; } /* ── Modales (fondos inline en HTML) ─────────────────────────────────────── */ html.theme-light [style*="background:#1a1d27"], html.theme-light [style*="background: #1a1d27"] { background: #ffffff !important; border-color: #dde0ea !important; color: #1e2132 !important; box-shadow: 0 8px 32px rgba(0,0,0,.12) !important; } /* ── Iconbtn tema (botón de toggle) ──────────────────────────────────────── */ html.theme-light .theme-toggle-btn { border-color: #dde0ea; background: #f0f1f6; color: #6b7080; } html.theme-light .theme-toggle-btn:hover { border-color: #b08840; color: #b08840; background: #b0884011; }