/* ============================================================
XMED Centro de Mando — Design System
Fuente: XMED Manual de Marca 2025
============================================================ */
/* ============================================================
FUENTES — Google Fonts
Importar en el de cada página:
============================================================ */
/* ============================================================
VARIABLES GLOBALES
============================================================ */
:root {
/* --- Colores de marca --- */
--color-beige: #E7DFCB; /* Off Script — base, fondos claros */
--color-blue: #2753A0; /* Blue Render — acción, énfasis, links */
--color-dark: #121211; /* Croma Off — fondos oscuros, texto principal */
/* --- Derivados de marca --- */
--color-blue-hover: #1e3f7a; /* Blue Render oscurecido para hover */
--color-blue-light: #d8e3f5; /* Blue Render muy claro, fondos de badge */
--color-beige-dark: #cfc6ae; /* Beige oscurecido para bordes */
--color-dark-soft: #1e1e1d; /* Croma Off levemente más claro */
--color-dark-muted: #2e2e2c; /* Para cards y superficies sobre oscuro */
/* --- Colores de UI --- */
--color-surface: #1a1a18; /* Superficie principal (sidebar, header) */
--color-surface-2: #222220; /* Superficie secundaria (cards) */
--color-surface-3: #2a2a28; /* Superficie terciaria (inputs, hover) */
--color-border: #333330; /* Bordes sobre fondo oscuro */
--color-border-light: #3d3d3a; /* Bordes más visibles */
/* --- Texto --- */
--color-text-primary: #E7DFCB; /* Texto principal sobre oscuro = beige */
--color-text-secondary: #a09d94; /* Texto secundario / labels */
--color-text-muted: #6b6864; /* Texto deshabilitado / placeholders */
--color-text-on-blue: #ffffff; /* Texto sobre fondo azul */
--color-text-on-beige: #121211; /* Texto sobre fondo beige */
/* --- Estados --- */
--color-success: #3d9e6e;
--color-success-bg: #1a3328;
--color-warning: #c8882a;
--color-warning-bg: #2e2010;
--color-danger: #c84040;
--color-danger-bg: #2e1414;
--color-info: #2753A0;
--color-info-bg: #0f1e3a;
/* --- Tipografías --- */
--font-primary: 'Inter', system-ui, -apple-system, sans-serif;
--font-secondary: 'Lora', Georgia, serif;
--font-mono: 'Space Mono', 'Courier New', monospace;
/* --- Escala tipográfica --- */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
/* --- Pesos tipográficos --- */
--weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
/* --- Espaciado (escala 4px) --- */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
/* --- Border radius --- */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 9999px;
/* --- Sombras --- */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
--shadow-md: 0 4px 12px rgba(0,0,0,0.5);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.6);
--shadow-blue: 0 4px 16px rgba(39,83,160,0.3);
/* --- Transiciones --- */
--transition-fast: 150ms ease;
--transition-normal: 250ms ease;
--transition-slow: 400ms ease;
/* --- Layout --- */
--sidebar-width: 240px;
--header-height: 60px;
--content-max-width: 1200px;
}
/* ============================================================
RESET BASE
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-primary);
font-size: var(--text-base);
font-weight: var(--weight-regular);
line-height: 1.6;
color: var(--color-text-primary);
background-color: var(--color-dark);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
/* ============================================================
TIPOGRAFÍA — Clases utilitarias
============================================================ */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.font-light { font-weight: var(--weight-light); }
.font-regular { font-weight: var(--weight-regular); }
.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold { font-weight: var(--weight-bold); }
.font-primary { font-family: var(--font-primary); }
.font-secondary { font-family: var(--font-secondary); }
.font-mono { font-family: var(--font-mono); }
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-blue { color: var(--color-blue); }
.text-beige { color: var(--color-beige); }
.text-upper { text-transform: uppercase; letter-spacing: 0.08em; }
.text-center { text-align: center; }
.text-right { text-align: right; }
/* ============================================================
BOTONES
============================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-5);
font-family: var(--font-primary);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
line-height: 1;
border: 1px solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
transition: background-color var(--transition-fast),
border-color var(--transition-fast),
color var(--transition-fast),
box-shadow var(--transition-fast);
white-space: nowrap;
user-select: none;
}
.btn:disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
/* Primario — Blue Render */
.btn-primary {
background-color: var(--color-blue);
color: var(--color-text-on-blue);
border-color: var(--color-blue);
}
.btn-primary:hover {
background-color: var(--color-blue-hover);
border-color: var(--color-blue-hover);
box-shadow: var(--shadow-blue);
}
/* Secundario — outline */
.btn-secondary {
background-color: transparent;
color: var(--color-text-primary);
border-color: var(--color-border-light);
}
.btn-secondary:hover {
background-color: var(--color-surface-3);
border-color: var(--color-text-secondary);
}
/* Ghost — sin borde */
.btn-ghost {
background-color: transparent;
color: var(--color-text-secondary);
border-color: transparent;
}
.btn-ghost:hover {
background-color: var(--color-surface-3);
color: var(--color-text-primary);
}
/* Peligro */
.btn-danger {
background-color: transparent;
color: var(--color-danger);
border-color: var(--color-danger);
}
.btn-danger:hover {
background-color: var(--color-danger-bg);
}
/* Tamaños */
.btn-sm {
padding: var(--space-2) var(--space-3);
font-size: var(--text-xs);
border-radius: var(--radius-sm);
}
.btn-lg {
padding: var(--space-4) var(--space-8);
font-size: var(--text-base);
}
.btn-full { width: 100%; }
.btn-icon {
padding: var(--space-3);
aspect-ratio: 1;
}
/* ============================================================
INPUTS Y FORMULARIOS
============================================================ */
.form-group {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.form-label {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.form-input,
.form-select,
.form-textarea {
width: 100%;
padding: var(--space-3) var(--space-4);
background-color: var(--color-surface-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-text-primary);
font-family: var(--font-primary);
font-size: var(--text-sm);
transition: border-color var(--transition-fast),
box-shadow var(--transition-fast);
outline: none;
}
.form-input::placeholder,
.form-textarea::placeholder {
color: var(--color-text-muted);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
border-color: var(--color-blue);
box-shadow: 0 0 0 3px rgba(39,83,160,0.2);
}
.form-textarea {
resize: vertical;
min-height: 100px;
}
.form-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a09d94' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-4) center;
padding-right: var(--space-10);
cursor: pointer;
}
.form-hint {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.form-error {
font-size: var(--text-xs);
color: var(--color-danger);
}
.form-input.is-error,
.form-select.is-error {
border-color: var(--color-danger);
}
/* ============================================================
CARDS
============================================================ */
.card {
background-color: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-6);
}
.card-sm { padding: var(--space-4); }
.card-lg { padding: var(--space-8); }
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-5);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--color-border);
}
.card-title {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--color-text-primary);
}
.card-clickable {
cursor: pointer;
transition: border-color var(--transition-fast),
background-color var(--transition-fast);
}
.card-clickable:hover {
border-color: var(--color-blue);
background-color: var(--color-surface-3);
}
/* ============================================================
BADGES Y ESTADOS
============================================================ */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 2px var(--space-3);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
border-radius: var(--radius-full);
white-space: nowrap;
font-family: var(--font-mono);
letter-spacing: 0.04em;
}
/* Estados de proyecto */
.badge-negociacion { background-color: #2a2310; color: #c8a030; }
.badge-confirmado { background-color: #102a1e; color: #3db87a; }
.badge-ejecucion { background-color: #0f1e3a; color: #5b8ee0; }
.badge-revision { background-color: #2a1a2a; color: #b070d0; }
.badge-finalizado { background-color: #1a2a1a; color: #60a860; }
.badge-cancelado { background-color: #2a1010; color: #c84040; }
/* Estados de documentos */
.badge-borrador { background-color: var(--color-surface-3); color: var(--color-text-muted); }
.badge-enviada { background-color: #0f1e3a; color: #5b8ee0; }
.badge-aprobada { background-color: #102a1e; color: #3db87a; }
.badge-aceptada { background-color: #102a1e; color: #3db87a; }
.badge-rechazada { background-color: #2a1010; color: #c84040; }
.badge-historica { background-color: var(--color-surface-3); color: var(--color-text-muted); }
/* ============================================================
TABLAS
============================================================ */
.table-wrapper {
width: 100%;
overflow-x: auto;
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
}
.table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
}
.table th {
padding: var(--space-3) var(--space-4);
text-align: left;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
background-color: var(--color-surface);
border-bottom: 1px solid var(--color-border);
white-space: nowrap;
}
.table td {
padding: var(--space-4);
color: var(--color-text-primary);
border-bottom: 1px solid var(--color-border);
vertical-align: middle;
}
.table tr:last-child td { border-bottom: none; }
.table tbody tr {
transition: background-color var(--transition-fast);
}
.table tbody tr:hover {
background-color: var(--color-surface-3);
}
.table-clickable tbody tr { cursor: pointer; }
/* ============================================================
DIVISORES Y SEPARADORES
============================================================ */
.divider {
width: 100%;
height: 1px;
background-color: var(--color-border);
margin: var(--space-6) 0;
}
.divider-label {
display: flex;
align-items: center;
gap: var(--space-4);
color: var(--color-text-muted);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
margin: var(--space-6) 0;
}
.divider-label::before,
.divider-label::after {
content: '';
flex: 1;
height: 1px;
background-color: var(--color-border);
}
/* ============================================================
ALERTAS
============================================================ */
.alert {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-4);
border-radius: var(--radius-md);
font-size: var(--text-sm);
border: 1px solid transparent;
}
.alert-success {
background-color: var(--color-success-bg);
color: var(--color-success);
border-color: rgba(61,158,110,0.3);
}
.alert-warning {
background-color: var(--color-warning-bg);
color: var(--color-warning);
border-color: rgba(200,136,42,0.3);
}
.alert-danger {
background-color: var(--color-danger-bg);
color: var(--color-danger);
border-color: rgba(200,64,64,0.3);
}
.alert-info {
background-color: var(--color-info-bg);
color: var(--color-blue);
border-color: rgba(39,83,160,0.3);
}
/* ============================================================
UTILIDADES DE LAYOUT
============================================================ */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }
.p-0 { padding: 0; }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.ml-auto { margin-left: auto; }
/* .hidden es una utilidad: debe ganarle siempre al display del componente.
Sin !important, cualquier regla de una hoja cargada después (bodega.css,
shell.css) con la misma especificidad la anula y el elemento se queda
visible — así aparecía la ficha de cliente VACÍA en nueva remisión y en
reservas (.cliente-chip{display:flex} le ganaba). */
.hidden { display: none !important; }
.visible { display: block; }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cursor-pointer { cursor: pointer; }
.select-none { user-select: none; }
/* ============================================================
STAT CARD — para métricas del dashboard
============================================================ */
.stat-card {
background-color: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-5) var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.stat-label {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.stat-value {
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
color: var(--color-text-primary);
line-height: 1;
}
.stat-sub {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.stat-card.accent-blue {
border-left: 3px solid var(--color-blue);
}
.stat-card.accent-success {
border-left: 3px solid var(--color-success);
}
.stat-card.accent-warning {
border-left: 3px solid var(--color-warning);
}
/* ============================================================
PATRONES DE MARCA XMED
Extraídos del prototipo trabajado con Juan Camilo Valencia
============================================================ */
/* Microtype de marca — "XMED FILMS / MED-COL / A FILM COMPANY" */
.brand-microtype {
font-family: var(--font-mono);
font-size: 0.5rem;
font-weight: 600;
letter-spacing: 0.12em;
color: var(--color-blue);
text-transform: uppercase;
}
/* Dots decorativos de marca — 3 puntos azules */
.brand-dots {
display: flex;
gap: var(--space-1);
margin-top: var(--space-2);
}
.brand-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background-color: var(--color-blue);
}
/* Numeración estilo XMED — "01 —" */
.section-num {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-blue);
letter-spacing: 0.08em;
flex-shrink: 0;
}
/* Section header — fondo Croma Off, número azul, título beige uppercase */
.xmed-section {
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: var(--space-3);
}
.xmed-section-header {
background-color: var(--color-dark);
border-bottom: 1px solid var(--color-border);
padding: var(--space-3) var(--space-5);
display: flex;
align-items: center;
gap: var(--space-3);
}
.xmed-section-title {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-beige);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.xmed-section-body {
background-color: var(--color-surface-2);
padding: var(--space-5) var(--space-6);
}
/* Mode card — card con barra de color en la parte superior */
.mode-card {
background-color: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
cursor: pointer;
transition: border-color var(--transition-fast),
transform var(--transition-fast),
box-shadow var(--transition-fast);
position: relative;
}
.mode-card:hover {
border-color: var(--color-blue);
transform: translateY(-2px);
box-shadow: var(--shadow-blue);
}
.mode-card-bar {
height: 3px;
background-color: var(--color-blue);
}
.mode-card.dark .mode-card-bar {
background-color: var(--color-beige);
}
.mode-card.dark:hover {
border-color: var(--color-beige);
box-shadow: 0 4px 16px rgba(231,223,203,0.15);
}
.mode-card-body {
padding: var(--space-5) var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.mode-card-num {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-blue);
letter-spacing: 0.08em;
}
.mode-card.dark .mode-card-num {
color: var(--color-text-muted);
}
.mode-card-title {
font-size: var(--text-lg);
font-weight: var(--weight-bold);
color: var(--color-text-primary);
line-height: 1.2;
}
.mode-card-desc {
font-size: var(--text-xs);
color: var(--color-text-secondary);
line-height: 1.5;
font-weight: var(--weight-light);
}
.mode-card-arrow {
font-size: var(--text-xl);
color: var(--color-blue);
font-weight: var(--weight-light);
margin-top: var(--space-2);
}
.mode-card.dark .mode-card-arrow {
color: var(--color-beige);
}
/* Total bar — barra de resumen financiero */
.total-bar {
background-color: var(--color-dark);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-4) var(--space-6);
display: flex;
align-items: center;
justify-content: space-between;
}
.total-bar-label {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-beige);
opacity: 0.6;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.total-bar-right {
display: flex;
align-items: baseline;
gap: var(--space-2);
}
.total-bar-value {
font-family: var(--font-mono);
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
color: var(--color-beige);
}
.total-bar-note {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-blue);
}
/* Item row de cotización — fila de equipo con checkbox, nombre, qty, precio, subtotal */
.item-row {
display: grid;
grid-template-columns: 18px 1fr 52px 90px 80px;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
border-bottom: 1px solid var(--color-border);
transition: background-color var(--transition-fast);
}
.item-row:last-child { border-bottom: none; }
.item-row:hover { background-color: var(--color-surface-3); }
.item-row.selected { background-color: rgba(39,83,160,0.06); }
.item-name {
font-size: var(--text-sm);
color: var(--color-text-primary);
line-height: 1.3;
}
.item-subtotal {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-blue);
text-align: right;
}
.item-row.selected .item-subtotal {
font-weight: var(--weight-semibold);
}
/* Package card — contenedor de paquete en cotización */
.package-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: var(--space-4);
}
.package-card-header {
background-color: var(--color-dark);
padding: var(--space-3) var(--space-4);
display: flex;
align-items: center;
gap: var(--space-3);
}
.package-card-num {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-beige);
opacity: 0.5;
letter-spacing: 0.08em;
flex-shrink: 0;
}
.package-card-body {
background-color: var(--color-surface-2);
padding: var(--space-4) var(--space-5);
}
/* Subtotal de paquete */
.pkg-subtotal-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) var(--space-4);
background-color: rgba(39,83,160,0.06);
border-radius: var(--radius-md);
margin-top: var(--space-3);
}
.pkg-subtotal-label {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.pkg-subtotal-value {
font-family: var(--font-mono);
font-size: var(--text-lg);
font-weight: var(--weight-bold);
color: var(--color-blue);
}
/* Footer de página — oscuro con info de marca */
.page-footer {
background-color: var(--color-dark);
border-top: 1px solid var(--color-border);
padding: var(--space-3) var(--space-6);
display: flex;
justify-content: space-between;
align-items: center;
}
.page-footer-left {
font-family: var(--font-mono);
font-size: 0.5rem;
color: var(--color-beige);
opacity: 0.4;
letter-spacing: 0.04em;
}
.page-footer-brand {
font-size: var(--text-sm);
font-weight: var(--weight-bold);
color: var(--color-beige);
letter-spacing: -0.02em;
text-align: right;
line-height: 1.1;
}
.page-footer-brand span {
display: block;
font-size: var(--text-xs);
font-weight: var(--weight-light);
color: var(--color-blue);
letter-spacing: 0.04em;
font-style: italic;
}
/* Botón dashed — para agregar ítems / vincular propuesta */
.btn-dashed {
width: 100%;
background: none;
border: 1.5px dashed var(--color-border-light);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
font-family: var(--font-primary);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-blue);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
transition: border-color var(--transition-fast),
background-color var(--transition-fast);
}
.btn-dashed:hover {
border-color: var(--color-blue);
background-color: rgba(39,83,160,0.06);
}
/* Categoría acordeón — para agrupar equipos en cotización */
.cat-section {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
margin-bottom: var(--space-2);
overflow: hidden;
}
.cat-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) var(--space-4);
cursor: pointer;
background-color: var(--color-surface-3);
transition: background-color var(--transition-fast);
user-select: none;
}
.cat-header:hover { background-color: var(--color-surface-2); }
.cat-header-left {
display: flex;
align-items: center;
gap: var(--space-3);
}
.cat-name {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-text-primary);
}
.cat-subtotal {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-blue);
font-weight: var(--weight-semibold);
}
.cat-arrow {
font-size: var(--text-sm);
color: var(--color-text-muted);
transition: transform var(--transition-normal);
}
.cat-section.open .cat-arrow { transform: rotate(180deg); }
.cat-body {
display: none;
border-top: 1px solid var(--color-border);
}
.cat-section.open .cat-body { display: block; }
/* ============================================================
EMPTY STATE
============================================================ */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-4);
padding: var(--space-16);
text-align: center;
color: var(--color-text-muted);
}
.empty-state-icon {
font-size: 2.5rem;
opacity: 0.4;
}
.empty-state-title {
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--color-text-secondary);
}
.empty-state-desc {
font-size: var(--text-sm);
max-width: 320px;
}
/* ============================================================
LOADING / SPINNER
============================================================ */
.spinner {
width: 20px;
height: 20px;
border: 2px solid var(--color-border-light);
border-top-color: var(--color-blue);
border-radius: 50%;
animation: spin 0.7s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.loading-overlay {
position: fixed;
inset: 0;
background-color: rgba(18,18,17,0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
backdrop-filter: blur(4px);
}
/* ============================================================
iOS MATERIALS — Glassmorphism y texturas
Capa adicional sobre el design system existente.
Usar con clases .glass-* y .ios-* sin reemplazar las base.
============================================================ */
/* --- Material base: vidrio oscuro --- */
.glass {
background: rgba(30, 30, 28, 0.72);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: var(--radius-lg);
}
/* --- Material: vidrio medio (sidebar, panels) --- */
.glass-mid {
background: rgba(24, 24, 22, 0.80);
backdrop-filter: blur(32px) saturate(160%);
-webkit-backdrop-filter: blur(32px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.06);
}
/* --- Material: vidrio azul (acción, énfasis) --- */
.glass-blue {
background: rgba(39, 83, 160, 0.18);
backdrop-filter: blur(20px) saturate(200%);
-webkit-backdrop-filter: blur(20px) saturate(200%);
border: 1px solid rgba(39, 83, 160, 0.30);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08),
0 4px 24px rgba(39, 83, 160, 0.15);
}
/* --- Material: vidrio beige (brand highlight) --- */
.glass-beige {
background: rgba(231, 223, 203, 0.08);
backdrop-filter: blur(20px) saturate(150%);
-webkit-backdrop-filter: blur(20px) saturate(150%);
border: 1px solid rgba(231, 223, 203, 0.14);
box-shadow: inset 0 1px 0 rgba(231,223,203,0.10);
}
/* --- Brillo interno (inner highlight) — toque iOS en borde superior --- */
.glass-highlight {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10),
inset 0 -1px 0 rgba(0, 0, 0, 0.20),
0 8px 32px rgba(0, 0, 0, 0.40);
}
/* --- iOS Grouped Table (estilo UITableView insetGrouped) --- */
.ios-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border-radius: var(--radius-xl);
overflow: hidden;
background: rgba(28, 28, 26, 0.75);
backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.07);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06),
0 4px 24px rgba(0,0,0,0.35);
}
.ios-table th {
padding: var(--space-3) var(--space-5);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
background: rgba(18, 18, 17, 0.60);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
white-space: nowrap;
}
.ios-table td {
padding: var(--space-4) var(--space-5);
color: var(--color-text-primary);
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
vertical-align: middle;
font-size: var(--text-sm);
}
.ios-table tbody tr:last-child td {
border-bottom: none;
}
.ios-table tbody tr {
transition: background-color var(--transition-fast);
}
.ios-table tbody tr:hover {
background: rgba(255, 255, 255, 0.04);
}
/* Separador entre grupos de filas */
.ios-table .row-group-label td {
padding: var(--space-2) var(--space-5);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.10em;
background: rgba(12, 12, 11, 0.50);
border-bottom: 1px solid rgba(255,255,255,0.04);
}
/* --- iOS List Cell (estilo Settings de iPhone) --- */
.ios-cell {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
background: rgba(28, 28, 26, 0.72);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition: background-color var(--transition-fast);
cursor: pointer;
}
.ios-cell:first-child {
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.ios-cell:last-child {
border-bottom: none;
border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.ios-cell:only-child {
border-radius: var(--radius-xl);
}
.ios-cell:hover {
background: rgba(255, 255, 255, 0.04);
}
.ios-cell:active {
background: rgba(255, 255, 255, 0.07);
}
.ios-cell-icon {
width: 32px;
height: 32px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
background: rgba(39, 83, 160, 0.20);
}
.ios-cell-content {
flex: 1;
min-width: 0;
}
.ios-cell-title {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text-primary);
}
.ios-cell-subtitle {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-top: 2px;
}
.ios-cell-value {
font-size: var(--text-sm);
color: var(--color-text-secondary);
font-family: var(--font-mono);
}
.ios-cell-chevron {
color: var(--color-text-muted);
font-size: var(--text-xs);
flex-shrink: 0;
}
/* Contenedor de grupo iOS */
.ios-group {
border-radius: var(--radius-xl);
overflow: hidden;
backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.07);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06),
0 4px 24px rgba(0,0,0,0.30);
}
.ios-group-label {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.10em;
padding: 0 var(--space-2) var(--space-2);
}
/* --- Glass Card --- */
.glass-card {
background: rgba(28, 28, 26, 0.70);
backdrop-filter: blur(28px) saturate(170%);
-webkit-backdrop-filter: blur(28px) saturate(170%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-xl);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08),
inset 0 -1px 0 rgba(0,0,0,0.15),
0 8px 32px rgba(0,0,0,0.40);
padding: var(--space-6);
transition: box-shadow var(--transition-normal),
transform var(--transition-normal);
}
.glass-card:hover {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.10),
inset 0 -1px 0 rgba(0,0,0,0.15),
0 12px 40px rgba(0,0,0,0.50),
0 0 0 1px rgba(39,83,160,0.20);
transform: translateY(-1px);
}
/* --- Glass Stat Card --- */
.glass-stat {
background: rgba(22, 22, 20, 0.75);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: var(--radius-xl);
padding: var(--space-5) var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-2);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.07),
0 4px 20px rgba(0,0,0,0.35);
position: relative;
overflow: hidden;
}
/* Accent glow en el borde superior */
.glass-stat::before {
content: '';
position: absolute;
top: 0;
left: var(--space-5);
right: var(--space-5);
height: 1px;
background: linear-gradient(90deg, transparent, rgba(39,83,160,0.60), transparent);
}
.glass-stat.accent-blue::before {
background: linear-gradient(90deg, transparent, rgba(39,83,160,0.80), transparent);
}
.glass-stat.accent-success::before {
background: linear-gradient(90deg, transparent, rgba(61,158,110,0.80), transparent);
}
.glass-stat.accent-warning::before {
background: linear-gradient(90deg, transparent, rgba(200,136,42,0.80), transparent);
}
/* --- Noise texture overlay (grano sutil como iOS) --- */
.texture-noise {
position: relative;
}
.texture-noise::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.90' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 128px 128px;
pointer-events: none;
mix-blend-mode: overlay;
opacity: 0.5;
}
/* --- iOS Modal / Sheet --- */
.ios-sheet {
background: rgba(22, 22, 20, 0.88);
backdrop-filter: blur(40px) saturate(180%);
-webkit-backdrop-filter: blur(40px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
box-shadow: 0 -8px 40px rgba(0,0,0,0.60),
inset 0 1px 0 rgba(255,255,255,0.10);
}
.ios-sheet-handle {
width: 36px;
height: 4px;
background: rgba(255, 255, 255, 0.20);
border-radius: var(--radius-full);
margin: var(--space-3) auto var(--space-5);
}
/* --- iOS Toggle --- */
.ios-toggle {
position: relative;
width: 44px;
height: 26px;
flex-shrink: 0;
}
.ios-toggle input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.ios-toggle-track {
position: absolute;
inset: 0;
border-radius: var(--radius-full);
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.08);
transition: background var(--transition-normal);
cursor: pointer;
}
.ios-toggle input:checked ~ .ios-toggle-track {
background: var(--color-blue);
border-color: var(--color-blue);
}
.ios-toggle-thumb {
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
border-radius: 50%;
background: white;
box-shadow: 0 2px 6px rgba(0,0,0,0.40);
transition: transform var(--transition-normal);
pointer-events: none;
}
.ios-toggle input:checked ~ .ios-toggle-track .ios-toggle-thumb {
transform: translateX(18px);
}
/* --- Blur background para modales --- */
.blur-backdrop {
backdrop-filter: blur(8px) brightness(0.6);
-webkit-backdrop-filter: blur(8px) brightness(0.6);
}
/* ============================================================
RESPONSIVE — Mobile first
============================================================ */
@media (max-width: 768px) {
:root {
--sidebar-width: 100%;
--text-3xl: 1.5rem;
--text-4xl: 1.875rem;
}
.grid-2,
.grid-3,
.grid-4 {
grid-template-columns: 1fr;
}
.hide-mobile { display: none !important; }
.show-mobile { display: block !important; }
}
@media (min-width: 769px) {
.hide-desktop { display: none !important; }
.show-desktop { display: block !important; }
}