/* ============================================================ SISTEMA DE RESERVA DE SALAS — Estilos globales Paleta basada en el diseño del wireframe aprobado ============================================================ */ :root { /* Paleta alineada al sitio institucional (uarm.edu.pe): coral #EA4E4A como acento de marca, grises cálidos #2C2C2C/#767C6C/#A4A89C, Open Sans. */ --surface-0: #f4f4f4; --surface-1: #f7f7f7; --surface-2: #ffffff; --text-primary: #2c2c2c; --text-secondary: #6b6b64; --text-muted: #a4a89c; --border: rgba(44,44,44,0.10); --border-strong: rgba(44,44,44,0.18); --bg-accent: #fceceb; --text-accent: #c93430; --border-accent: #f0aeab; --fill-accent: #ea4e4a; /* Azul de estado "Aprobada"/"En curso" — independiente del acento de marca para que no compita visualmente con el rojo de "Rechazada" cuando la marca (arriba) es coral. Ver EstadoUI.php. */ --bg-info: #e6f1fb; --text-info: #185fa5; --border-info: #85b7eb; --bg-success: #eaf3de; --text-success: #3b6d11; --border-success: #97c459; --bg-warning: #faeeda; --text-warning: #854f0b; --border-warning: #ef9f27; --bg-danger: #fcebeb; --text-danger: #a32d2d; --border-danger: #f09595; --bg-pro: #eeedfe; --text-pro: #534ab7; --border-pro: #afa9ec; --radius: 8px; --font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; /* Estados hover que no son un simple aclarar/oscurecer del color base — necesitan su propio valor por tema (btn-primary usa --text-primary como fondo, que se invierte en oscuro, así que "oscurecer un poco" en claro sería "aclarar un poco" en oscuro). */ --btn-primary-hover: #333333; --btn-danger-hover: #f7c1c1; --login-gradient: linear-gradient(135deg, #e8f0fe 0%, #f1efe8 50%, #faeeda 100%); } /* ── Modo oscuro ──────────────────────────────────────────────── Automático (sigue el sistema operativo) cuando no hay preferencia guardada, o manual vía el botón del nav (data-theme, en localStorage). El script de resolución de tema fija data-theme="light"/"dark" en antes de pintar, así que estas dos reglas cubren ambos caminos sin pisarse. */ :root[data-theme="dark"] { --surface-0: #1c1a19; --surface-1: #242120; --surface-2: #2a2726; --text-primary: #f0ede9; --text-secondary: #b8b2ac; --text-muted: #837c76; --border: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.20); --bg-accent: #3a2422; --text-accent: #f0918c; --border-accent: #7a423f; --fill-accent: #ea4e4a; --bg-info: #1c2c3a; --text-info: #7cb3e8; --border-info: #3a5a7a; --bg-success: #1c2a14; --text-success: #8fc25f; --border-success: #3d5a28; --bg-warning: #2e2212; --text-warning: #e0a855; --border-warning: #6b4f1f; --bg-danger: #2e1c1c; --text-danger: #e28080; --border-danger: #6b3a3a; --bg-pro: #211f38; --text-pro: #a89ce8; --border-pro: #453d75; --btn-primary-hover: #ddd9d4; --btn-danger-hover: #4a2c2c; --login-gradient: linear-gradient(135deg, #1c2733 0%, #201d1c 50%, #2e2212 100%); } /* ── Alto contraste ───────────────────────────────────────────── Modo aparte, combinable con claro u oscuro (data-contrast="high" en , junto a data-theme). Bordes marcados, sin grises suaves, texto casi al extremo de la escala — para cumplir WCAG AAA donde el resto del sistema solo apunta a AA. */ :root[data-contrast="high"] { --surface-0: #f0f0f0; --surface-1: #f5f5f5; --surface-2: #ffffff; --text-primary: #000000; --text-secondary: #2c2c2c; --text-muted: #4a4a4a; --border: rgba(0,0,0,0.35); --border-strong: rgba(0,0,0,0.65); --bg-accent: #ffe5e3; --text-accent: #8a1410; --border-accent: #c93430; --fill-accent: #c93430; --bg-info: #dceeff; --text-info: #08315c; --border-info: #185fa5; --bg-success: #dcf0c8; --text-success: #1f3d09; --border-success: #3b6d11; --bg-warning: #ffe9c2; --text-warning: #4a2e05; --border-warning: #854f0b; --bg-danger: #ffd9d9; --text-danger: #6e1414; --border-danger: #a32d2d; --bg-pro: #ded9ff; --text-pro: #241a5c; --border-pro: #534ab7; --btn-primary-hover: #2c2c2c; --btn-danger-hover: #ffb8b8; } :root[data-theme="dark"][data-contrast="high"] { --surface-0: #000000; --surface-1: #0d0d0d; --surface-2: #141414; --text-primary: #ffffff; --text-secondary: #e8e8e8; --text-muted: #b8b8b8; --border: rgba(255,255,255,0.35); --border-strong: rgba(255,255,255,0.65); --bg-accent: #3d0f0d; --text-accent: #ff9d98; --border-accent: #ff6f68; --fill-accent: #ff6f68; --bg-info: #06233d; --text-info: #9dcbff; --border-info: #4d94e0; --bg-success: #10230a; --text-success: #a8e276; --border-success: #5a9130; --bg-warning: #3d2a08; --text-warning: #ffc978; --border-warning: #cc8a2a; --bg-danger: #3d0f0f; --text-danger: #ff9d9d; --border-danger: #cc4f4f; --bg-pro: #16123d; --text-pro: #c4baff; --border-pro: #7060c9; --btn-primary-hover: #dddddd; --btn-danger-hover: #5a1f1f; } /* ── Reset ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; } body { font-family: var(--font-sans); background: var(--surface-0); color: var(--text-primary); line-height: 1.5; min-height: 100vh; } a { color: var(--text-accent); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; } /* ── Navegación ─────────────────────────────────────────────── */ .nav { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: 60px; background: var(--surface-2); border-bottom: 0.5px solid var(--border); position: sticky; top: 0; z-index: 100; gap: 16px; } .nav-brand { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--text-primary); white-space: nowrap; text-decoration: none; } .nav-icon { font-size: 20px; color: var(--text-accent); } .nav-logo-img { height: 44px; width: auto; object-fit: contain; max-width: 200px; } /* Logo claro/oscuro: si no se subió uno para oscuro, el claro se queda puesto en ambos temas (mismo comportamiento que antes de tener esta opción). */ .nav-logo-oscuro { display: none; } :root[data-theme="dark"] .nav-logo-claro { display: none; } :root[data-theme="dark"] .nav-logo-oscuro { display: inline-block; } .nav-hamburger { display: none; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0.5px solid var(--border-strong); border-radius: var(--radius); background: transparent; color: var(--text-primary); cursor: pointer; flex-shrink: 0; margin-left: auto; } .nav-links { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; } .nav-link { display: flex; align-items: center; gap: 5px; padding: 6px 10px; font-size: 13px; color: var(--text-secondary); border-radius: var(--radius); text-decoration: none; white-space: nowrap; } .nav-link:hover { background: var(--surface-1); color: var(--text-primary); text-decoration: none; } .nav-link.active { color: var(--text-primary); font-weight: 500; } .nav-user { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .nav-user-info { display: flex; flex-direction: column; line-height: 1.2; } .nav-user-name { font-size: 13px; font-weight: 500; color: var(--text-primary); } .nav-user-area { font-size: 11px; color: var(--text-muted); } /* Dropdown admin */ .nav-dropdown { position: relative; } .nav-dropdown > .nav-link { cursor: pointer; } .nav-dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: var(--surface-2); border: 0.5px solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,0.08); min-width: 180px; z-index: 200; overflow: hidden; } .nav-dropdown.open .nav-dropdown-menu { display: block; } /* Dropdown de perfil — clase aparte de .nav-dropdown a propósito: las reglas mobile de abajo convierten .nav-dropdown en un submenú anidado estático pensado solo para "Admin" dentro del drawer lateral; si el perfil compartiera esa clase, se rompería en mobile. */ .profile-dropdown { position: relative; } .profile-dropdown-menu { display: none; position: absolute; top: 100%; right: 0; min-width: 220px; background: var(--surface-2); border: 0.5px solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,0.08); z-index: 200; overflow: hidden; } .profile-dropdown.open .profile-dropdown-menu { display: block; } .profile-dropdown-info { padding: 10px 14px; border-bottom: 0.5px solid var(--border); } .profile-dropdown-info .nombre { font-size: 13px; font-weight: 500; color: var(--text-primary); } .profile-dropdown-info .detalle { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .profile-dropdown-item-static { display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: 13px; color: var(--text-muted); cursor: default; } .nav-user-trigger { display: flex; align-items: center; gap: 8px; cursor: pointer; } .nav-dropdown-item { display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: 13px; color: var(--text-primary); text-decoration: none; } .nav-dropdown-item:hover { background: var(--surface-1); text-decoration: none; } /* ── Avatar ─────────────────────────────────────────────────── */ .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--bg-accent); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--text-accent); flex-shrink: 0; } /* ── Layout principal ───────────────────────────────────────── */ .main-content { min-height: calc(100vh - 60px); } .page-container { max-width: 1140px; margin: 0 auto; padding: 24px 32px; } .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .page-title { font-size: 18px; font-weight: 500; color: var(--text-primary); } /* ── Botones ────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 0.5px solid var(--border-strong); border-radius: 22px; font-size: 13px; font-weight: 400; background: transparent; color: var(--text-primary); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .12s; } .btn:hover { background: var(--surface-1); text-decoration: none; } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--text-primary); color: var(--surface-2); border-color: var(--text-primary); } .btn-primary:hover { background: var(--btn-primary-hover); } .btn-ghost { border-color: transparent; color: var(--text-secondary); } .btn-ghost:hover { color: var(--text-primary); background: var(--surface-1); } .btn-danger { border-color: var(--border-danger); color: var(--text-danger); background: var(--bg-danger); } .btn-danger:hover { background: var(--btn-danger-hover); } .btn-sm { padding: 4px 12px; font-size: 12px; border-radius: 18px; } .btn-block { width: 100%; justify-content: center; } .login-social-btns { display: flex; flex-direction: column; gap: 8px; } .btn-ms, .btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 9px 14px; border: 1px solid #dadce0; border-radius: var(--radius); font-size: 13px; font-weight: 500; background: #fff; color: #3c4043; cursor: pointer; text-decoration: none; transition: background .15s, box-shadow .15s; } .btn-ms:hover, .btn-google:hover { background: #f8f9fa; box-shadow: 0 1px 3px rgba(0,0,0,.12); text-decoration: none; } .btn-approve { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border: 0.5px solid var(--border-success); background: var(--bg-success); color: var(--text-success); border-radius: 18px; font-size: 12px; cursor: pointer; } .btn-reject { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border: 0.5px solid var(--border-danger); background: var(--bg-danger); color: var(--text-danger); border-radius: 18px; font-size: 12px; cursor: pointer; } .icon-btn { border: none; background: none; cursor: pointer; color: var(--text-muted); font-size: 16px; padding: 2px 4px; border-radius: var(--radius); } .icon-btn:hover { color: var(--text-primary); } .icon-btn-on { color: var(--text-accent); background: var(--bg-accent); } .icon-btn-on:hover { color: var(--text-accent); } .btn-row { display: flex; gap: 8px; margin-top: 16px; justify-content: flex-end; } /* ── Badges ─────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 2px 8px; border-radius: var(--radius); font-weight: 500; white-space: nowrap; } .badge-green { background: var(--bg-success); color: var(--text-success); } .badge-amber { background: var(--bg-warning); color: var(--text-warning); } .badge-blue { background: var(--bg-info); color: var(--text-info); } .badge-red { background: var(--bg-danger); color: var(--text-danger); } .badge-gray { background: var(--surface-1); color: var(--text-muted); border: 0.5px solid var(--border); } .badge-purple { background: var(--bg-pro); color: var(--text-pro); } /* ── Cards ──────────────────────────────────────────────────── */ .card { background: var(--surface-2); border: 0.5px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 16px; } .card-title { font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 14px; } /* ── Formularios ────────────────────────────────────────────── */ .form-group { display: flex; flex-direction: column; gap: 4px; } .form-label { font-size: 12px; color: var(--text-secondary); } .form-input { padding: 8px 10px; border: 0.5px solid var(--border-strong); border-radius: var(--radius); font-size: 13px; line-height: normal; background: var(--surface-2); color: var(--text-primary); width: 100%; transition: border-color .15s; } /* Altura fija solo en input/select (no en textarea, que necesita su propio alto según "rows"). Sin esto, input[type=date] en iOS Safari usa el picker nativo del sistema con una altura distinta a la de los demás campos del filtro. */ input.form-input, select.form-input { height: 38px; } .form-input:focus { outline: none; border-color: var(--fill-accent); } .form-input[readonly] { background: var(--surface-1); color: var(--text-secondary); } .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; } .form-section-title { font-size: 11px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin: 16px 0 8px; padding-bottom: 6px; border-bottom: 0.5px solid var(--border); } .hint { font-size: 12px; color: var(--text-muted); display: flex; align-items: flex-start; gap: 5px; } .hint-inline { font-size: 11px; color: var(--text-muted); font-weight: 400; } .comment-box { width: 100%; resize: none; background: var(--surface-1); margin-bottom: 10px; } /* ── Alertas ────────────────────────────────────────────────── */ .alert { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border-radius: var(--radius); font-size: 13px; } .alert-danger { background: var(--bg-danger); color: var(--text-danger); border: 0.5px solid var(--border-danger); } .alert-success { background: var(--bg-success); color: var(--text-success); border: 0.5px solid var(--border-success); } .alert-info { background: var(--bg-accent); color: var(--text-accent); border: 0.5px solid var(--border-accent); } .alert-inline { margin-top: 8px; font-size: 12px; } /* ── Stepper ────────────────────────────────────────────────── */ .stepper { display: flex; align-items: center; gap: 0; margin-bottom: 24px; padding: 0 4px; } .step-item { display: flex; align-items: center; gap: 7px; font-size: 12px; } .step-circle { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; flex-shrink: 0; background: var(--surface-1); color: var(--text-muted); border: 0.5px solid var(--border-strong); } .step-item.active .step-circle { background: var(--bg-accent); color: var(--text-accent); border-color: var(--border-accent); } .step-item.done .step-circle { background: var(--text-primary); color: var(--surface-2); border-color: var(--text-primary); } .step-label { color: var(--text-muted); font-size: 12px; white-space: nowrap; } .step-item.active .step-label { color: var(--text-primary); font-weight: 500; } .step-item.done .step-label { color: var(--text-secondary); } .step-line { flex: 1; height: 0.5px; background: var(--border); margin: 0 6px; } .step-line.done { background: var(--text-primary); } /* Pasos del wizard */ .paso { display: none; } .paso.active { display: block; } /* ── Búsqueda / filtros ─────────────────────────────────────── */ .search-grid { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px; align-items: end; margin-bottom: 14px; } .filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .filter-label { font-size: 12px; color: var(--text-muted); } .filter-chip { padding: 4px 12px; border: 0.5px solid var(--border); border-radius: 20px; font-size: 12px; cursor: pointer; color: var(--text-secondary); background: var(--surface-1); white-space: nowrap; } .filter-chip:hover { border-color: var(--border-accent); color: var(--text-accent); } .filter-chip.active { background: var(--bg-accent); color: var(--text-accent); border-color: var(--border-accent); } /* ── Paso 2: Grilla de salas ────────────────────────────────── */ .paso2-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .resumen-busqueda { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); background: var(--surface-1); border-radius: var(--radius); padding: 6px 12px; border: 0.5px solid var(--border); } .results-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .results-count { font-size: 13px; color: var(--text-secondary); } .sala-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; } .sala-card { background: var(--surface-2); border: 0.5px solid var(--border); border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: border-color .15s, box-shadow .15s; } .sala-card:hover { border-color: var(--border-accent); } .sala-card.unavailable { opacity: .45; cursor: not-allowed; } .sala-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; } .sala-name { font-size: 14px; font-weight: 500; color: var(--text-primary); } .sala-loc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; } .sala-cap { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; display: flex; align-items: center; gap: 4px; } .sala-next { font-size: 11px; color: var(--text-muted); margin-top: 8px; display: flex; align-items: center; gap: 4px; } .section-sep { font-size: 11px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin: 16px 0 10px; padding-bottom: 6px; border-bottom: 0.5px solid var(--border); } .ocupadas-grid { grid-template-columns: 1fr 1fr; } /* Equipamiento */ .equip-row { display: flex; flex-wrap: wrap; gap: 4px; } .equip-tag { font-size: 11px; background: var(--surface-1); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 2px 7px; color: var(--text-secondary); } .req-popover { display: none; position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; background: var(--surface-2); border: 0.5px solid var(--border-strong); border-radius: 8px; padding: 8px 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); font-size: 11.5px; color: var(--text-primary); white-space: nowrap; } .req-popover.open { display: block; } .req-popover div { padding: 3px 0; display: flex; align-items: center; gap: 6px; } .req-popover i { color: var(--text-accent); font-size: 12px; } /* ── Paso 3: Formulario de reserva ──────────────────────────── */ .selected-room-banner { display: flex; align-items: center; gap: 10px; background: var(--bg-accent); border: 0.5px solid var(--border-accent); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 16px; } .banner-room { font-size: 14px; font-weight: 500; color: var(--text-primary); } .banner-sub { font-size: 12px; color: var(--text-secondary); } .link-cambiar { font-size: 12px; color: var(--text-accent); cursor: pointer; display: flex; align-items: center; gap: 4px; white-space: nowrap; } /* Participantes */ .participants-box { border: 0.5px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; } .participant-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 0.5px solid var(--border); } .participant-row:last-child { border-bottom: none; } .add-participant-row { display: flex; align-items: center; gap: 6px; padding: 8px 10px; font-size: 12px; color: var(--text-muted); cursor: pointer; border-bottom: 0.5px solid var(--border); } .add-participant-row:hover { background: var(--surface-1); color: var(--text-primary); } .add-participant-row:last-child { border-bottom: none; } /* Requerimientos */ .check-group { display: flex; flex-wrap: wrap; gap: 8px; } .check-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-primary); background: var(--surface-1); border: 0.5px solid var(--border-strong); border-radius: var(--radius); padding: 6px 10px; cursor: pointer; } .check-item:hover { border-color: var(--border-accent); } .check-item input { accent-color: var(--fill-accent); } /* ── Paso 4: Confirmación ───────────────────────────────────── */ .confirm-wrap { text-align: center; padding: 24px 0; } .confirm-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--bg-warning); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } .confirm-title { font-size: 18px; font-weight: 500; color: var(--text-primary); margin-bottom: 8px; } .confirm-sub { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 20px; } .summary-card { background: var(--surface-1); border: 0.5px solid var(--border); border-radius: 12px; padding: 14px; text-align: left; max-width: 480px; margin: 0 auto 20px; } .summary-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; border-bottom: 0.5px solid var(--border); } .summary-row:last-child { border-bottom: none; } .summary-label { color: var(--text-secondary); } .summary-val { color: var(--text-primary); font-weight: 500; text-align: right; } /* Timeline */ .timeline { display: flex; align-items: flex-start; justify-content: center; gap: 0; max-width: 480px; margin: 20px auto 0; } .tl-step { display: flex; flex-direction: column; align-items: center; min-width: 80px; } .tl-circle { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; margin-bottom: 6px; } .tl-done { background: var(--text-primary); color: var(--surface-2); } .tl-active { background: var(--bg-warning); color: var(--text-warning); border: 1.5px solid var(--border-warning); } .tl-pending { background: var(--surface-1); color: var(--text-muted); border: 0.5px solid var(--border); } .tl-label { font-size: 11px; color: var(--text-secondary); text-align: center; line-height: 1.3; } .tl-connector { flex: 1; height: 0.5px; background: var(--border); margin-top: 14px; } .tl-connector.tl-done { background: var(--text-primary); } /* ── Mis reservas / Comunicaciones ──────────────────────────── */ .res-card, .req-card { background: var(--surface-2); border: 0.5px solid var(--border); border-radius: 12px; margin-bottom: 10px; overflow: hidden; } .res-card-head, .req-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 12px 14px; gap: 12px; } .req-head { cursor: pointer; } .req-head:hover { background: var(--surface-1); } .res-title, .req-title { font-size: 14px; font-weight: 500; color: var(--text-primary); } .res-meta, .req-meta { font-size: 12px; color: var(--text-secondary); margin-top: 3px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .res-tags { padding: 0 14px 10px; display: flex; flex-wrap: wrap; gap: 5px; } .req-body { padding: 0 14px 14px; border-top: 0.5px solid var(--border); padding-top: 12px; } .req-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; } .req-field-label { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; } .req-field-val { font-size: 13px; font-weight: 500; color: var(--text-primary); } .req-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; } .action-row { display: flex; gap: 8px; } /* Acordeón: colapsado por defecto para que una cola larga de pendientes (crece con el volumen real) sea escaneable de un vistazo. */ .req-chevron { font-size: 16px; color: var(--text-muted); transition: transform .2s; } .req-collapsed .req-chevron { transform: rotate(-90deg); } .req-collapsed .req-body { display: none; } /* Link profundo desde el dashboard/correo: resalta la tarjeta a la que se saltó, para que quede claro cuál es "la de recién" en una cola larga. */ .req-highlight { outline: 2px solid var(--fill-accent); outline-offset: 2px; transition: outline-color 2s ease; } /* ── Admin ──────────────────────────────────────────────────── */ .admin-layout { display: grid; grid-template-columns: 200px 1fr; gap: 20px; } .sidebar-admin { background: var(--surface-2); border: 0.5px solid var(--border); border-radius: 12px; padding: 8px 0; align-self: start; } .sidebar-item { display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: 13px; color: var(--text-secondary); border-left: 2px solid transparent; text-decoration: none; } .sidebar-item:hover { background: var(--surface-1); color: var(--text-primary); text-decoration: none; } .sidebar-item.active { color: var(--text-primary); font-weight: 500; border-left-color: var(--text-primary); } .admin-content { min-width: 0; } .ms-banner { display: flex; align-items: flex-start; gap: 12px; background: var(--bg-accent); border: 0.5px solid var(--border-accent); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px; } /* Tabla admin */ .table { width: 100%; border-collapse: collapse; font-size: 13px; } .table th { text-align: left; font-size: 11px; font-weight: 500; color: var(--text-muted); padding: 8px 10px; border-bottom: 0.5px solid var(--border); background: var(--surface-1); } .table td { padding: 10px; border-bottom: 0.5px solid var(--border); color: var(--text-primary); vertical-align: middle; } .table tr:last-child td { border-bottom: none; } .table tr:hover td { background: var(--surface-1); } /* Sala admin card */ .sala-admin-card { background: var(--surface-2); border: 0.5px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; } .sala-admin-card.inactiva { opacity: .55; } .sala-admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; } /* Insumos grid */ .insumo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 8px; } .insumo-card { display: flex; align-items: flex-start; gap: 6px; background: var(--surface-2); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 10px 12px; min-width: 0; } .insumo-card.inactivo { opacity: .5; } .insumo-body { flex: 1; min-width: 0; } .insumo-name { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .insumo-resp { font-size: 11px; color: var(--text-muted); margin-top: 3px; display: flex; align-items: center; gap: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .insumo-actions { display: flex; gap: 2px; flex-shrink: 0; } /* Integraciones */ .integ-card { background: var(--surface-2); border: 0.5px solid var(--border); border-radius: 12px; padding: 14px 16px; } .integ-card-head { display: flex; align-items: flex-start; gap: 12px; } .integ-title { font-size: 14px; font-weight: 500; color: var(--text-primary); display: flex; align-items: center; } .integ-sub { font-size: 12px; color: var(--text-secondary); margin-top: 3px; } /* ── Modal ──────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; z-index: 500; } .modal-card { background: var(--surface-2); border-radius: 12px; border: 0.5px solid var(--border-strong); padding: 20px; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,0.12); } .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; font-size: 15px; font-weight: 500; color: var(--text-primary); } /* ── Login ──────────────────────────────────────────────────── */ .login-body { min-height: 100vh; } .login-body-centrado { background: var(--login-gradient); display: flex; align-items: center; justify-content: center; } /* Diseño lateral: el fondo (mismo gradiente de siempre, no uno nuevo) vive en un panel aparte, no en toda la pantalla — el formulario queda sobre el fondo normal del sitio. "Izquierda" y "derecha" son el mismo markup, solo se invierte el orden con .is-reversed. */ .login-lateral { display: flex; min-height: 100vh; } .login-lateral.is-reversed { flex-direction: row-reverse; } .login-panel-image { flex: 1; background: var(--login-gradient); display: none; } .login-panel-form { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; background: var(--surface-0); padding: 24px; } @media (min-width: 720px) { .login-panel-image { display: block; } } .login-wrap { width: 100%; max-width: 400px; padding: 16px; } .login-card { background: var(--surface-2); border: 0.5px solid var(--border); border-radius: 16px; padding: 32px; } .login-header { text-align: center; margin-bottom: 24px; } .login-title { font-size: 18px; font-weight: 500; color: var(--text-primary); margin: 10px 0 4px; } .login-sub { font-size: 13px; color: var(--text-secondary); } .login-form .form-group { margin-bottom: 12px; } .login-divider { text-align: center; margin: 16px 0; font-size: 12px; color: var(--text-muted); position: relative; } .login-divider::before, .login-divider::after { content: ''; position: absolute; top: 50%; width: 44%; height: 0.5px; background: var(--border); } .login-divider::before { left: 0; } .login-divider::after { right: 0; } .login-footer { text-align: center; font-size: 11px; color: var(--text-muted); margin-top: 20px; } /* ── Empty state ────────────────────────────────────────────── */ .empty-state { text-align: center; padding: 48px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .empty-state i { font-size: 36px; color: var(--text-muted); } .empty-state p { font-size: 14px; color: var(--text-secondary); } /* ── Animaciones ────────────────────────────────────────────── */ @keyframes spin { to { transform: rotate(360deg); } } /* ── Toggle vista ───────────────────────────────────────────── */ .view-toggle { display:flex; gap:0; border:0.5px solid var(--border-strong); border-radius:var(--radius); overflow:hidden; } .vt-btn { padding:6px 12px; font-size:12px; background:var(--surface-1); color:var(--text-secondary); border:none; cursor:pointer; display:flex; align-items:center; gap:5px; } .vt-btn:hover { background:var(--surface-0); } .vt-btn.on { background:var(--text-primary); color:var(--surface-2); } /* ── Calendario de reservas ─────────────────────────────────── */ .cal-grid-wrap .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); border:0.5px solid var(--border); border-radius:10px; overflow:hidden; } .cal-grid-wrap .cal-header { background:var(--surface-1); padding:8px 4px; text-align:center; font-size:11px; font-weight:500; color:var(--text-muted); border-bottom:0.5px solid var(--border); } .cal-grid-wrap .cal-cell { min-height:88px; padding:5px 6px; border-right:0.5px solid var(--border); border-bottom:0.5px solid var(--border); background:var(--surface-2); cursor:default; } .cal-grid-wrap .cal-cell:nth-child(7n) { border-right:none; } .cal-grid-wrap .cal-cell.other-month { background:var(--surface-0); } .cal-grid-wrap .cal-cell.has-res { cursor:pointer; } .cal-grid-wrap .cal-cell.has-res:hover { background:var(--surface-1); } .cal-grid-wrap .cal-cell.selected { background:var(--bg-accent); } .cal-grid-wrap .cal-cell.today { outline:1.5px solid var(--border-accent); outline-offset:-1px; } .cal-grid-wrap .day-num { font-size:12px; color:var(--text-secondary); width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:50%; margin-bottom:3px; } .cal-grid-wrap .cal-cell.today .day-num { background:var(--bg-accent); color:var(--text-accent); font-weight:600; } .cal-grid-wrap .res-pill { font-size:10px; padding:2px 5px; border-radius:3px; margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cal-grid-wrap .more-pill { font-size:10px; color:var(--text-muted); padding:1px 4px; } .cal-detail-panel { background:var(--surface-2); border:0.5px solid var(--border); border-radius:10px; padding:14px 16px; margin-top:12px; } .cal-detail-title { font-size:12px; font-weight:500; color:var(--text-secondary); margin-bottom:10px; display:flex; align-items:center; gap:6px; } .cal-detail-item { display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:0.5px solid var(--border); } .cal-detail-item:last-child { border-bottom:none; } .cal-detail-time { font-size:12px; font-weight:500; color:var(--text-accent); min-width:38px; line-height:1.3; } .cal-detail-name { font-size:13px; color:var(--text-primary); margin-bottom:2px; } .cal-detail-meta { font-size:11px; color:var(--text-muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .cal-badge { font-size:10px; padding:1px 7px; border-radius:var(--radius); font-weight:500; } /* ── Dashboard ──────────────────────────────────────────────── */ /* "Este mes": 4 métricas que sí son una serie mensual, con tendencia vs. el mes anterior. "Ahora mismo" (más abajo) es estado en vivo — no tiene mes anterior comparable, por eso es una barra aparte, no más tarjetas iguales. */ .month-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; } .m-tile { background: var(--surface-2); border: 0.5px solid var(--border); border-radius: 12px; padding: 14px 16px; } .m-label { font-size: 11px; color: var(--text-secondary); margin-bottom: 6px; display: flex; align-items: center; gap: 5px; } .m-value { font-size: 26px; font-weight: 500; color: var(--text-primary); line-height: 1; } .m-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; } .m-trend { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; margin-top: 8px; padding: 2px 7px; border-radius: 10px; } .m-trend.good { background: var(--bg-success); color: var(--text-success); } .m-trend.bad { background: var(--bg-danger); color: var(--text-danger); } .m-trend.neutral { background: var(--surface-1); color: var(--text-secondary); } .m-trend-ref { font-size: 10.5px; color: var(--text-muted); margin-left: 2px; font-weight: 400; } .m-trend-empty { display: block; font-size: 10.5px; color: var(--text-muted); margin-top: 8px; } /* "Ahora mismo": una sola tarjeta, 5 segmentos separados por línea fina — no son 5 cajas sueltas, así no invitan a alinearse columna a columna con la grilla de 4 de arriba (nunca calzarían: 5 no es divisor de 4). */ .chip-strip { display: flex; background: var(--surface-2); border: 0.5px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 16px; } .chip { display: flex; align-items: center; gap: 10px; padding: 12px 16px; flex: 1; min-width: 0; border-right: 0.5px solid var(--border); } .chip:last-child { border-right: none; } .chip-icon { width: 26px; height: 26px; border-radius: 7px; background: var(--surface-0); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px; } .chip-icon.warn { background: var(--bg-warning); color: var(--text-warning); } .chip-body { min-width: 0; } .chip-val { font-size: 16px; font-weight: 600; color: var(--text-primary); line-height: 1.1; } .chip-val .total { font-size: 12px; color: var(--text-muted); font-weight: 400; } .chip-lbl { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .db-chart-card { background: var(--surface-2); border: 0.5px solid var(--border); border-radius: 12px; padding: 14px 16px; } .db-chart-title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 7px; /* Sangra hasta el borde de la tarjeta (compensa el padding de .db-chart-card) y agrega una línea real debajo — así el encabezado se separa del contenido por algo más que el color/peso de la fuente. */ margin: -14px -16px 12px; padding: 13px 16px 11px; border-bottom: 1px solid var(--border-strong); } /* Fila A: 3 rankings de igual forma (Áreas / Salas / Requerimientos) */ .db-row-a { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; align-items: start; } .db-rank-row { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; } .db-rank-row:last-child { margin-bottom: 0; } .db-rank-num { font-size: 11px; font-weight: 600; color: var(--text-muted); width: 14px; flex-shrink: 0; font-variant-numeric: tabular-nums; } .db-rank-name { font-size: 12.5px; color: var(--text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Lollipop: punto + línea fina en vez de barra rellena — pesa menos visualmente que una barra sólida, mismo dato leído igual de rápido. */ .db-rank-track { position: relative; width: 80px; height: 2px; background: var(--surface-0); border-radius: 1px; flex-shrink: 0; } .db-rank-fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--border-strong); border-radius: 1px; } .db-rank-dot { position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--fill-accent); transform: translate(-50%,-50%); box-shadow: 0 0 0 3px var(--surface-2); } .db-rank-count{ font-size: 11.5px; color: var(--text-secondary); width: 22px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; } /* Fila B: ocupación (gráfico compacto) + estado (donut) */ .db-row-b { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; align-items: stretch; } .db-row-b .db-chart-card { display: flex; flex-direction: column; } .db-row-b .db-donut-row { flex: 1; } .db-occ-chart { display: flex; align-items: flex-end; gap: 5px; height: 130px; padding: 0 2px; } .db-occ-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; gap: 6px; } .db-occ-bar { width: 100%; max-width: 20px; border-radius: 4px 4px 2px 2px; background: var(--border-accent); } .db-occ-bar.peak { background: var(--fill-accent); } .db-occ-val { font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .db-occ-val.peak { color: var(--text-accent); font-weight: 600; } .db-occ-hour { font-size: 9.5px; color: var(--text-muted); } .db-occ-legend { font-size: 11px; color: var(--text-muted); margin-top: 12px; padding-top: 12px; border-top: 0.5px solid var(--border); } .db-donut-row { display: flex; align-items: center; gap: 20px; } .db-donut { width: 108px; height: 108px; border-radius: 50%; flex-shrink: 0; position: relative; background: conic-gradient(var(--db-donut-stops, var(--surface-1) 0 100%)); } .db-donut::before { content: ""; position: absolute; inset: 15px; border-radius: 50%; background: var(--surface-2); } .db-donut-center { position: absolute; inset: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .db-donut-total { font-size: 21px; font-weight: 600; color: var(--text-primary); line-height: 1; font-variant-numeric: tabular-nums; } .db-donut-total-label { font-size: 9.5px; color: var(--text-muted); margin-top: 2px; } .db-legend { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; } .db-legend-chip { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); } .db-legend-chip .sw { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; } .db-legend-chip b { color: var(--text-primary); font-weight: 600; margin-left: auto; font-variant-numeric: tabular-nums; } /* Fila C: próximas reservas, timeline vertical agrupado por día — un encabezado de fecha una sola vez, no repetido fila a fila, conectado por una línea de itinerario. */ .tl-wrap { padding-left: 2px; } .tl-day { margin-bottom: 18px; padding-left: 4px; } .tl-day:last-child { margin-bottom: 0; } .tl-day-label { font-size: 11.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; text-transform: capitalize; } .tl-day-label .badge-today { font-size: 9.5px; font-weight: 700; background: var(--bg-accent); color: var(--text-accent); padding: 1px 7px; border-radius: 8px; text-transform: uppercase; letter-spacing: .04em; } .tl-item { position: relative; padding-left: 22px; padding-bottom: 14px; border-left: 1.5px solid var(--border-strong); margin-left: 3px; } .tl-item:last-child { border-left-color: transparent; padding-bottom: 0; } .tl-item::before { content: ""; position: absolute; left: -4.5px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--fill-accent); box-shadow: 0 0 0 3px var(--surface-2); } .tl-time { font-size: 11px; color: var(--text-muted); font-weight: 600; font-variant-numeric: tabular-nums; } .tl-title { font-size: 13px; font-weight: 500; color: var(--text-primary); margin-top: 2px; } .tl-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; } /* Colas "esperando aprobación"/"esperando pre-aprobación" — cada widget ya está scoped a un solo tipo, así que la fila no necesita badge de etapa. Cada fila es un link directo a esa tarjeta puntual en Comunicaciones o Pre-aprobaciones (#req-{id}), no solo texto informativo. */ .q-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; margin: 0 -6px; border-radius: 8px; border-bottom: 0.5px solid var(--border); text-decoration: none; color: inherit; transition: background .12s; } .q-row:last-of-type { border-bottom: none; } .q-row:hover { background: var(--surface-1); text-decoration: none; } .q-row:hover .q-arrow { opacity: 1; transform: translateX(1px); } .q-date-chip { width: 32px; height: 32px; border-radius: 8px; background: var(--surface-1); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; } .q-row:hover .q-date-chip { background: var(--surface-2); } .q-date-chip .d { font-size: 12px; font-weight: 700; color: var(--text-primary); line-height: 1; font-variant-numeric: tabular-nums; } .q-date-chip .m { font-size: 7.5px; color: var(--text-muted); letter-spacing: .2px; } .q-body { flex: 1; min-width: 0; } .q-title { font-size: 12.5px; font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .q-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .q-arrow { font-size: 15px; color: var(--text-muted); flex-shrink: 0; opacity: 0; transition: opacity .12s, transform .12s; } /* Columna derecha de la Fila C: dos tarjetas apiladas en vez de una — cada cola (Comunicaciones / jefe inmediato) con su propio "Ver todas" hacia la pantalla que realmente le corresponde. */ .db-col-stack { display: flex; flex-direction: column; gap: 12px; } .db-chart-card-sm { padding: 14px 16px; } .db-footer-link { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 10px; padding-top: 10px; border-top: 0.5px solid var(--border); font-size: 12px; color: var(--text-accent); font-weight: 500; text-decoration: none; } .db-footer-link:hover { color: var(--text-primary); } /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width: 1024px) { .db-row-a { grid-template-columns: 1fr; } .db-row-b { grid-template-columns: 1fr; } .month-grid { grid-template-columns: 1fr 1fr; } .chip-strip { flex-wrap: wrap; } .chip { flex: 1 1 50%; border-right: none; border-bottom: 0.5px solid var(--border); } .chip:nth-child(2n) { border-right: 0.5px solid var(--border); } .chip:last-child { flex: 1 1 100%; border-bottom: none; } .tr-table { font-size: 12px; } .tr-table th, .tr-table td { padding: 8px 10px; } } /* El nav completo (8 links + logo + usuario) no entra en una sola fila desde ~1100px hacia abajo — cubre iPad en portrait (~810px) y landscape (~1080px), no solo celulares. Por eso el menú hamburguesa tiene su propio breakpoint, más alto que el resto de los ajustes mobile-only de abajo. */ @media (max-width: 1100px) { .nav-hamburger { display: flex; } /* Drawer lateral (no dropdown de ancho completo): anclado a la izquierda, ancho fijo, con back drop para cerrar tocando afuera. */ .nav-links { display: flex; position: fixed; top: 60px; left: 0; bottom: 0; width: 280px; max-width: 82vw; background: var(--surface-2); border-right: 0.5px solid var(--border-strong); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0; overflow-y: auto; z-index: 99; box-shadow: 4px 0 16px rgba(0,0,0,0.08); transform: translateX(-100%); transition: transform .2s ease; } .nav-links.open { transform: translateX(0); } .nav-links .nav-link { padding: 12px 18px; border-radius: 0; font-size: 14px; justify-content: flex-start; } /* Submenú de Admin claramente anidado: indentado, fondo distinto, ítems más chicos — para que se lea como "hijo de Admin", no como otro link más. */ .nav-dropdown { display: flex; flex-direction: column; } .nav-dropdown-menu { position: static; border: none; box-shadow: none; border-radius: 0; background: var(--surface-1); border-left: 2px solid var(--border-accent); margin-left: 18px; } .nav-dropdown-menu .nav-dropdown-item { padding: 9px 14px 9px 22px; font-size: 13px; } .nav-user-info { display: none; } } .nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 98; } .nav-backdrop.open { display: block; } @media (min-width: 1101px) { .nav-backdrop { display: none !important; } } @media (max-width: 640px) { .sala-grid, .form-row-2, .admin-layout { grid-template-columns: 1fr; } .sidebar-admin { display: none; } .stepper .step-label { display: none; } .search-grid { grid-template-columns: 1fr 1fr; } .search-grid > button { grid-column: 1/-1; } .timeline { gap: 0; } .tl-label { font-size: 10px; } .page-container { padding: 16px; } .month-grid { grid-template-columns: 1fr; } .chip-strip { flex-direction: column; } .chip { flex: 1 1 100%; border-right: none !important; border-bottom: 0.5px solid var(--border); } .chip:last-child { border-bottom: none; } .db-row-a { grid-template-columns: 1fr; } .db-row-b { grid-template-columns: 1fr; } .tr-table { font-size: 12px; } } /* ── Botones de requerimientos ─────────────────────────────── */ .req-btn-edit { color: var(--text-accent) !important; } .req-btn-edit:hover { background: var(--bg-accent); } .req-btn-hide { color: var(--text-warning) !important; } .req-btn-hide:hover { background: var(--bg-warning); } .req-btn-restore { color: var(--text-success) !important; } .req-btn-restore:hover { background: var(--bg-success); } /* ── Tabla de reservas ──────────────────────────────────────── */ .tr-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--surface-2); border-radius: 10px; overflow: hidden; border: 1px solid var(--border); } .tr-table thead { background: var(--surface-0); } .tr-table th { padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border-strong); white-space: nowrap; } .tr-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text-primary); } .tr-table tbody tr:last-child td { border-bottom: none; } .tr-table tbody tr:hover { background: var(--surface-0); }