/* ================================================================ APP CLAY — Detalle "arcilla pulida" Se activa SOLO cuando `data-theme` empieza con "arcilla" (arcilla, arcilla-azul, arcilla-verde, arcilla-blanco). Para los temas planos (clinico-clasico, azul-*), este archivo es no-op y la estética del sistema queda intacta. Construcción: cards con doble sombra (relieve físico), iconos como guijarros, cintas marcador laterales por categoría, tipografía Material Symbols Rounded (más suave). Tokens consumidos (definidos en tokens.css por tema arcilla): --c-clay-card, --c-clay-elev-from, --c-clay-elev-to, --c-clay-shadow, --c-clay-shadow-h, --c-clay-shadow-i, --c-clay-text, --c-clay-text-soft, --c-clay-press, --mk-1..6, --mk-danger, --mk-info, --mk-success ================================================================ */ /* Carga centralizada del set BENTO (V100): se incluye en todas las pantallas que ya cargan app-clay.css, sin tocar 60 . No-op salvo data-theme^="bento". (El @import debe ir antes de cualquier regla CSS.) */ @import url('app-bento.css'); /* Carga centralizada del set DENSA (V119): misma estrategia que bento. No-op salvo data-theme^="densa" (slate / midnight / clear / sage). */ @import url('app-densa.css'); /* ===== Iconos: Material Symbols Rounded forzado ===== Incluye opsz para que la fuente variable resuelva el glifo correctamente (sin opsz, en algunos browsers cae al fallback y muestra el ligature como texto). */ [data-theme^="arcilla"] .icon { font-family: 'Material Symbols Rounded' !important; font-variation-settings: 'wght' 500, 'FILL' 0, 'GRAD' 0, 'opsz' 24; font-feature-settings: 'liga'; } /* ===== Body / Shell base ===== */ [data-theme^="arcilla"] body { background: var(--c-bg); } [data-theme^="arcilla"] .app-sidebar { background: var(--c-surface-hover); border-right: none; box-shadow: inset -8px 0 16px -8px var(--c-clay-shadow-i); } [data-theme^="arcilla"] .app-header { background: var(--c-bg); border-bottom: none; box-shadow: 0 4px 12px -8px var(--c-clay-shadow); } /* Sidebar sticky: el background del sticky tiene que coincidir con el del sidebar en arcilla (que es --c-surface-hover, no --c-surface). */ [data-theme^="arcilla"] .app-sidebar__brand-logo, [data-theme^="arcilla"] .app-sidebar__brand-logo--mini, [data-theme^="arcilla"] .app-sidebar__footer { background: var(--c-surface-hover) !important; } /* ===== Sidebar: logo, nav-items, nav-group ===== */ /* Logo: solo apenas redondear puntas, plano */ [data-theme^="arcilla"] .app-sidebar__brand-logo img { border-radius: 4px !important; } [data-theme^="arcilla"] .app-sidebar__brand-logo--mini img { border-radius: 3px !important; } /* Logo del footer (JST): mismo tratamiento sutil */ [data-theme^="arcilla"] .app-sidebar__footer img { border-radius: 4px; } /* Mismo tratamiento de redondeo para los logos del login (empresa + JST) */ [data-theme^="arcilla"] .portal-login__brand img { border-radius: 4px; } [data-theme^="arcilla"] .portal-login__footer img { border-radius: 4px; } /* Nav items con relieve clay cuando están activos */ [data-theme^="arcilla"] .nav-item { border-radius: 12px !important; transition: all 0.15s; } [data-theme^="arcilla"] .nav-item:hover { background: var(--c-primary-soft); } [data-theme^="arcilla"] .nav-item--active { background: linear-gradient(145deg, var(--c-clay-elev-from), var(--c-clay-elev-to)) !important; box-shadow: 3px 3px 7px var(--c-clay-shadow-i), -1px -1px 4px rgba(255, 255, 255, 0.9), inset 1px 1px 1px rgba(255, 255, 255, 0.9) !important; color: var(--c-primary) !important; font-weight: 600 !important; } [data-theme^="arcilla"] .nav-item--active .icon { color: var(--c-primary) !important; } /* Nav group head: apenas redondeado, tinte claro, font-size heredado */ [data-theme^="arcilla"] .nav-group__head { border-radius: 8px !important; background: var(--c-primary-soft) !important; background: color-mix(in srgb, var(--c-primary) 6%, transparent) !important; color: var(--c-clay-text-soft) !important; transition: background 0.15s, color 0.15s; } [data-theme^="arcilla"] .nav-group__head:hover { background: color-mix(in srgb, var(--c-primary) 12%, transparent) !important; color: var(--c-primary) !important; } [data-theme^="arcilla"] .nav-group__chevron { color: var(--c-primary) !important; opacity: 0.55; } [data-theme^="arcilla"] .nav-group__head:hover .nav-group__chevron { opacity: 1; } [data-theme^="arcilla"] .nav-sublabel { color: var(--c-primary) !important; opacity: 0.7; } [data-theme^="arcilla"] .nav-group__count { background: linear-gradient(145deg, var(--c-clay-elev-from), var(--c-clay-elev-to)) !important; box-shadow: inset 1px 1px 2px var(--c-clay-shadow-i), 1px 1px 2px rgba(255, 255, 255, 0.5) !important; color: var(--c-primary) !important; border-radius: 999px !important; } /* ===== Header: avatar como guijarro ===== El sistema base setea color: var(--c-primary). Sobre el fondo oscuro gradient queda ilegible — forzamos texto claro para contraste. */ [data-theme^="arcilla"] .avatar { background: linear-gradient(145deg, var(--c-danger), color-mix(in srgb, var(--c-danger) 80%, black)) !important; color: var(--c-text-on-primary) !important; box-shadow: 3px 3px 7px color-mix(in srgb, var(--c-danger) 40%, transparent), inset 1px 1px 1px rgba(255, 255, 255, 0.3) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); font-weight: 700; } /* ===== Welcome del dashboard ===== */ [data-theme^="arcilla"] .dash-welcome { background: var(--c-clay-card); padding: var(--sp-3) var(--sp-4) !important; border-radius: 20px !important; box-shadow: 5px 6px 14px var(--c-clay-shadow), inset 0 1px 0 var(--c-clay-shadow-h); margin-bottom: var(--sp-3); } /* ===== CARDS: kpi, quick-action, dash-news, dash-pending-card ===== Lenguaje físico: doble sombra (interior + exterior) + radius 20 + relieve */ [data-theme^="arcilla"] .kpi, [data-theme^="arcilla"] .quick-action, [data-theme^="arcilla"] .dash-news, [data-theme^="arcilla"] .dash-pending-card { background: var(--c-clay-card) !important; border: none !important; border-radius: 20px !important; box-shadow: 6px 8px 18px var(--c-clay-shadow), inset 0 1px 0 var(--c-clay-shadow-h), inset 0 -3px 6px var(--c-clay-shadow-i) !important; transition: all 0.18s cubic-bezier(0.3, 0.8, 0.4, 1); position: relative; } /* KPIs arcilla: apenas un tinte de color por posición + icono difuminado a la derecha (como bento, pero más sutil para no pelear con el relieve clay). Mantiene fondo + sombras clay del bloque de arriba; sólo tiñe levemente y suma el watermark detrás del texto. */ [data-theme^="arcilla"] .kpi { position: relative; z-index: 0; /* contexto de apilado para el watermark (::after z-index:-1) */ /* el overflow:hidden NO va acá: la cinta marcador fuerza overflow:visible !important más abajo y por orden nos ganaría. Lo forzamos DESPUÉS (ver regla al final del bloque de la cinta). */ background: color-mix(in srgb, var(--mk, var(--c-clay-card)) 12%, var(--c-clay-card)) !important; } [data-theme^="arcilla"] .kpi:nth-child(1) { --mk: var(--mk-1); } [data-theme^="arcilla"] .kpi:nth-child(2) { --mk: var(--mk-2); } [data-theme^="arcilla"] .kpi:nth-child(3) { --mk: var(--mk-3); } [data-theme^="arcilla"] .kpi:nth-child(4) { --mk: var(--mk-4); } [data-theme^="arcilla"] .kpi:nth-child(5) { --mk: var(--mk-5); } [data-theme^="arcilla"] .kpi:nth-child(6) { --mk: var(--mk-6); } [data-theme^="arcilla"] .kpi::after { content: ''; font-family: 'Material Symbols Rounded'; font-weight: normal; font-size: 92px; line-height: 1; position: absolute; top: 50%; right: -14px; transform: translateY(-50%); color: color-mix(in srgb, var(--mk, var(--c-clay-text)) 18%, transparent); z-index: -1; pointer-events: none; font-feature-settings: 'liga'; } [data-theme^="arcilla"] .kpi:nth-child(1)::after { content: 'calendar_month'; } /* Turnos hoy */ [data-theme^="arcilla"] .kpi:nth-child(2)::after { content: 'how_to_reg'; } /* Atendidos */ [data-theme^="arcilla"] .kpi:nth-child(3)::after { content: 'weekend'; } /* En sala */ [data-theme^="arcilla"] .kpi:nth-child(4)::after { content: 'payments'; } /* Cobros del día */ [data-theme^="arcilla"] .kpi:hover, [data-theme^="arcilla"] .quick-action:hover, [data-theme^="arcilla"] .dash-pending-card:hover, [data-theme^="arcilla"] .dash-news-item:hover { transform: translateY(2px); box-shadow: 3px 4px 10px var(--c-clay-shadow), inset 0 1px 0 var(--c-clay-shadow-h), inset 0 -2px 4px var(--c-clay-shadow-i) !important; } /* ===== KPIs: cinta marcador + value con relieve ===== */ [data-theme^="arcilla"] .kpi, [data-theme^="arcilla"] .quick-action, [data-theme^="arcilla"] .dash-pending-card { overflow: visible !important; padding-left: calc(var(--sp-4) + 6px) !important; } /* PERO el KPI sí debe recortar su watermark (::after) en el borde derecho (look bento). La cinta marcador (::before) está al borde IZQUIERDO y queda adentro, así que hidden no la corta; su glow es hacia adentro. Esta regla va DESPUÉS del overflow:visible de arriba para ganarle (mismo peso, más abajo). */ [data-theme^="arcilla"] .kpi { overflow: hidden !important; } [data-theme^="arcilla"] .kpi::before, [data-theme^="arcilla"] .quick-action::before, [data-theme^="arcilla"] .dash-pending-card::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; background: var(--mk, var(--c-clay-press)); border-radius: 0 3px 3px 0; opacity: 0.7; box-shadow: 3px 0 10px -2px var(--mk, var(--c-clay-press)); transition: opacity 0.28s, width 0.28s; } [data-theme^="arcilla"] .kpi:hover::before, [data-theme^="arcilla"] .quick-action:hover::before, [data-theme^="arcilla"] .dash-pending-card:hover::before { opacity: 0.95; width: 4px; } [data-theme^="arcilla"] .kpi__value { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0 2px 3px var(--c-clay-shadow-i); font-weight: 700 !important; } /* Cintas KPI por categoría (nth-child) */ [data-theme^="arcilla"] .kpi:nth-child(1) { --mk: var(--mk-1); } [data-theme^="arcilla"] .kpi:nth-child(2) { --mk: var(--mk-2); } [data-theme^="arcilla"] .kpi:nth-child(3) { --mk: var(--mk-3); } [data-theme^="arcilla"] .kpi:nth-child(4) { --mk: var(--mk-4); } /* Cintas quick-actions (6 colores) */ [data-theme^="arcilla"] .quick-action:nth-child(1) { --mk: var(--mk-1); } [data-theme^="arcilla"] .quick-action:nth-child(2) { --mk: var(--mk-5); } [data-theme^="arcilla"] .quick-action:nth-child(3) { --mk: var(--mk-2); } [data-theme^="arcilla"] .quick-action:nth-child(4) { --mk: var(--mk-6); } [data-theme^="arcilla"] .quick-action:nth-child(5) { --mk: var(--mk-4); } [data-theme^="arcilla"] .quick-action:nth-child(6) { --mk: var(--mk-3); } /* Cintas pendientes por severidad */ [data-theme^="arcilla"] .dash-pending-card { --mk: var(--c-clay-text-soft); } [data-theme^="arcilla"] .dash-pending-card:has(.dash-pending-card__icon--danger) { --mk: var(--mk-danger); } [data-theme^="arcilla"] .dash-pending-card:has(.dash-pending-card__icon--info) { --mk: var(--mk-info); } [data-theme^="arcilla"] .dash-pending-card:has(.dash-pending-card__icon--success) { --mk: var(--mk-success); } /* ===== ICONOS como guijarros físicos (quick-action, news, pending) ===== */ [data-theme^="arcilla"] .quick-action__icon { width: 52px !important; height: 52px !important; border-radius: 18px !important; background: linear-gradient(145deg, var(--c-clay-elev-from) 0%, var(--c-clay-elev-to) 100%) !important; color: var(--c-clay-press) !important; box-shadow: 4px 5px 10px var(--c-clay-shadow), -2px -2px 6px rgba(255, 255, 255, 0.95), inset 1px 1px 1px rgba(255, 255, 255, 0.95), inset -1px -1px 2px var(--c-clay-shadow-i) !important; transition: all 0.2s; } [data-theme^="arcilla"] .quick-action__icon .icon { font-variation-settings: 'wght' 600, 'FILL' 1; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6)); } [data-theme^="arcilla"] .quick-action:hover .quick-action__icon { box-shadow: 2px 3px 6px var(--c-clay-shadow), -1px -1px 3px rgba(255, 255, 255, 0.8), inset 2px 2px 3px var(--c-clay-shadow-i), inset -1px -1px 1px rgba(255, 255, 255, 0.8) !important; } [data-theme^="arcilla"] .dash-news-item__thumb, [data-theme^="arcilla"] .dash-pending-card__icon { border-radius: 14px !important; background: linear-gradient(145deg, var(--c-clay-elev-from), var(--c-clay-elev-to)) !important; box-shadow: 3px 3px 7px var(--c-clay-shadow), -1px -1px 4px rgba(255, 255, 255, 0.9), inset 1px 1px 1px rgba(255, 255, 255, 0.9); color: var(--c-clay-press) !important; } /* Tintes por tipo de novedad / severidad */ [data-theme^="arcilla"] .dash-news-item__thumb--link { background: linear-gradient(145deg, var(--c-success-soft), color-mix(in srgb, var(--c-success-soft) 75%, var(--c-success))) !important; color: var(--c-success) !important; } [data-theme^="arcilla"] .dash-news-item__thumb--video { background: linear-gradient(145deg, color-mix(in srgb, var(--mk-5) 15%, white), color-mix(in srgb, var(--mk-5) 30%, white)) !important; color: var(--mk-5) !important; } [data-theme^="arcilla"] .dash-news-item__thumb--note { background: linear-gradient(145deg, var(--c-warning-soft), color-mix(in srgb, var(--c-warning-soft) 75%, var(--c-warning))) !important; color: var(--c-warning) !important; } [data-theme^="arcilla"] .dash-pending-card__icon--danger { background: linear-gradient(145deg, var(--c-danger-soft), color-mix(in srgb, var(--c-danger-soft) 75%, var(--c-danger))) !important; color: var(--c-danger) !important; } [data-theme^="arcilla"] .dash-pending-card__icon--success { background: linear-gradient(145deg, var(--c-success-soft), color-mix(in srgb, var(--c-success-soft) 75%, var(--c-success))) !important; color: var(--c-success) !important; } [data-theme^="arcilla"] .dash-pending-card__icon--info { background: linear-gradient(145deg, var(--c-info-soft), color-mix(in srgb, var(--c-info-soft) 75%, var(--c-info))) !important; color: var(--c-info) !important; } /* Tinte distinto por posición en "Pendientes del día": cinta marcador + ícono */ [data-theme^="arcilla"] .dash-pending-card:nth-child(1) { --mk: var(--mk-1); } [data-theme^="arcilla"] .dash-pending-card:nth-child(2) { --mk: var(--mk-2); } [data-theme^="arcilla"] .dash-pending-card:nth-child(3) { --mk: var(--mk-3); } [data-theme^="arcilla"] .dash-pending-card:nth-child(4) { --mk: var(--mk-4); } [data-theme^="arcilla"] .dash-pending-card:nth-child(5) { --mk: var(--mk-5); } [data-theme^="arcilla"] .dash-pending-card:nth-child(6) { --mk: var(--mk-6); } [data-theme^="arcilla"] .dash-pending-card:nth-child(1) .dash-pending-card__icon { background: linear-gradient(145deg, color-mix(in srgb, var(--mk-1) 15%, white), color-mix(in srgb, var(--mk-1) 32%, white)) !important; color: var(--mk-1) !important; } [data-theme^="arcilla"] .dash-pending-card:nth-child(2) .dash-pending-card__icon { background: linear-gradient(145deg, color-mix(in srgb, var(--mk-2) 15%, white), color-mix(in srgb, var(--mk-2) 32%, white)) !important; color: var(--mk-2) !important; } [data-theme^="arcilla"] .dash-pending-card:nth-child(3) .dash-pending-card__icon { background: linear-gradient(145deg, color-mix(in srgb, var(--mk-3) 15%, white), color-mix(in srgb, var(--mk-3) 32%, white)) !important; color: var(--mk-3) !important; } [data-theme^="arcilla"] .dash-pending-card:nth-child(4) .dash-pending-card__icon { background: linear-gradient(145deg, color-mix(in srgb, var(--mk-4) 15%, white), color-mix(in srgb, var(--mk-4) 32%, white)) !important; color: var(--mk-4) !important; } [data-theme^="arcilla"] .dash-pending-card:nth-child(5) .dash-pending-card__icon { background: linear-gradient(145deg, color-mix(in srgb, var(--mk-5) 15%, white), color-mix(in srgb, var(--mk-5) 32%, white)) !important; color: var(--mk-5) !important; } [data-theme^="arcilla"] .dash-pending-card:nth-child(6) .dash-pending-card__icon { background: linear-gradient(145deg, color-mix(in srgb, var(--mk-6) 15%, white), color-mix(in srgb, var(--mk-6) 32%, white)) !important; color: var(--mk-6) !important; } /* News y pendientes con padding interno */ [data-theme^="arcilla"] .dash-news__head { padding-bottom: var(--sp-3); border-bottom: 1px dashed var(--c-clay-shadow-i); } [data-theme^="arcilla"] .dash-news-item { border-radius: 14px !important; padding: var(--sp-2) var(--sp-3); } /* Quick-action badge: bolita roja con relieve */ [data-theme^="arcilla"] .quick-action__badge { background: linear-gradient(145deg, var(--c-danger), color-mix(in srgb, var(--c-danger) 80%, black)) !important; color: white; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: 2px 3px 6px color-mix(in srgb, var(--c-danger) 40%, transparent), inset 1px 1px 1px rgba(255, 255, 255, 0.4); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } /* Pendientes count: pildorita con relieve */ [data-theme^="arcilla"] .dash-pending-card__count { background: linear-gradient(145deg, var(--c-clay-elev-from), var(--c-clay-elev-to)); border-radius: 999px; padding: 4px 12px !important; box-shadow: inset 1px 1px 2px var(--c-clay-shadow-i), 1px 1px 2px rgba(255, 255, 255, 0.6); color: var(--c-clay-press) !important; font-weight: 700; } /* ================================================================ Densidad de "Pendientes del día" en clay (inicio launcher, V121). El inicio launcher es más alto que el clásico (suma la botonera + el panel de módulos). En clay/bento el welcome lleva padding y las cards son más espaciosas, así que la columna de Pendientes (5 cards) empujaba el alto sobre el viewport → scroll vertical. Achicamos un toque esa columna (gap + padding vertical + ícono). Solo arcilla (plano/densa ya entraban). Misma regla, en app-bento.css, para bento. ================================================================ */ [data-theme^="arcilla"] .dash-pending { gap: 6px; } [data-theme^="arcilla"] .dash-pending-card { padding-top: 5px; padding-bottom: 5px; } [data-theme^="arcilla"] .dash-pending-card__icon { width: 32px; height: 32px; } /* ================================================================ ABM — master + detail (Nomenclador, Especialidades, Insumos, etc) ================================================================ */ /* Master list (sidebar de prácticas) */ [data-theme^="arcilla"] .abm-list { background: var(--c-clay-card) !important; border: none !important; border-radius: 20px !important; box-shadow: 6px 8px 18px var(--c-clay-shadow), inset 0 1px 0 var(--c-clay-shadow-h), inset 0 -3px 6px var(--c-clay-shadow-i) !important; overflow: hidden; } [data-theme^="arcilla"] .abm-list__head { background: linear-gradient(180deg, var(--c-clay-card), color-mix(in srgb, var(--c-clay-card) 90%, var(--c-clay-elev-to))) !important; border-bottom: 1px solid var(--c-clay-shadow-i) !important; } [data-theme^="arcilla"] .abm-list__chip { background: color-mix(in srgb, var(--c-primary) 6%, transparent) !important; border-radius: 999px !important; color: var(--c-clay-text-soft) !important; border: none !important; transition: all 0.15s; } [data-theme^="arcilla"] .abm-list__chip:hover { background: color-mix(in srgb, var(--c-primary) 12%, transparent) !important; } [data-theme^="arcilla"] .abm-list__chip--active { background: linear-gradient(145deg, var(--c-clay-elev-from), var(--c-clay-elev-to)) !important; box-shadow: 2px 3px 6px var(--c-clay-shadow-i), inset 1px 1px 1px rgba(255, 255, 255, 0.9) !important; color: var(--c-primary) !important; font-weight: 600; } /* Items: relieve clay solo en seleccionado + cinta marcador */ [data-theme^="arcilla"] .abm-list__item { border-radius: 12px !important; margin: 2px 6px; padding: 10px 12px; transition: all 0.15s; position: relative; overflow: visible !important; } [data-theme^="arcilla"] .abm-list__item:hover { background: color-mix(in srgb, var(--c-primary) 5%, transparent) !important; } [data-theme^="arcilla"] .abm-list__item--selected { background: linear-gradient(145deg, var(--c-clay-elev-from), var(--c-clay-elev-to)) !important; box-shadow: 3px 3px 7px var(--c-clay-shadow-i), -1px -1px 4px rgba(255, 255, 255, 0.9), inset 1px 1px 1px rgba(255, 255, 255, 0.9) !important; padding-left: 16px !important; } [data-theme^="arcilla"] .abm-list__item--selected::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; background: var(--c-clay-press); border-radius: 0 3px 3px 0; opacity: 0.85; box-shadow: 3px 0 10px -2px var(--c-clay-press); } [data-theme^="arcilla"] .abm-list__item-mark { background: linear-gradient(145deg, var(--c-clay-elev-from), var(--c-clay-elev-to)) !important; box-shadow: inset 2px 2px 4px var(--c-clay-shadow-i), 1px 1px 2px rgba(255, 255, 255, 0.6) !important; color: var(--c-clay-text); font-weight: 700; border-radius: 8px !important; } /* Icono dentro del mark (Nomenclador muestra el icono de la especialidad) */ [data-theme^="arcilla"] .abm-list__item-mark .icon { font-size: 20px; font-variation-settings: 'wght' 500, 'FILL' 1; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.5)); } [data-theme^="arcilla"] .ref-codigo { background: color-mix(in srgb, var(--c-primary) 8%, transparent) !important; color: var(--c-clay-text-soft) !important; border-radius: 4px; padding: 1px 6px; font-family: var(--font-mono); } [data-theme^="arcilla"] .abm-list__footer { background: linear-gradient(0deg, var(--c-clay-elev-to), var(--c-clay-card)) !important; border-top: 1px solid var(--c-clay-shadow-i) !important; } /* Detail container */ [data-theme^="arcilla"] .abm-detail { background: var(--c-clay-card) !important; border: none !important; border-radius: 20px !important; box-shadow: 6px 8px 18px var(--c-clay-shadow), inset 0 1px 0 var(--c-clay-shadow-h), inset 0 -3px 6px var(--c-clay-shadow-i) !important; overflow: hidden; } [data-theme^="arcilla"] .abm-detail__head { background: linear-gradient(180deg, var(--c-clay-elev-from), color-mix(in srgb, var(--c-clay-card) 80%, var(--c-clay-elev-to))) !important; border-bottom: 1px solid color-mix(in srgb, var(--c-clay-shadow) 50%, transparent) !important; } [data-theme^="arcilla"] .abm-detail__title-main { color: var(--c-text) !important; font-weight: 700; } /* Secciones del form: cinta marcador por categoría */ [data-theme^="arcilla"] .abm-section { background: color-mix(in srgb, var(--c-clay-elev-from) 70%, transparent) !important; border-radius: 14px; padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); position: relative; overflow: visible; border: 1px solid var(--c-clay-shadow-i); padding-left: calc(var(--sp-4) + 6px); } [data-theme^="arcilla"] .abm-section::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; background: var(--mk, var(--c-clay-press)); border-radius: 0 3px 3px 0; opacity: 0.75; box-shadow: 3px 0 10px -2px var(--mk, var(--c-clay-press)); } /* Cintas por sección (nth-of-type, cicla en 6 colores) */ [data-theme^="arcilla"] .abm-section:nth-of-type(1) { --mk: var(--mk-1); } [data-theme^="arcilla"] .abm-section:nth-of-type(2) { --mk: var(--mk-4); } [data-theme^="arcilla"] .abm-section:nth-of-type(3) { --mk: var(--mk-2); } [data-theme^="arcilla"] .abm-section:nth-of-type(4) { --mk: var(--mk-5); } [data-theme^="arcilla"] .abm-section:nth-of-type(5) { --mk: var(--mk-3); } [data-theme^="arcilla"] .abm-section:nth-of-type(6) { --mk: var(--mk-6); } [data-theme^="arcilla"] .abm-section__head { margin-bottom: var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px dashed var(--c-clay-shadow-i); } [data-theme^="arcilla"] .abm-section__title { color: var(--c-clay-text) !important; font-weight: 700; } [data-theme^="arcilla"] .abm-section__title .icon { color: var(--mk, var(--c-clay-press)) !important; opacity: 0.9; } /* ================================================================ FORMS: inputs, selects, textareas, labels ================================================================ */ [data-theme^="arcilla"] .input { background: var(--c-clay-elev-from) !important; border: 1px solid var(--c-border) !important; border-radius: 10px !important; transition: all 0.15s; } [data-theme^="arcilla"] .input:focus { border-color: var(--c-primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 12%, transparent) !important; outline: none; } [data-theme^="arcilla"] .input[readonly] { background: color-mix(in srgb, var(--c-primary) 4%, var(--c-clay-elev-from)) !important; } [data-theme^="arcilla"] .field__label { color: var(--c-clay-text) !important; font-weight: 600; } [data-theme^="arcilla"] .field__hint { color: var(--c-text-soft) !important; } /* ================================================================ BOTONES — con relieve clay ================================================================ */ [data-theme^="arcilla"] .btn--primary { background: linear-gradient(145deg, var(--c-danger), color-mix(in srgb, var(--c-danger) 80%, black)) !important; border: none !important; color: white !important; box-shadow: 2px 3px 6px color-mix(in srgb, var(--c-danger) 35%, transparent), inset 1px 1px 1px rgba(255, 255, 255, 0.25) !important; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } [data-theme^="arcilla"] .btn--primary:hover { box-shadow: 1px 2px 4px color-mix(in srgb, var(--c-danger) 30%, transparent), inset 1px 1px 1px rgba(255, 255, 255, 0.2) !important; transform: translateY(1px); } /* Modificar (btn-edit): tinte azul --c-info, no terracota como el resto. Diferencia visualmente "entrar a editar" del "guardar/crear" (acción final). */ [data-theme^="arcilla"] .btn--primary.btn-edit { background: linear-gradient(145deg, var(--c-info), color-mix(in srgb, var(--c-info) 80%, black)) !important; box-shadow: 2px 3px 6px color-mix(in srgb, var(--c-info) 35%, transparent), inset 1px 1px 1px rgba(255, 255, 255, 0.25) !important; } [data-theme^="arcilla"] .btn--primary.btn-edit:hover { box-shadow: 1px 2px 4px color-mix(in srgb, var(--c-info) 30%, transparent), inset 1px 1px 1px rgba(255, 255, 255, 0.2) !important; } [data-theme^="arcilla"] .btn--secondary { background: linear-gradient(145deg, var(--c-clay-elev-from), var(--c-clay-elev-to)) !important; border: 1px solid var(--c-border) !important; color: var(--c-clay-text) !important; box-shadow: 2px 3px 6px var(--c-clay-shadow-i), inset 1px 1px 1px rgba(255, 255, 255, 0.9) !important; } [data-theme^="arcilla"] .btn--secondary:hover { box-shadow: 1px 2px 4px var(--c-clay-shadow-i), inset 1px 1px 1px rgba(255, 255, 255, 0.9) !important; transform: translateY(1px); } [data-theme^="arcilla"] .btn--success { background: linear-gradient(145deg, color-mix(in srgb, var(--c-success) 85%, white), var(--c-success)) !important; border: none !important; color: white !important; box-shadow: 2px 3px 6px color-mix(in srgb, var(--c-success) 30%, transparent), inset 1px 1px 1px rgba(255, 255, 255, 0.2) !important; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } [data-theme^="arcilla"] .btn--danger { background: linear-gradient(145deg, color-mix(in srgb, var(--c-danger) 90%, white), var(--c-danger)) !important; border: none !important; color: white !important; box-shadow: 2px 3px 6px color-mix(in srgb, var(--c-danger) 30%, transparent), inset 1px 1px 1px rgba(255, 255, 255, 0.2) !important; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } [data-theme^="arcilla"] .btn--ghost { color: var(--c-clay-text) !important; } [data-theme^="arcilla"] .btn--ghost:hover { background: color-mix(in srgb, var(--c-primary) 8%, transparent) !important; } /* ================================================================ TOGGLES, BADGES, ALERTS, MISC ================================================================ */ [data-theme^="arcilla"] .toggle__slider { background: var(--c-border-strong) !important; } /* OJO: `~` (sibling general) NO `+` — Spring inyecta input hidden entre el checkbox y el slider al usar th:field, rompiendo el adyacente. */ [data-theme^="arcilla"] .toggle input:checked ~ .toggle__slider { background: linear-gradient(145deg, var(--c-primary), var(--c-primary-hover)) !important; } [data-theme^="arcilla"] .toggle__slider::before { background: var(--c-clay-elev-from) !important; box-shadow: 1px 1px 2px var(--c-clay-shadow-i); } [data-theme^="arcilla"] .badge--success { background: linear-gradient(145deg, var(--c-success-soft), color-mix(in srgb, var(--c-success-soft) 65%, var(--c-success))) !important; color: color-mix(in srgb, var(--c-success) 80%, black) !important; box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.6) !important; border-radius: 999px; font-weight: 600; } /* Title bar de ABMs */ [data-theme^="arcilla"] .app-main__title-bar { background: transparent !important; border: none !important; } [data-theme^="arcilla"] .app-main__title-bar h1 { color: var(--c-text) !important; font-weight: 700; } /* ================================================================ RESPONSIVE: mantener el sistema existente intacto. Las cintas y relieve son compatibles con el responsive del sistema. En <900px, abm-layout pasa a 1 col → las cards siguen funcionando. En <768px, sidebar desaparece (deuda preexistente — drawer mobile queda como item separado, no cambia con Clay). ================================================================ */ @media (max-width: 768px) { [data-theme^="arcilla"] .kpi, [data-theme^="arcilla"] .quick-action, [data-theme^="arcilla"] .dash-news, [data-theme^="arcilla"] .dash-pending-card, [data-theme^="arcilla"] .abm-list, [data-theme^="arcilla"] .abm-detail { border-radius: 16px !important; box-shadow: 3px 4px 10px var(--c-clay-shadow), inset 0 1px 0 var(--c-clay-shadow-h) !important; } }