/* ============================================================================
magma_ui.css · Capa de rediseño global (PC + móvil) · 2026-05-31
----------------------------------------------------------------------------
Dirección: "Neutro premium + acento Magma rojo". Tema auto (claro/oscuro).
Tipografía: Geist (cifras tabulares en datos).
CÓMO FUNCIONA
- Se carga DESPUÉS de magma_modern.css y de todo el CSS de módulos, así que
gana por orden de cascada sin necesitar !important salvo donde Perfex/
Bootstrap fija reglas muy específicas.
- Redefine los tokens --magma-* que magma_modern.css ya consume → gran parte
de la UI se reviste sola. Encima, capa de pulido de componentes + móvil.
- Reversible: quitar el en head.php deja todo como estaba.
NO TOCA iconos (Font Awesome / glyphicon / material): nunca se reasigna
font-family sobre .fa / [class*="fa-"].
============================================================================ */
/* ----------------------------------------------------------------------------
0) TIPOGRAFÍA
La a Google Fonts (Geist + Geist Mono) se inyecta en head.php.
Aquí solo aplicamos la familia de forma segura para iconos.
---------------------------------------------------------------------------- */
:root {
--magma-font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, sans-serif;
--magma-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
html, body,
button, input, optgroup, select, textarea,
h1, h2, h3, h4, h5, h6,
p, a, span, label, li, td, th, dt, dd, small, strong, b, em,
.panel, .panel-body, .panel-heading, .panel_s,
.table, .dataTable, .nav, .navbar, .dropdown-menu, .modal-content,
#header, #sidebar, #menu, .menu, .btn, .form-control, .tw-text-base {
font-family: var(--magma-font);
}
/* Cifras tabulares en zonas de datos (que las columnas cuadren) */
.table, .dataTable, table td, table th,
.kpi, .kpi-value, [class*="amount"], [class*="total"], [class*="-num"],
.tw-tabular-nums, time, .badge, .label {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1, "cv01" 1, "ss01" 1;
}
code, pre, kbd, samp, .text-mono { font-family: var(--magma-font-mono); }
/* Render más nítido */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
/* Titulares con presencia: tracking apretado + peso intencional */
h1, h2, h3, .panel-heading h4, .h1, .h2, .h3 { letter-spacing: -0.018em; }
h1, .h1 { font-weight: 700; }
h2, .h2, h3, .h3 { font-weight: 650; }
.bold, strong, b, th { font-weight: 600; }
.text-balance { text-wrap: balance; }
/* ----------------------------------------------------------------------------
1) TOKENS · TEMA CLARO (Neutro premium + acento Magma)
Redefinimos las variables que magma_modern.css ya usa por toda la UI.
[2026-08-12] CAPA CANÓNICA: este fichero carga ÚLTIMO en head.php (línea 48,
tras magma_modern.css L18 y tras magma_unified.css inyectado vía
app_admin_head L42) → sus valores GANAN la cascada. Los tokens marcados
CANÓNICO son el valor definitivo; no redefinirlos en otra capa.
---------------------------------------------------------------------------- */
:root {
/* Superficies neutras, gris frío consistente */
--magma-bg: #f5f6f8;
--magma-surface: #ffffff; /* [2026-08-12] CANÓNICO (modern:#ffffff ok) */
--magma-surface-2: #f8f9fb;
--magma-surface-3: #eef1f5;
--magma-border: #e4e7ec; /* [2026-08-12] CANÓNICO (modern:#e2e4e9, unified:#e6e6e6 → absorber) */
--magma-border-soft: #eef1f5;
/* Texto en una sola familia de grises */
--magma-text: #20242c;
--magma-text-strong: #0c0f15;
--magma-text-muted: #5b6472; /* [2026-08-12] CANÓNICO (modern:#64748b → absorber) */
--magma-text-faint: #98a1af;
/* Acento Magma (rojo) — único acento de marca */
--magma-accent: #d6202e;
--magma-accent-strong: #b3151f;
--magma-accent-soft: rgba(214, 32, 46, 0.10);
--magma-accent-ring: rgba(214, 32, 46, 0.28);
--magma-on-accent: #ffffff;
/* [2026-10-01] ACCIÓN ≠ ALERTA. La acción (botón primario, «+», menú activo,
contadores, foco) va en TINTA, como --mrh-ink de mrh.css. --magma-accent y
--magma-danger quedan SOLO para alerta, peligro o destructivo. */
--magma-primary: #17171a;
--magma-primary-hover: #2a2a2e;
--magma-primary-soft: rgba(23, 23, 26, 0.06);
--magma-primary-ring: rgba(23, 23, 26, 0.22);
--magma-on-primary: #ffffff;
/* Semánticos (desaturados, una sola dirección de luz) */
--magma-success: #15a05c;
--magma-warning: #c97a0e;
--magma-danger: #d6202e;
--magma-info: #3b6fb0;
/* [2026-10-01] Familia de ALERTA. Nunca se redefine dentro de un componente
(21.a sí redefine --magma-accent*): las alertas usan estos. */
--magma-danger-strong: #b3151f;
--magma-danger-soft: rgba(214, 32, 46, 0.10);
--magma-danger-ring: rgba(214, 32, 46, 0.28);
--magma-danger-border: #f0b9bd;
/* Estados — terna soft/border/strong por color (modo claro).
Los consumidores usan var(--magma-*-{soft,border,strong}, #fallback) y
estos overrides hacen que INVIERTAN solos en dark mode (bloque .theme-dark). */
--magma-success-soft: #eafaf1;
--magma-success-border: #a8e0c0;
--magma-success-strong: #0f6e3c;
--magma-warning-soft: #fff7e6;
--magma-warning-border: #f0c36d;
--magma-warning-strong: #8a5d00;
--magma-info-soft: #eef2ff;
--magma-info-border: #c2ccf2;
--magma-info-strong: #33459e;
--magma-accent-border: #f0b9bd;
/* Sombras tintadas (no negro puro) */
--magma-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.04);
--magma-shadow-hover: 0 4px 14px rgba(16, 24, 40, 0.10);
--magma-shadow-elev: 0 16px 40px rgba(16, 24, 40, 0.16);
/* Escala de radios: contenedores suaves, internos más apretados */
--magma-radius-xs: 6px;
--magma-radius-sm: 8px;
--magma-radius: 12px;
--magma-radius-lg: 16px;
/* Movimiento */
--magma-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--magma-dur: 180ms;
/* z-index ordenado */
--magma-z-header: 1030;
--magma-z-sidebar: 1040;
--magma-z-dropdown: 1050;
--magma-z-modal: 1060;
color-scheme: light;
}
/* ----------------------------------------------------------------------------
2) TOKENS · TEMA OSCURO (recalibrado 2026-06-09, referencia Linear)
Objetivo Mario: arreglar (a) plano/sin profundidad, (b) rojo neón/barato,
(c) poco contraste. Profundidad por ESCALONADO de superficies + bordes
nítidos (no por sombras pesadas). Rojo contenido. Texto/bordes más legibles.
---------------------------------------------------------------------------- */
body.theme-dark {
/* Superficies escalonadas: el salto bg→surface da profundidad real a paneles */
--magma-bg: #0b0d10; /* lienzo casi-negro, frío MUY sutil */
--magma-surface: #14161b; /* paneles/tarjetas — claramente sobre el lienzo */ /* [2026-08-12] CANÓNICO (modern dark:#182338 → absorber) */
--magma-surface-2: #181b21; /* superficie anidada / cabeceras */
--magma-surface-3: #1f242d; /* hover de filas, inputs, estados activos */
--magma-border: #2a303b; /* hairline NÍTIDO (la clave del look Linear) */ /* [2026-08-12] CANÓNICO (modern dark:#2e3d5c → absorber) */
--magma-border-soft: #1d212a; /* divisiones internas, aún visibles */
/* Texto con más contraste (legibilidad) */
--magma-text: #e8eaee;
--magma-text-strong: #f6f7f9;
--magma-text-muted: #9ba3b0; /* [2026-08-12] CANÓNICO (modern dark:#a0aec0 → absorber) */
--magma-text-faint: #7c8492; /* subido desde #6b7484 — se leía lavado */
/* Rojo CONTENIDO (antes #f2454f neón → barato sobre oscuro) */
--magma-accent: #ec3a44;
--magma-accent-strong: #f04b54; /* hover, sin pasarse de brillo */
--magma-accent-soft: rgba(236, 58, 68, 0.13);
--magma-accent-ring: rgba(236, 58, 68, 0.36);
--magma-on-accent: #ffffff;
/* Acción en oscuro: tinta clara con texto oscuro encima (como mrh.css) */
--magma-primary: #f2f3f5;
--magma-primary-hover: #d5d9df;
--magma-primary-soft: rgba(242, 243, 245, 0.08);
--magma-primary-ring: rgba(242, 243, 245, 0.30);
--magma-on-primary: #14161b;
--magma-success: #34d399;
--magma-warning: #fbbf24;
--magma-danger: #ec3a44;
--magma-info: #6aa6ef;
--magma-danger-strong: #f04b54;
--magma-danger-soft: rgba(236, 58, 68, 0.13);
--magma-danger-ring: rgba(236, 58, 68, 0.36);
--magma-danger-border: rgba(236, 58, 68, 0.45);
/* Estados invertidos: fondo tenue translúcido del color + texto claro legible.
Mantiene contraste sobre superficies oscuras sin "cajas" de color planas. */
--magma-success-soft: rgba(52, 211, 153, 0.14);
--magma-success-border: rgba(52, 211, 153, 0.38);
--magma-success-strong: #7ee3bc;
--magma-warning-soft: rgba(251, 191, 36, 0.14);
--magma-warning-border: rgba(251, 191, 36, 0.40);
--magma-warning-strong: #f3cf73;
--magma-info-soft: rgba(106, 166, 239, 0.15);
--magma-info-border: rgba(106, 166, 239, 0.40);
--magma-info-strong: #a8c6f3;
--magma-accent-border: rgba(236, 58, 68, 0.45);
/* Profundidad sobre todo por contraste+borde; sombra suave para elevación */
--magma-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.28);
--magma-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.50);
--magma-shadow-elev: 0 18px 44px rgba(0, 0, 0, 0.62);
color-scheme: dark;
}
/* ----------------------------------------------------------------------------
3) BASE / LIENZO
---------------------------------------------------------------------------- */
body {
background: var(--magma-bg);
color: var(--magma-text);
}
a { color: var(--magma-text-strong); transition: color var(--magma-dur) var(--magma-ease); }
a:hover, a:focus { color: var(--magma-primary-hover); }
hr { border-color: var(--magma-border); }
::selection { background: var(--magma-accent-soft); color: var(--magma-text-strong); }
/* Scrollbars finos y temáticos */
* { scrollbar-width: thin; scrollbar-color: var(--magma-border) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--magma-border); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--magma-text-faint); }
::-webkit-scrollbar-track { background: transparent; }
/* Foco accesible y de marca en todo lo interactivo */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--magma-primary);
outline-offset: 2px;
border-radius: var(--magma-radius-xs);
}
/* ----------------------------------------------------------------------------
4) TOPBAR (#header)
---------------------------------------------------------------------------- */
#header {
background: var(--magma-surface);
border-bottom: 1px solid var(--magma-border);
box-shadow: none;
}
#header .navbar-nav > li > a,
#header .dropdown-toggle { color: var(--magma-text-muted); transition: color var(--magma-dur) var(--magma-ease); }
#header .navbar-nav > li > a:hover { color: var(--magma-text-strong); }
/* Buscador superior */
#header #search input,
#header .app-search input,
#search-input-header {
background: var(--magma-surface-2);
border: 1px solid var(--magma-border);
border-radius: 999px;
color: var(--magma-text);
transition: border-color var(--magma-dur) var(--magma-ease), box-shadow var(--magma-dur) var(--magma-ease);
}
#header #search input:focus,
#search-input-header:focus {
border-color: var(--magma-primary);
box-shadow: 0 0 0 3px var(--magma-primary-ring);
}
/* ----------------------------------------------------------------------------
5) SIDEBAR (#sidebar / .menu)
Estado activo = filete de tinta + texto fuerte + fondo suave (nada de rojo).
---------------------------------------------------------------------------- */
#sidebar, #sidebar .slimScrollDiv, .sidebar { background: var(--magma-surface); }
#sidebar { border-right: 1px solid var(--magma-border); }
#sidebar ul.menu > li > a,
#sidebar .menu li a {
color: var(--magma-text-muted);
border-radius: var(--magma-radius-sm);
margin: 1px 8px;
padding-top: 10px; padding-bottom: 10px;
transition: background var(--magma-dur) var(--magma-ease), color var(--magma-dur) var(--magma-ease);
}
#sidebar ul.menu > li > a:hover {
background: var(--magma-surface-3);
color: var(--magma-text-strong);
}
#sidebar ul.menu > li.active > a,
#sidebar ul.menu > li.active > a:hover,
#sidebar .menu li.active > a {
background: var(--magma-primary-soft);
color: var(--magma-text-strong);
font-weight: 600;
box-shadow: inset 3px 0 0 var(--magma-primary);
}
#sidebar ul.menu > li > a i,
#sidebar .menu li a i { transition: color var(--magma-dur) var(--magma-ease); }
#sidebar ul.menu > li.active > a i { color: var(--magma-text-strong); }
/* Submenús */
#sidebar .sub-menu li a:hover { color: var(--magma-text-strong); }
#sidebar .sub-menu li.active a { color: var(--magma-text-strong); }
/* ----------------------------------------------------------------------------
6) PANELES / TARJETAS
---------------------------------------------------------------------------- */
.panel, .panel_s, .panel-default, .widget .panel,
.tile, .well {
background: var(--magma-surface);
border: 1px solid var(--magma-border);
border-radius: var(--magma-radius);
box-shadow: var(--magma-shadow-card);
transition: box-shadow var(--magma-dur) var(--magma-ease), border-color var(--magma-dur) var(--magma-ease);
}
.panel:hover, .panel_s:hover { box-shadow: var(--magma-shadow-hover); }
.panel-heading {
background: transparent;
border-bottom: 1px solid var(--magma-border-soft);
color: var(--magma-text-strong);
font-weight: 600;
border-radius: var(--magma-radius) var(--magma-radius) 0 0;
}
.panel-body { color: var(--magma-text); }
.panel-footer { background: var(--magma-surface-2); border-top: 1px solid var(--magma-border-soft); }
/* ----------------------------------------------------------------------------
7) BOTONES
Primario = TINTA (--magma-primary). Rojo solo en .btn-danger (destructivo).
---------------------------------------------------------------------------- */
.btn {
border-radius: var(--magma-radius-sm);
font-weight: 600;
letter-spacing: -0.005em;
transition: transform var(--magma-dur) var(--magma-ease),
box-shadow var(--magma-dur) var(--magma-ease),
background var(--magma-dur) var(--magma-ease),
border-color var(--magma-dur) var(--magma-ease),
color var(--magma-dur) var(--magma-ease);
}
.btn:active { transform: translateY(1px) scale(0.99); }
/* Primario / info (Perfex usa ambos como "acción principal") → tinta */
.btn-primary, .btn-info {
background: var(--magma-primary);
border-color: var(--magma-primary);
color: var(--magma-on-primary);
}
.btn-primary:hover, .btn-info:hover,
.btn-primary:focus, .btn-info:focus {
background: var(--magma-primary-hover);
border-color: var(--magma-primary-hover);
color: var(--magma-on-primary);
}
.btn-primary:active, .btn-info:active { background: var(--magma-primary-hover); }
/* Secundario / default */
.btn-default {
background: var(--magma-surface);
border-color: var(--magma-border);
color: var(--magma-text);
}
.btn-default:hover { background: var(--magma-surface-3); border-color: var(--magma-border); color: var(--magma-text-strong); }
/* Semánticos coherentes */
.btn-success { background: var(--magma-success); border-color: var(--magma-success); }
.btn-warning { background: var(--magma-warning); border-color: var(--magma-warning); }
.btn-danger { background: var(--magma-danger); border-color: var(--magma-danger); }
.btn-success:hover, .btn-warning:hover, .btn-danger:hover { filter: brightness(0.94); box-shadow: var(--magma-shadow-hover); }
/* Botón texto/enlace */
.btn-link { color: var(--magma-primary); }
.btn-link:hover { color: var(--magma-primary-hover); }
/* ----------------------------------------------------------------------------
8) FORMULARIOS
---------------------------------------------------------------------------- */
.form-control, .selectpicker, .dropzone, .select2-selection {
background: var(--magma-surface);
border: 1px solid var(--magma-border);
border-radius: var(--magma-radius-sm);
color: var(--magma-text);
box-shadow: none;
transition: border-color var(--magma-dur) var(--magma-ease), box-shadow var(--magma-dur) var(--magma-ease);
}
.form-control:focus,
.select2-container--focus .select2-selection {
border-color: var(--magma-primary);
box-shadow: 0 0 0 3px var(--magma-primary-ring);
outline: none;
}
.form-control::placeholder { color: var(--magma-text-faint); }
label, .control-label { color: var(--magma-text-strong); font-weight: 550; }
.help-block { color: var(--magma-text-muted); }
.has-error .form-control { border-color: var(--magma-danger); }
.has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(214,32,46,0.22); }
/* Checkbox / radio acentuados */
input[type="checkbox"], input[type="radio"] { accent-color: var(--magma-primary); }
/* ----------------------------------------------------------------------------
9) TABLAS / DATATABLES
---------------------------------------------------------------------------- */
.table { color: var(--magma-text); }
.table > thead > tr > th {
border-bottom: 1px solid var(--magma-border);
color: var(--magma-text-muted);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.table > tbody > tr > td { border-top: 1px solid var(--magma-border-soft); vertical-align: middle; }
.table-hover > tbody > tr:hover { background: var(--magma-surface-2); }
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--magma-surface-2); }
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
background: var(--magma-primary) !important;
border-color: var(--magma-primary) !important;
color: var(--magma-on-primary) !important;
border-radius: var(--magma-radius-xs);
}
.dataTables_wrapper .dataTables_filter input { border-radius: var(--magma-radius-sm); }
/* Enlaces dentro de tablas: neutros también al pasar por encima */
.table a { color: var(--magma-text-strong); }
.table a:hover { color: var(--magma-primary-hover); }
/* ----------------------------------------------------------------------------
10) TABS
---------------------------------------------------------------------------- */
.nav-tabs { border-bottom: 1px solid var(--magma-border); }
.nav-tabs > li > a { color: var(--magma-text-muted); border: none; border-radius: 0; transition: color var(--magma-dur) var(--magma-ease); }
.nav-tabs > li > a:hover { background: transparent; color: var(--magma-text-strong); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
background: transparent;
color: var(--magma-text-strong);
border: none;
box-shadow: inset 0 -2px 0 var(--magma-primary);
font-weight: 600;
}
/* ----------------------------------------------------------------------------
11) BADGES / LABELS / ALERTAS
---------------------------------------------------------------------------- */
.badge, .label {
border-radius: var(--magma-radius-xs);
font-weight: 600;
letter-spacing: 0.01em;
padding: 0.3em 0.6em;
}
.label-primary, .badge { background: var(--magma-surface-3); color: var(--magma-text-strong); }
.label-success { background: rgba(21,160,92,0.14); color: var(--magma-success); }
.label-warning { background: rgba(201,122,14,0.16); color: var(--magma-warning); }
.label-danger { background: rgba(214,32,46,0.14); color: var(--magma-danger); }
.label-info { background: rgba(59,111,176,0.14); color: var(--magma-info); }
.alert { border-radius: var(--magma-radius-sm); border: 1px solid transparent; }
.alert-success { background: rgba(21,160,92,0.10); border-color: rgba(21,160,92,0.25); color: var(--magma-success); }
.alert-danger { background: var(--magma-danger-soft); border-color: rgba(214,32,46,0.25); color: var(--magma-danger-strong); }
.alert-warning { background: rgba(201,122,14,0.10); border-color: rgba(201,122,14,0.25); color: var(--magma-warning); }
.alert-info { background: rgba(59,111,176,0.10); border-color: rgba(59,111,176,0.25); color: var(--magma-info); }
/* ----------------------------------------------------------------------------
12) DROPDOWNS / MODALES / TOOLTIPS
---------------------------------------------------------------------------- */
.dropdown-menu {
background: var(--magma-surface);
border: 1px solid var(--magma-border);
border-radius: var(--magma-radius);
box-shadow: var(--magma-shadow-elev);
padding: 6px;
}
.dropdown-menu > li > a { color: var(--magma-text); border-radius: var(--magma-radius-xs); padding: 8px 12px; transition: background var(--magma-dur) var(--magma-ease); }
.dropdown-menu > li > a:hover { background: var(--magma-surface-3); color: var(--magma-text-strong); }
.dropdown-menu .divider { background: var(--magma-border-soft); }
.modal-content {
background: var(--magma-surface);
border: 1px solid var(--magma-border);
border-radius: var(--magma-radius-lg);
box-shadow: var(--magma-shadow-elev);
}
.modal-header { border-bottom: 1px solid var(--magma-border-soft); }
.modal-footer { border-top: 1px solid var(--magma-border-soft); }
.modal-backdrop.in { opacity: 0.55; backdrop-filter: blur(2px); }
.modal-title { color: var(--magma-text-strong); font-weight: 650; }
.tooltip-inner { background: var(--magma-text-strong); border-radius: var(--magma-radius-xs); font-weight: 500; }
.tooltip.top .tooltip-arrow { border-top-color: var(--magma-text-strong); }
/* Paneles "well"/notas suaves */
.well { background: var(--magma-surface-2); box-shadow: none; }
/* ----------------------------------------------------------------------------
13) MOVIMIENTO global suave (respetando reduced-motion)
---------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
/* ============================================================================
14) CAPA MÓVIL / TÁCTIL (≤ 991px)
- Mata "trampas de scroll" (contenedores internos con altura fija + scroll)
- Objetivos táctiles 44px
- Inputs 16px (evita el zoom de iOS)
- Compactación y respeto de safe-area
============================================================================ */
@media (max-width: 991px) {
/* 14.a) TRAMPAS DE SCROLL: widgets/paneles con scroll interno fijo →
que crezcan a su altura natural para que el dedo scrollee la página. */
.widget [class*="overflow-y-auto"],
.panel-body [class*="overflow-y-auto"],
.widget [class*="tw-h-["],
.panel [style*="max-height"],
.widget [style*="max-height"] {
max-height: none !important;
height: auto !important;
overflow: visible !important;
}
/* 14.b) Objetivos táctiles cómodos */
.btn,
#sidebar ul.menu > li > a,
.dropdown-menu > li > a,
.nav-tabs > li > a,
.pagination > li > a {
min-height: 44px;
display: flex;
align-items: center;
}
.btn { justify-content: center; }
/* 14.c) Inputs sin zoom involuntario en iOS */
.form-control, input, select, textarea { font-size: 16px; }
/* 14.d) Compactar contenedores: más aire vertical, menos lateral perdido */
.panel-body { padding: 14px; }
#wrapper .content { padding-left: 12px; padding-right: 12px; }
/* 14.e) Tablas: scroll horizontal contenido (no rompe el layout) */
.table-responsive { -webkit-overflow-scrolling: touch; border: none; }
/* 14.f) Respetar notch / barra inferior */
body { padding-bottom: env(safe-area-inset-bottom); }
/* 14.g) DASHBOARD compacto: menos margen entre widgets apilados */
#wrapper .content .row > [data-container] { margin-bottom: 2px; }
[data-container] .panel, [data-container] .widget .panel { margin-bottom: 12px; }
.col-md-12.mtop20 { margin-top: 8px; }
}
/* ----------------------------------------------------------------------------
14.h) TABLAS → TARJETAS en móvil (≤767px)
Activado por magma_ui.js (clase .mui-cardtable + data-mlabel en cada td).
Cada fila se convierte en una tarjeta; cada celda muestra "Etiqueta · valor".
---------------------------------------------------------------------------- */
@media (max-width: 767px) {
table.mui-cardtable,
table.mui-cardtable > tbody,
table.mui-cardtable > tbody > tr,
table.mui-cardtable > tbody > tr > td { display: block; width: 100%; }
table.mui-cardtable > thead { position: absolute; left: -9999px; } /* ocultar cabecera real */
table.mui-cardtable > tbody > tr {
background: var(--magma-surface);
border: 1px solid var(--magma-border);
border-radius: var(--magma-radius);
box-shadow: var(--magma-shadow-card);
margin-bottom: 10px;
padding: 4px 14px;
}
table.mui-cardtable > tbody > tr > td {
border: none !important;
padding: 9px 0 !important;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
text-align: right;
min-height: 0;
}
table.mui-cardtable > tbody > tr > td + td { border-top: 1px solid var(--magma-border-soft) !important; }
table.mui-cardtable > tbody > tr > td[data-mlabel]::before {
content: attr(data-mlabel);
flex: 0 0 40%;
text-align: left;
font-weight: 600;
font-size: 12px;
letter-spacing: 0.01em;
color: var(--magma-text-muted);
text-transform: uppercase;
}
/* Celdas sin etiqueta (acciones, checkbox) ocupan la fila completa, centradas */
table.mui-cardtable > tbody > tr > td:not([data-mlabel]) { justify-content: center; text-align: center; }
table.mui-cardtable > tbody > tr > td:empty { display: none; }
}
/* Móvil estrecho */
@media (max-width: 575px) {
h1, .h1 { font-size: 22px; }
h2, .h2 { font-size: 19px; }
.panel { border-radius: var(--magma-radius-sm); }
}
/* ============================================================================
15) DASHBOARD: cuando el reordenado está OFF (móvil), sin pistas de drag
============================================================================ */
body.magma-dash-nodrag .widget,
body.magma-dash-nodrag .magma-draggable { cursor: default !important; }
/* ============================================================================
16) LOGIN (/authentication) — primera impresión, "den ganas de entrar"
La vista usa Tailwind (tw-*) + .btn-primary/.form-control (ya estilados arriba).
Aquí: fondo ambiental con un toque de marca + tarjeta con presencia.
============================================================================ */
body.login_admin {
background:
radial-gradient(1100px 520px at 50% -8%, var(--magma-accent-soft), transparent 62%),
radial-gradient(900px 480px at 110% 110%, rgba(214,32,46,0.06), transparent 60%),
var(--magma-bg) !important;
min-height: 100dvh;
color: var(--magma-text);
}
body.login_admin .authentication-form-wrapper { padding-top: 7vh; }
body.login_admin .company-logo { padding: 8px 10px 4px; }
/* Encabezado */
body.login_admin h1 { color: var(--magma-text-strong) !important; letter-spacing: -0.02em; }
body.login_admin p { color: var(--magma-text-muted) !important; }
/* La tarjeta blanca (div.tw-bg-white) → superficie premium con filo rojo */
body.login_admin .tw-bg-white {
background: var(--magma-surface) !important;
border: 1px solid var(--magma-border) !important;
border-radius: var(--magma-radius-lg) !important;
box-shadow: var(--magma-shadow-elev) !important;
position: relative;
overflow: hidden;
}
body.login_admin .tw-bg-white::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--magma-accent), var(--magma-accent-strong));
}
/* Campos y enlaces */
body.login_admin .control-label { color: var(--magma-text-strong) !important; }
body.login_admin a.text-muted { color: var(--magma-text-muted) !important; transition: color var(--magma-dur) var(--magma-ease); }
body.login_admin a.text-muted:hover { color: var(--magma-primary) !important; }
body.login_admin .btn-primary { padding-top: 11px; padding-bottom: 11px; font-weight: 650; }
/* foco de tinta en los campos del login (Perfex los pone azules) */
body.login_admin .form-control:focus {
border-color: var(--magma-primary) !important;
box-shadow: 0 0 0 3px var(--magma-primary-ring) !important;
outline: none !important;
}
/* Login cómodo en móvil */
@media (max-width: 575px) {
body.login_admin .authentication-form-wrapper { padding-top: 4vh; }
body.login_admin .form-control { font-size: 16px; }
}
/* Si el dispositivo está en modo oscuro, login oscuro coherente */
@media (prefers-color-scheme: dark) {
body.login_admin {
--magma-bg: #0b0d10; --magma-surface: #14161b; --magma-border: #2a303b;
--magma-text: #e8eaee; --magma-text-strong: #f6f7f9; --magma-text-muted: #9ba3b0;
color-scheme: dark;
}
body.login_admin h1 { color: #f6f7f9 !important; }
}
/* ----------------------------------------------------------------------------
17) SIDEBAR (#menu) — ítem ACTIVO con indicador NEUTRO (claro/oscuro)
El sidebar real es