/* ========================================================================== admin.css — hoja de estilos del panel de administración Tema claro único. No se minifica: el peso aquí es irrelevante. Todos los colores de texto verificados ≥4.5:1 sobre todas las superficies. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* Tipografía */ --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace; --fs-xs: 0.75rem; /* 12px — badges, metadatos, cabecera de tabla */ --fs-sm: 0.8125rem; /* 13px — texto de tabla, ayudas de formulario */ --fs-base: 0.875rem; /* 14px — cuerpo del panel */ --fs-md: 1rem; /* 16px — inputs (evita el zoom de iOS) */ --fs-lg: 1.125rem; /* 18px — título de página */ --fs-xl: 1.375rem; /* 22px — cifras de KPI */ --fs-2xl: 1.75rem; /* 28px — cifra destacada */ --lh-tight: 1.25; --lh-base: 1.5; --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; /* Espaciado — escala 4/8 */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-8: 48px; --sp-10: 64px; /* Superficies */ --surface: #ffffff; --surface-muted: #f8fafc; --surface-sunken: #f1f5f9; --surface-hover: #f1f5f9; /* Bordes */ --border: #e2e8f0; /* divisores y bordes de tarjeta (decorativos) */ --border-strong: #cbd5e1; /* separadores con carga semántica */ --border-control: #7d8b9c; /* inputs y controles — 3,47:1, cumple 1.4.11 */ /* Texto — peor caso medido entre paréntesis */ --text-primary: #0f172a; /* 16,30:1 */ --text-secondary: #475569; /* 6,92:1 */ --text-muted: #5a6779; /* 5,25:1 */ --text-inverse: #ffffff; /* Acento y estados */ --accent: #1d4ed8; --accent-hover: #1e40af; --accent-soft: #eff6ff; --success: #15803d; --success-soft: #f0fdf4; --warning: #8f5700; --warning-soft: #fffbeb; --danger: #b91c1c; --danger-hover: #991b1b; --danger-soft: #fef2f2; /* Radios */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-full: 9999px; /* Sombras — elevación, no decoración */ --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.06); --shadow-md: 0 4px 12px -2px rgb(15 23 42 / 0.10), 0 2px 4px -2px rgb(15 23 42 / 0.06); --shadow-lg: 0 16px 32px -8px rgb(15 23 42 / 0.18); /* Dimensiones */ --control-h: 36px; --control-h-sm: 28px; --row-h: 44px; /* PANEL_LEVEL = cliente */ --sidebar-w: 248px; --topbar-h: 52px; --content-max: 1360px; --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); --transition: 120ms ease; } /* Densidad compacta — se activa con */ .is-super { --row-h: 36px; --control-h: 32px; --fs-base: 0.8125rem; } /* -------------------------------------------------------------------------- 2. Reset y base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--text-primary); background: var(--surface-muted); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); font-weight: var(--fw-semi); } h1 { font-size: var(--fs-lg); } h2 { font-size: var(--fs-md); } h3 { font-size: var(--fs-base); } p { margin: 0 0 var(--sp-3); } p:last-child { margin-bottom: 0; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } code, pre, .mono { font-family: var(--font-mono); font-size: 0.9em; } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 3. Iconos -------------------------------------------------------------------------- */ .icon { width: 18px; height: 18px; flex: none; vertical-align: -0.2em; stroke: currentColor; fill: none; stroke-width: 2; pointer-events: none; } .icon--sm { width: 15px; height: 15px; } .icon--lg { width: 24px; height: 24px; } /* -------------------------------------------------------------------------- 4. Estructura -------------------------------------------------------------------------- */ /* minmax(0, 1fr) y no 1fr a secas: `1fr` es la forma corta de `minmax(auto, 1fr)`, y ese `auto` se resuelve al ancho MÍNIMO DEL CONTENIDO de la columna. Si algo dentro no puede encoger —una tabla ancha, una ruta larga, una fila de indicadores— la columna crece por encima de la ventana y arrastra la página entera en horizontal. No basta con poner `min-width: 0` al elemento: no sirve para esto. */ .layout { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; } /* Barra lateral */ .sidebar { display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border); position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar__brand { display: flex; align-items: center; gap: var(--sp-2); height: var(--topbar-h); padding: 0 var(--sp-4); border-bottom: 1px solid var(--border); font-weight: var(--fw-semi); color: var(--text-primary); } .sidebar__brand:hover { text-decoration: none; } .sidebar__nav { padding: var(--sp-3) var(--sp-2); flex: 1; } .sidebar__group { padding: var(--sp-4) var(--sp-3) var(--sp-1); font-size: var(--fs-xs); font-weight: var(--fw-semi); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .sidebar__group:first-child { padding-top: var(--sp-1); } .sidebar__link { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); margin-bottom: 1px; border-radius: var(--radius-md); color: var(--text-secondary); font-weight: var(--fw-medium); transition: background var(--transition), color var(--transition); } .sidebar__link:hover { background: var(--surface-hover); color: var(--text-primary); text-decoration: none; } .sidebar__link[aria-current="page"] { background: var(--accent-soft); color: var(--accent); } .sidebar__link .icon { color: var(--text-muted); } .sidebar__link[aria-current="page"] .icon { color: var(--accent); } .sidebar__badge { margin-left: auto; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--text-muted); } .sidebar__footer { padding: var(--sp-3); border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-muted); } /* Barra superior */ .topbar { display: flex; align-items: center; gap: var(--sp-4); height: var(--topbar-h); padding: 0 var(--sp-5); background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; } .topbar__spacer { margin-left: auto; } /* Contenido */ .main { min-width: 0; } .content { max-width: var(--content-max); padding: var(--sp-5); } .page-head { display: flex; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-5); } .page-head__actions { margin-left: auto; display: flex; gap: var(--sp-2); } .page-head__sub { margin: var(--sp-1) 0 0; color: var(--text-secondary); font-size: var(--fs-sm); } .breadcrumb { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); font-size: var(--fs-sm); color: var(--text-muted); } .breadcrumb a { color: var(--text-secondary); } /* Rejillas */ .grid { display: grid; gap: var(--sp-4); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1100px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* -------------------------------------------------------------------------- 5. Tarjetas -------------------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .card__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4); border-bottom: 1px solid var(--border); } .card__title { font-size: var(--fs-base); font-weight: var(--fw-semi); } .card__actions { margin-left: auto; display: flex; gap: var(--sp-2); } .card__body { padding: var(--sp-4); } .card__foot { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); background: var(--surface-muted); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } /* KPI */ .kpi { padding: var(--sp-4); } .kpi__label { font-size: var(--fs-xs); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .kpi__value { margin-top: var(--sp-2); font-size: var(--fs-2xl); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; line-height: 1.1; } .kpi__delta { display: inline-flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; } .kpi__delta--up { color: var(--success); } .kpi__delta--down { color: var(--danger); } /* -------------------------------------------------------------------------- 6. Botones -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: var(--control-h); padding: 0 var(--sp-4); border: 1px solid transparent; border-radius: var(--radius-md); background: none; font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition); } .btn:hover { text-decoration: none; } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; } .btn--primary { background: var(--accent); color: var(--text-inverse); } .btn--primary:hover:not(:disabled) { background: var(--accent-hover); } .btn--secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text-primary); } .btn--secondary:hover:not(:disabled) { background: var(--surface-hover); } .btn--ghost { color: var(--text-secondary); } .btn--ghost:hover:not(:disabled) { background: var(--surface-hover); color: var(--text-primary); } .btn--danger { background: var(--danger); color: var(--text-inverse); } .btn--danger:hover:not(:disabled) { background: var(--danger-hover); } .btn--sm { height: var(--control-h-sm); padding: 0 var(--sp-3); font-size: var(--fs-xs); } .btn--icon { width: var(--control-h); padding: 0; } .btn--icon.btn--sm { width: var(--control-h-sm); } .btn-group { display: inline-flex; gap: var(--sp-2); } /* -------------------------------------------------------------------------- 7. Formularios -------------------------------------------------------------------------- */ .form { display: grid; gap: var(--sp-4); } .form-row { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); } .field { display: grid; gap: var(--sp-2); } .field__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-primary); } .field__required { color: var(--danger); } .field__hint { font-size: var(--fs-xs); color: var(--text-muted); } .field__error { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); color: var(--danger); font-weight: var(--fw-medium); } .input, .select, .textarea { width: 100%; min-height: var(--control-h); padding: 0 var(--sp-3); border: 1px solid var(--border-control); border-radius: var(--radius-md); background: var(--surface); color: var(--text-primary); font: inherit; font-size: var(--fs-md); transition: border-color var(--transition); } .input::placeholder, .textarea::placeholder { color: var(--text-muted); } .input:hover, .select:hover, .textarea:hover { border-color: var(--text-secondary); } .input:disabled, .select:disabled, .textarea:disabled { background: var(--surface-sunken); color: var(--text-muted); cursor: not-allowed; } .textarea { padding: var(--sp-2) var(--sp-3); min-height: 100px; resize: vertical; line-height: var(--lh-base); } .select { appearance: none; padding-right: var(--sp-8); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a6779' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--sp-3) center; } .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); } /* Casillas e interruptores */ .check { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); } .check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); flex: none; } .fieldset { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-4); margin: 0; } .fieldset legend { padding: 0 var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-semi); } /* Barra de filtros */ .toolbar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); } .toolbar__search { position: relative; flex: 1; min-width: 200px; max-width: 320px; } .toolbar__search .icon { position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%); color: var(--text-muted); } .toolbar__search .input { padding-left: var(--sp-8); } /* -------------------------------------------------------------------------- 8. Tablas -------------------------------------------------------------------------- */ .table-wrap { overflow-x: auto; } .table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .table th { position: sticky; top: 0; z-index: 1; padding: var(--sp-2) var(--sp-4); background: var(--surface-muted); border-bottom: 1px solid var(--border); text-align: left; font-size: var(--fs-xs); font-weight: var(--fw-semi); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); white-space: nowrap; } .table td { height: var(--row-h); padding: 0 var(--sp-4); border-bottom: 1px solid var(--border); vertical-align: middle; } .table tbody tr:hover { background: var(--surface-muted); } .table tbody tr:last-child td { border-bottom: 0; } .table .num { text-align: right; font-variant-numeric: tabular-nums; } .table .actions { width: 1%; white-space: nowrap; text-align: right; } .table .shrink { width: 1%; white-space: nowrap; } .table__sort { display: inline-flex; align-items: center; gap: var(--sp-1); color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; } .table__sort .icon { color: var(--text-muted); } .table__primary { font-weight: var(--fw-medium); color: var(--text-primary); } .table__meta { font-size: var(--fs-xs); color: var(--text-muted); } /* -------------------------------------------------------------------------- 9. Badges y píldoras de estado -------------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-2); border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: var(--fw-medium); white-space: nowrap; } .badge--neutral { background: var(--surface-sunken); color: var(--text-secondary); } .badge--accent { background: var(--accent-soft); color: var(--accent); } .badge--success { background: var(--success-soft); color: var(--success); } .badge--warning { background: var(--warning-soft); color: var(--warning); } .badge--danger { background: var(--danger-soft); color: var(--danger); } .dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex: none; } /* -------------------------------------------------------------------------- 10. Avisos -------------------------------------------------------------------------- */ .alert { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: var(--fs-sm); } .alert .icon { flex: none; margin-top: 1px; } .alert__title { font-weight: var(--fw-semi); margin-bottom: var(--sp-1); } .alert--info { background: var(--accent-soft); border-color: #bfdbfe; color: var(--text-primary); } .alert--info .icon { color: var(--accent); } .alert--success { background: var(--success-soft); border-color: #bbf7d0; } .alert--success .icon { color: var(--success); } .alert--warning { background: var(--warning-soft); border-color: #fde68a; } .alert--warning .icon { color: var(--warning); } .alert--danger { background: var(--danger-soft); border-color: #fecaca; } .alert--danger .icon { color: var(--danger); } /* Franja de modo elevado */ .elevated-bar { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-5); background: var(--warning-soft); border-bottom: 1px solid #fde68a; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--warning); } .elevated-bar__timer { margin-left: auto; font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 11. Estados vacío, carga y error -------------------------------------------------------------------------- */ .empty { display: grid; justify-items: center; gap: var(--sp-3); padding: var(--sp-10) var(--sp-5); text-align: center; } .empty .icon { width: 32px; height: 32px; color: var(--text-muted); stroke-width: 1.5; } .empty__title { font-size: var(--fs-md); font-weight: var(--fw-semi); } .empty__text { max-width: 42ch; color: var(--text-secondary); font-size: var(--fs-sm); } .skeleton { background: linear-gradient(90deg, var(--surface-sunken) 25%, #e9eef5 50%, var(--surface-sunken) 75%); background-size: 200% 100%; border-radius: var(--radius-sm); animation: skeleton 1.4s ease-in-out infinite; } @keyframes skeleton { to { background-position: -200% 0; } } .spinner { animation: spin 800ms linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- 12. Paginación -------------------------------------------------------------------------- */ .pagination { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); } .pagination__info { font-size: var(--fs-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; } .pagination__nav { margin-left: auto; display: flex; gap: var(--sp-1); } /* -------------------------------------------------------------------------- 13. Modal -------------------------------------------------------------------------- */ .modal { width: min(560px, calc(100vw - 2 * var(--sp-5))); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); color: var(--text-primary); } .modal::backdrop { background: rgb(15 23 42 / 0.4); } .modal__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--border); } .modal__title { font-size: var(--fs-md); font-weight: var(--fw-semi); } .modal__close { margin-left: auto; } .modal__body { padding: var(--sp-4); } .modal__foot { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); background: var(--surface-muted); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } /* -------------------------------------------------------------------------- 14. Avisos flotantes -------------------------------------------------------------------------- */ .toasts { position: fixed; bottom: var(--sp-5); right: var(--sp-5); z-index: 100; display: grid; gap: var(--sp-2); max-width: 380px; } .toast { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-md); box-shadow: var(--shadow-md); font-size: var(--fs-sm); animation: toast-in 180ms ease; } .toast--success { border-left-color: var(--success); } .toast--success .icon { color: var(--success); } .toast--danger { border-left-color: var(--danger); } .toast--danger .icon { color: var(--danger); } .toast__close { margin-left: auto; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } } /* -------------------------------------------------------------------------- 15. Pestañas -------------------------------------------------------------------------- */ .tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-5); } .tabs__tab { padding: var(--sp-2) var(--sp-3); border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-medium); } .tabs__tab:hover { color: var(--text-primary); text-decoration: none; } .tabs__tab[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); } /* -------------------------------------------------------------------------- 16. Login -------------------------------------------------------------------------- */ .login { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-5); background: var(--surface-muted); } .login__card { width: min(400px, 100%); padding: var(--sp-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .login__brand { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin-bottom: var(--sp-5); font-size: var(--fs-lg); font-weight: var(--fw-semi); } /* -------------------------------------------------------------------------- 17. Utilidades mínimas -------------------------------------------------------------------------- */ .stack { display: grid; gap: var(--sp-4); } .stack-2 { display: grid; gap: var(--sp-2); } .row { display: flex; align-items: center; gap: var(--sp-2); } .row-4 { display: flex; align-items: center; gap: var(--sp-4); } .push { margin-left: auto; } .muted { color: var(--text-muted); } .secondary { color: var(--text-secondary); } .num { font-variant-numeric: tabular-nums; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nowrap { white-space: nowrap; } /* -------------------------------------------------------------------------- 18. Adaptación a pantalla estrecha -------------------------------------------------------------------------- */ @media (max-width: 900px) { /* minmax(0, 1fr) por el mismo motivo que arriba. Es donde más se nota: en 360px de ancho, una tabla de 615px deja la columna en 470px y la página se desplaza en horizontal. */ .layout { grid-template-columns: minmax(0, 1fr); } .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sidebar-w); transform: translateX(-100%); transition: transform 180ms ease; box-shadow: var(--shadow-lg); } .sidebar[data-open="true"] { transform: none; } .content { padding: var(--sp-4); } .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } .form-row { grid-template-columns: minmax(0, 1fr); } .page-head { flex-wrap: wrap; } } @media (min-width: 901px) { .sidebar__toggle { display: none; } } /* -------------------------------------------------------------------------- 19. Movimiento reducido -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* -------------------------------------------------------------------------- 20. Impresión -------------------------------------------------------------------------- */ @media print { .sidebar, .topbar, .toolbar, .pagination, .actions, .btn { display: none !important; } .layout { display: block; } .content { padding: 0; max-width: none; } .card { border: 0; } body { background: #fff; } }