/* ============================================================ CAPA PREMIUM — F1 (fundamentos) ------------------------------------------------------------ Sube el acabado percibido sin tocar vistas: neutros teñidos, sombras multinivel (elevación creíble), radios y foco. CASCADA: usamos selectores `:root .clase` (especificidad 0,2,0) para GANAR a las utilidades de Tailwind (0,1,0) SIN !important. Así seguimos por DEBAJO de: · modo cómodo → `:root.comfort .clase` (0,3,0) · modo oscuro → `.dark .clase !important` (dark.css) es decir: estas reglas solo "mandan" en el modo CLARO por defecto; comfort y dark las pisan en los suyos. BRANDING: no se toca ningún color de marca; --color-primary se sigue inyectando desde PHP. Aquí solo refinamos neutros/sombras. ============================================================ */ :root { /* Color de sombra: slate translúcido (NO negro) → sombras "caras". */ --shadow-rgb: 15 23 42; /* slate-900 */ /* Fondo de app y superficies teñidas (nivel "marcado": el fondo más presente hace que las tarjetas blancas resalten claramente). */ --premium-app-bg: #e9edf3; --premium-surface-2: #e4e8ef; /* equivalente premium a gray-100 */ --premium-border: #e2e6ee; /* borde fino desaturado */ --premium-border-strong: #d2d7e0; } /* En oscuro la elevación se comunica con superficie, no con sombra: bajamos la opacidad de la sombra para que no "ensucie". */ :root.dark { --shadow-rgb: 0 0 0; } /* ---- Fondo de la app + superficies neutras (solo modo claro) ---- */ :root body { background-color: var(--premium-app-bg); } :root .bg-gray-50 { background-color: var(--premium-app-bg); } :root .bg-gray-100 { background-color: var(--premium-surface-2); } /* ---- Bordes finos y desaturados ("hairline") ---- */ :root .border-gray-100 { border-color: #eef0f3; } :root .border-gray-200 { border-color: var(--premium-border); } :root .border-gray-300 { border-color: var(--premium-border-strong); } /* ---- Elevación: sombras de DOS capas (contacto + ambiental). Nivel "marcado": visibles a simple vista, con la capa ambiental amplia para el efecto "flotante". ---- */ :root .shadow-sm { box-shadow: 0 1px 2px 0 rgb(var(--shadow-rgb) / 0.05), 0 4px 12px -2px rgb(var(--shadow-rgb) / 0.10); } :root .shadow { box-shadow: 0 2px 4px -1px rgb(var(--shadow-rgb) / 0.07), 0 8px 20px -4px rgb(var(--shadow-rgb) / 0.13); } :root .shadow-md { box-shadow: 0 2px 4px -1px rgb(var(--shadow-rgb) / 0.08), 0 12px 28px -6px rgb(var(--shadow-rgb) / 0.16); } :root .shadow-lg { box-shadow: 0 6px 12px -3px rgb(var(--shadow-rgb) / 0.10), 0 24px 48px -12px rgb(var(--shadow-rgb) / 0.20); } /* ---- Radios generosos (más "producto") ---- */ :root .rounded-lg { border-radius: 12px; } :root .rounded-xl { border-radius: 16px; } :root .rounded-2xl { border-radius: 20px; } /* ---- Foco accesible de doble anillo (nítido sobre cualquier fondo) ---- */ :root *:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-primary) 55%, transparent); outline-offset: 2px; border-radius: 4px; } /* ============================================================ F2 — Componentes núcleo (campos de formulario) ============================================================ */ /* Campos de formulario: al enfocar, el borde se tiñe de marca + anillo suave (el patrón "el campo se enciende" de los productos cuidados). Sustituye al outline genérico en estos elementos por algo más integrado y accesible. */ :root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus, :root select:focus, :root textarea:focus, :root [contenteditable="true"]:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent); } /* Transición suave del borde/anillo al enfocar (entra rápido, sale antes). */ :root input:not([type="checkbox"]):not([type="radio"]), :root select, :root textarea { transition: border-color .14s ease, box-shadow .14s ease; } /* ============================================================ F3 — Pantallas estrella (utilidades reutilizables) ============================================================ */ /* Barra de pestañas en una sola fila con desplazamiento horizontal SIN barra visible (para vistas con muchas pestañas, p.ej. la ficha del paciente con 12). Evita que envuelvan a varias filas en pantallas medianas. */ .tabs-scroll { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge antiguo */ scroll-behavior: smooth; } .tabs-scroll::-webkit-scrollbar { display: none; } /* Chrome/Safari */ /* Elevación del patrón de TARJETA dominante en toda la app: tarjeta blanca con radio grande y borde gris (bg-white rounded-xl/2xl border border-gray-200) que hoy va PLANA (solo borde). Le damos la sombra premium sin tocar cada vista — un solo sitio eleva las tarjetas de informes, paneles, listas, etc. Selector compuesto (0,4,0) → gana a Tailwind; en dark --shadow-rgb=0 0 0 la deja sutil. Las que ya traen `shadow-*` no cambian (mismo valor). */ :root .bg-white.rounded-xl.border.border-gray-200, :root .bg-white.rounded-2xl.border.border-gray-200, :root .bg-white.rounded-xl.border.border-gray-100, :root .bg-white.rounded-2xl.border.border-gray-100 { box-shadow: 0 2px 4px -1px rgb(var(--shadow-rgb) / 0.08), 0 10px 28px -8px rgb(var(--shadow-rgb) / 0.16); } /* ============================================================ F2 — Modales: entrada scale-in + sombra profunda ------------------------------------------------------------ Todos los modales del CRM siguen el patrón overlay `.fixed.inset-0` con el PANEL blanco a 1-2 niveles de profundidad (directo o dentro del contenedor flex de centrado). La animación CSS se re-dispara cada vez que el overlay pasa de display:none a visible (Alpine x-show / .hidden), así que no hace falta tocar ninguna vista. Limitado a ≤2 niveles para NO animar las tarjetas blancas internas de los modales grandes (agenda, facturas). */ @keyframes premiumModalIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } } :root .fixed.inset-0 > :is(.bg-white, .bg-gray-50)[class*="rounded"], :root .fixed.inset-0 > div > :is(.bg-white, .bg-gray-50)[class*="rounded"] { animation: premiumModalIn 200ms cubic-bezier(0.16, 1, 0.3, 1) both; box-shadow: 0 10px 20px -8px rgb(var(--shadow-rgb) / 0.18), 0 32px 64px -16px rgb(var(--shadow-rgb) / 0.28); } @media (prefers-reduced-motion: reduce) { :root .fixed.inset-0 > :is(.bg-white, .bg-gray-50)[class*="rounded"], :root .fixed.inset-0 > div > :is(.bg-white, .bg-gray-50)[class*="rounded"] { animation: none; } } /* ============================================================ F2 — Estados semánticos (badges unificados) — TOKENS + CLASES ------------------------------------------------------------ Groundwork para unificar los badges sueltos de citas/facturas/ presupuestos: 4 estados con color FIJO (desacoplados de la marca, para que un aviso no se confunda con un CTA si la marca es verde o roja) + neutro. Aún sin consumidores: se adoptan per-vista en pasadas posteriores sustituyendo los combos Tailwind ad hoc por `.badge .badge-success` etc. En dark, dark.css no las conoce → los tonos -soft se mantienen legibles por contraste propio. */ :root { --state-success: #059669; --state-success-soft: #ecfdf5; --state-success-line: #a7f3d0; --state-warning: #b45309; --state-warning-soft: #fffbeb; --state-warning-line: #fde68a; --state-danger: #dc2626; --state-danger-soft: #fef2f2; --state-danger-line: #fecaca; --state-info: #1d4ed8; --state-info-soft: #eff6ff; --state-info-line: #bfdbfe; } .badge { display: inline-flex; align-items: center; gap: .3em; padding: .15rem .55rem; border-radius: 9999px; font-size: .72rem; font-weight: 600; line-height: 1.3; border: 1px solid transparent; white-space: nowrap; } .badge-success { color: var(--state-success); background: var(--state-success-soft); border-color: var(--state-success-line); } .badge-warning { color: var(--state-warning); background: var(--state-warning-soft); border-color: var(--state-warning-line); } .badge-danger { color: var(--state-danger); background: var(--state-danger-soft); border-color: var(--state-danger-line); } .badge-info { color: var(--state-info); background: var(--state-info-soft); border-color: var(--state-info-line); } .badge-neutral { color: #475569; background: #f1f5f9; border-color: #e2e8f0; }