/* ============================================================================
CLAYMORPHISM — FacturaO
Capa de rediseño visual. Se carga DESPUÉS de base/tailwind/dashboard/modules,
por lo que sobrescribe sin tocar esos archivos. Revertir = quitar el .
Estructura:
1. Tokens (paleta clay + radios + sombras) — tema claro y oscuro
2. Scrollbar
3. Primitivas (botones, paneles, KPIs, tabs, inputs, badges, tablas)
4. Chrome (sidebar, topbar)
5. Paleta de acentos (categorías/datos)
Intensidad MEDIDA: arcilla plena en cards/KPIs/botones/nav; contenida en
tablas e inputs. El morado de marca se conserva.
============================================================================ */
/* ============ 1. TOKENS — TEMA CLARO ============ */
:root {
/* Suelo lavanda-gris de tono medio (que el relieve se lea) + superficies */
--color-background: #e4deef;
--color-surface: #f4f1fc;
--color-surface-container-lowest: #f7f4fd;
--color-surface-container-low: #efeaf8;
--color-surface-container: #ebe5f4;
--color-surface-container-high: #e6e0f1;
--color-surface-container-highest: #e0d9ec;
--color-surface-bright: #f8f5fd;
--color-surface-dim: #d8d1e6;
/* Radios generosos y graduados */
--radius-sm: 12px;
--radius-md: 16px;
--radius-lg: 22px;
--radius-xl: 28px;
/* Ingredientes de sombra (tintados, nunca negros) */
--clay-dark: 183,173,204;
--clay-light: 255,255,255;
--clay-hi-a: .75;
--clay-sh-a: .5;
/* ─── SISTEMA DE TALLAS DE INPUT (por tipo de contenido) ───
Un solo sitio para todas las anchuras de campo. "texto" y "texto-lg"
son TOPES: crecen hasta ahí y no más. */
--clay-w-cod: 5.5rem; /* código / nº corto (3-5 dígitos) */
--clay-w-num: 7.5rem; /* número (importes, cantidades, %) */
--clay-w-date: 10.5rem; /* fecha */
--clay-w-select: 13rem; /* desplegable */
--clay-w-text: 22rem; /* texto normal (nombre, población…) — TOPE */
--clay-w-text-lg: 36rem; /* texto largo (domicilio, email…) — TOPE */
/* Escala de radios clay (uso directo) */
--clay-r-sm: 14px;
--clay-r-md: 20px;
--clay-r-lg: 26px;
--clay-r-xl: 34px;
--clay-r-pill: 999px;
/* Sombras clay */
--clay-raised:
6px 6px 14px rgba(var(--clay-dark), var(--clay-sh-a)),
-6px -6px 11px rgba(var(--clay-light), var(--clay-hi-a));
--clay-raised-sm:
3px 3px 8px rgba(var(--clay-dark), var(--clay-sh-a)),
-3px -3px 7px rgba(var(--clay-light), var(--clay-hi-a));
--clay-raised-hover:
9px 9px 19px rgba(var(--clay-dark), var(--clay-sh-a)),
-8px -8px 15px rgba(var(--clay-light), var(--clay-hi-a));
--clay-inset:
inset 3px 3px 7px rgba(var(--clay-dark), var(--clay-sh-a)),
inset -3px -3px 7px rgba(var(--clay-light), var(--clay-hi-a));
--clay-flat:
2px 2px 6px rgba(var(--clay-dark), var(--clay-sh-a)),
-2px -2px 5px rgba(var(--clay-light), var(--clay-hi-a));
--clay-primary-glow:
5px 5px 13px rgba(130,49,167,.30),
-5px -5px 10px rgba(var(--clay-light), .5);
/* Tokens de sombra que la app ya referencia (estaban indefinidos → planos) */
--shadow-1: var(--clay-raised);
--shadow-2: var(--clay-raised-hover);
--clay-line: rgba(130,49,167,.12);
/* Acentos (ver bloque 5) */
--c-amber:#d98a12; --c-amber-bg:rgba(217,138,18,.15);
--c-green:#2e9e5b; --c-green-bg:rgba(46,158,91,.15);
--c-blue:#3f6fe3; --c-blue-bg:rgba(63,111,227,.15);
--c-teal:#12968a; --c-teal-bg:rgba(18,150,138,.15);
--c-pink:#d54a8c; --c-pink-bg:rgba(213,74,140,.15);
/* Blobs decorativos del fondo (formas suaves tras las tarjetas) */
--clay-blob-a: rgba(130,49,167,.16);
--clay-blob-b: rgba(18,150,138,.13);
--clay-blob-c: rgba(213,74,140,.13);
--clay-blob-d: rgba(217,138,18,.10);
}
/* ============ TOKENS — TEMA OSCURO ============ */
/* La app fija data-theme="dark" en (app/functions.php). Definimos aquí
una paleta oscura completa (antes estaba incompleta). */
:root[data-theme="dark"] {
--color-background: #1b1826;
--color-surface: #241f31;
--color-surface-container-lowest: #201c2c;
--color-surface-container-low: #232030;
--color-surface-container: #2a2439;
--color-surface-container-high: #2f2840;
--color-surface-container-highest: #362e49;
--color-surface-bright: #2c2640;
--color-surface-dim: #16131f;
--color-on-surface: #ece8f6;
--color-on-surface-variant: #b6adca;
--color-on-background: #ece8f6;
--color-outline: #8f86a6;
--color-outline-variant: #3c3552;
--color-primary: #b46fd6;
--color-primary-container: #9d4ec4;
--color-on-primary: #ffffff;
--color-on-primary-fixed-variant: #eab2ff;
--color-primary-fixed-dim: #6a4780;
--clay-dark: 9,7,14;
--clay-light: 255,255,255;
--clay-hi-a: .05;
--clay-sh-a: .55;
--clay-primary-glow:
5px 5px 14px rgba(0,0,0,.5),
-5px -5px 11px rgba(var(--clay-light), .05);
--clay-line: rgba(234,178,255,.14);
--clay-blob-a: rgba(180,111,214,.17);
--clay-blob-b: rgba(18,150,138,.13);
--clay-blob-c: rgba(213,74,140,.12);
--clay-blob-d: rgba(217,138,18,.09);
}
/* Fallback por preferencia del SO cuando el usuario no ha elegido tema */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--color-background: #1b1826;
--color-surface: #241f31;
--color-surface-container-lowest: #201c2c;
--color-surface-container-low: #232030;
--color-surface-container: #2a2439;
--color-surface-container-high: #2f2840;
--color-surface-container-highest: #362e49;
--color-on-surface: #ece8f6;
--color-on-surface-variant: #b6adca;
--color-outline: #8f86a6;
--color-outline-variant: #3c3552;
--color-primary: #b46fd6;
--color-primary-container: #9d4ec4;
--clay-dark: 9,7,14; --clay-light: 255,255,255; --clay-hi-a: .05; --clay-sh-a: .55;
--clay-primary-glow: 5px 5px 14px rgba(0,0,0,.5), -5px -5px 11px rgba(var(--clay-light), .05);
--clay-line: rgba(234,178,255,.14);
--clay-blob-a: rgba(180,111,214,.17);
--clay-blob-b: rgba(18,150,138,.13);
--clay-blob-c: rgba(213,74,140,.12);
--clay-blob-d: rgba(217,138,18,.09);
}
}
/* Sin anclaje de scroll en el lienzo: al recargar, el navegador restauraba el
scroll y el anclaje compensaba el crecimiento tardío del contenido
(textareas auto-alto, fuentes…) sumando desplazamiento — la página
aparecía cada vez más abajo con cada recarga. */
.dash-canvas { overflow-anchor: none; }
/* El lienzo usa el SUELO (más oscuro) para que las superficies elevadas resalten,
con blobs radiales suaves para que el fondo no sea un color plano. */
body,
.dash-canvas {
background:
radial-gradient(52rem 44rem at 8% -10%, var(--clay-blob-a), transparent 60%),
radial-gradient(40rem 36rem at 104% 15%, var(--clay-blob-b), transparent 62%),
radial-gradient(44rem 40rem at 60% 115%, var(--clay-blob-c), transparent 60%),
radial-gradient(26rem 26rem at 88% 78%, var(--clay-blob-d), transparent 65%),
radial-gradient(20rem 20rem at 35% 45%, var(--clay-blob-a), transparent 70%),
radial-gradient(16rem 16rem at -4% 70%, var(--clay-blob-b), transparent 68%),
var(--color-background);
}
/* ============ 2. SCROLLBAR CLAYMORPHISM ============ */
* { scrollbar-width: thin; scrollbar-color: var(--color-primary) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
border-radius: var(--clay-r-pill);
border: 3px solid var(--color-background);
background: linear-gradient(145deg, var(--color-primary-container), var(--color-primary));
box-shadow: var(--clay-raised-sm);
}
::-webkit-scrollbar-thumb:hover { filter: brightness(1.08); }
::-webkit-scrollbar-corner { background: transparent; }
/* ============ 3. PRIMITIVAS ============ */
/* Botones */
.btn-primary {
border-radius: var(--clay-r-md);
background: linear-gradient(145deg, var(--color-primary-container), var(--color-primary));
box-shadow: var(--clay-primary-glow);
transition: box-shadow .15s ease, transform .1s ease, filter .15s ease;
}
.btn-primary:hover { transform: translateY(-1px); opacity: 1; filter: brightness(1.07); box-shadow: var(--clay-raised-hover); }
.btn-primary:active { transform: translateY(1px); box-shadow: var(--clay-inset); }
/* Emitir factura: mismo acabado de arcilla pero en azul, para que no se confunda con
Guardar (morado) ni con Anular (rojo). Antes iba en rojo por un style en línea. */
.btn-primary.btn-emitir {
background: linear-gradient(145deg,
color-mix(in srgb, var(--c-blue) 62%, white),
var(--c-blue));
color: #fff;
box-shadow:
5px 5px 13px color-mix(in srgb, var(--c-blue) 34%, transparent),
-5px -5px 10px rgba(var(--clay-light), .5);
}
.btn-primary.btn-emitir:hover { background: linear-gradient(145deg, color-mix(in srgb, var(--c-blue) 62%, white), var(--c-blue)); }
.btn-secondary {
border-radius: var(--clay-r-md);
background: var(--color-surface);
color: var(--color-primary);
box-shadow: var(--clay-raised-sm);
transition: box-shadow .15s ease, transform .1s ease;
}
.btn-secondary:hover { transform: translateY(-1px); background: var(--color-surface); box-shadow: var(--clay-raised-hover); }
.btn-secondary:active { transform: translateY(1px); box-shadow: var(--clay-inset); }
.btn-sm { border-radius: var(--clay-r-sm); box-shadow: var(--clay-raised-sm); }
.btn-sm:active { box-shadow: var(--clay-inset); }
/* Paneles / cards — con un velo diagonal de marca que les da vida */
.pre-panel {
border: none;
border-radius: var(--clay-r-lg);
background:
linear-gradient(160deg, color-mix(in srgb, var(--color-primary) 5%, transparent), transparent 45%),
var(--color-surface);
box-shadow: var(--clay-raised);
}
/* El mismo velo en las tarjetas de pestaña de las fichas antiguas */
.cli-tab-panel:has(> .cli-form-grid) {
background:
linear-gradient(160deg, color-mix(in srgb, var(--color-primary) 5%, transparent), transparent 45%),
var(--color-surface);
}
/* KPI cards del dashboard */
.dash-kpi-card { border-radius: var(--clay-r-lg); box-shadow: var(--clay-raised); border: none; }
.dash-kpi-card:hover { box-shadow: var(--clay-raised-hover); }
.dash-kpi-card--default {
background:
linear-gradient(160deg, color-mix(in srgb, var(--color-primary) 5%, transparent), transparent 45%),
var(--color-surface);
border: none;
box-shadow: var(--clay-raised);
}
.dash-kpi-card--hero {
background: linear-gradient(150deg, var(--color-primary-container), var(--color-primary));
box-shadow: var(--clay-primary-glow);
}
.dash-kpi-card--hero, .dash-kpi-card--hero .dash-kpi-card__value,
.dash-kpi-card--hero .dash-kpi-card__label, .dash-kpi-card--hero .dash-kpi-card__delta,
.dash-kpi-card--hero .hi { color: var(--color-on-primary); }
.dash-table-container { border-radius: var(--clay-r-lg); background: var(--color-surface); box-shadow: var(--clay-raised); border: none; }
/* Tabs → canal hundido con píldoras (como el preview aprobado) */
.cli-tabs {
display: inline-flex;
border-bottom: none;
gap: .3rem;
padding: .35rem;
border-radius: var(--clay-r-pill);
background: var(--color-background);
box-shadow: var(--clay-inset);
max-width: 100%;
}
.cli-tab { border-bottom: none; border-radius: var(--clay-r-pill); padding: .55rem 1.1rem; color: var(--color-on-surface-variant); }
.cli-tab:hover { background: var(--color-surface); box-shadow: var(--clay-raised-sm); }
.cli-tab.active { border-bottom-color: transparent; color: var(--color-primary); background: var(--color-surface); box-shadow: var(--clay-raised-sm); }
/* Píldora deslizante (creada por base.js): el fondo de la activa se desliza */
.cli-tabs { position: relative; }
.cli-tab-pill {
position: absolute;
left: 0; top: 0;
border-radius: var(--clay-r-pill);
background: var(--color-surface);
box-shadow: var(--clay-raised-sm);
opacity: 0;
pointer-events: none;
transform-origin: center;
transition:
left .28s cubic-bezier(.25, 1.2, .35, 1),
width .28s cubic-bezier(.25, 1.2, .35, 1),
top .28s ease, height .28s ease,
transform .18s ease, opacity .15s ease;
}
/* Amago en hover: la píldora se estira hacia la pestaña apuntada y se
aplasta un pelín, "como que quiere ir"; respuesta rápida, sin rebote */
.cli-tab-pill.is-tease {
transform: scaleY(.93);
transition:
left .18s ease, width .18s ease,
top .18s ease, height .18s ease,
transform .18s ease, opacity .15s ease;
}
.cli-tabs.has-pill .cli-tab { position: relative; z-index: 1; }
/* Con píldora, ni la activa ni el hover pintan fondo propio:
el fondito deslizante ES el hover (sigue al cursor y vuelve a la activa) */
.cli-tabs.has-pill .cli-tab.active,
.cli-tabs.has-pill .cli-tab:hover {
background: transparent;
box-shadow: none;
}
.cli-tabs.has-pill .cli-tab:hover { color: var(--color-primary); }
/* Inputs → hueco hundido (arcilla contenida) */
.pre-input,
.pre-form-group input:not([type="checkbox"]):not([type="radio"]),
.pre-form-group select,
.pre-form-group textarea,
.pre-form-grid input:not([type="checkbox"]):not([type="radio"]),
.pre-form-grid select,
.pre-form-grid textarea,
.cli-dialog__content input:not([type="checkbox"]):not([type="radio"]),
.cli-dialog__content select,
.cli-dialog__content textarea {
border: none;
border-radius: var(--clay-r-sm);
box-shadow: var(--clay-inset);
}
.pre-input:hover { border: none; }
.pre-input:focus,
.pre-form-group input:focus,
.pre-form-group select:focus,
.pre-form-group textarea:focus,
.pre-form-grid input:focus,
.pre-form-grid select:focus,
.pre-form-grid textarea:focus,
/* hover = misma animación de anillo que el focus (salvo readonly/disabled) */
.pre-input:hover:not([readonly]):not(:disabled),
.pre-form-group input:hover:not([readonly]):not(:disabled),
.pre-form-group select:hover:not(:disabled),
.pre-form-group textarea:hover:not([readonly]):not(:disabled),
.pre-form-grid input:hover:not([readonly]):not(:disabled),
.pre-form-grid select:hover:not(:disabled),
.pre-form-grid textarea:hover:not([readonly]):not(:disabled) {
border: none;
box-shadow: var(--clay-inset), 0 0 0 2px var(--color-primary);
}
/* Textarea que crece con el contenido, sin JS (fallback: atributo rows) */
.pre-form-group textarea, .pre-form-grid textarea, .cli-dialog__content textarea {
field-sizing: content;
min-height: 2.7rem;
max-height: 12rem;
}
/* REFUERZO: la regla universal de modules.css (especificidad ~0,9,1) pisa mi
border/border-radius, dejando los inputs con un borde de caja de 1px y radio
8px. Con !important, TODOS los inputs (formulario Y líneas de detalle) quedan
con el hueco de arcilla completo: sin borde, radio clay, mismo componente. */
.pre-input,
.pre-form-group input:not([type="checkbox"]):not([type="radio"]),
.pre-form-group select, .pre-form-group textarea,
.pre-form-grid input:not([type="checkbox"]):not([type="radio"]),
.pre-form-grid select, .pre-form-grid textarea,
.cli-form-group input:not([type="checkbox"]):not([type="radio"]),
.cli-form-group select, .cli-form-group textarea,
.cli-dialog__content input:not([type="checkbox"]):not([type="radio"]),
.cli-dialog__content select, .cli-dialog__content textarea {
border: none !important;
border-radius: var(--clay-r-sm) !important;
background-color: var(--color-surface-container-lowest) !important;
}
/* Inputs de las líneas de detalle: radio algo menor por la densidad de la tabla
(pre-lineas-tbody lo comparten presupuesto, pedido y albarán) */
#pre-lineas-tbody .pre-input,
#fac-lineas-tbody .pre-input {
border-radius: 10px !important;
}
/* Descuentos de línea (D1/D2/D3%): eran demasiado estrechos (49px) y cortaban
el "0.00". Se les da tamaño de número como Cantidad/Precio/Total. */
#pre-lineas-tbody .pre-input-dto, #pre-lineas-tbody .pre-input-dto2, #pre-lineas-tbody .pre-input-dto3,
#fac-lineas-tbody .pre-input-dto, #fac-lineas-tbody .pre-input-dto2, #fac-lineas-tbody .pre-input-dto3 {
min-width: 4.5rem;
}
/* Referencia (cabecera): más estrecha para que quepan más campos en la fila
(p. ej. Transportista en factura). */
.pre-form-group:has(> input[id^="field-REF"]) {
flex: 0 1 12rem;
max-width: 12rem;
}
/* Badges de estado → píldora con relieve suave + punto de color (preview) */
.badge-status {
border-radius: var(--clay-r-pill);
box-shadow: var(--clay-flat);
font-weight: 700;
padding: 0.3rem 0.75rem;
gap: 0.35rem;
}
.badge-status::before {
content: "";
width: .45rem;
height: .45rem;
border-radius: 50%;
background: currentColor;
flex: 0 0 auto;
}
/* Iconos de KPI → chip de arcilla con degradado del color del icono */
.dash-kpi-card__icon {
width: 44px;
height: 44px;
padding: 10px;
opacity: 1;
border-radius: var(--clay-r-sm);
background: linear-gradient(145deg,
color-mix(in srgb, currentColor 18%, var(--color-surface)),
color-mix(in srgb, currentColor 6%, var(--color-surface)));
box-shadow: var(--clay-flat);
}
.dash-kpi-card--hero .dash-kpi-card__icon {
background: rgba(255,255,255,.18);
box-shadow: inset 2px 2px 5px rgba(0,0,0,.15), inset -2px -2px 5px rgba(255,255,255,.15);
}
/* Icono de título de sección → chip de arcilla con degradado suave */
.pre-form-section-title > .hi {
width: 38px;
height: 38px;
padding: 8px;
flex: 0 0 auto;
border-radius: 12px;
color: var(--color-primary);
background: linear-gradient(145deg,
color-mix(in srgb, var(--color-primary) 18%, var(--color-surface)),
color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)));
box-shadow: var(--clay-flat);
}
/* Tarjeta de totales → arcilla (preview) */
.pre-totales-grid {
border: 1px solid color-mix(in srgb, var(--color-outline) 35%, transparent);
border-radius: var(--clay-r-lg);
background: var(--color-surface);
box-shadow: var(--clay-raised);
}
/* TODOS los selects = MISMO componente: apariencia customizable (opciones con
arcilla) + UNA sola flecha. `background-image:none` mata el triángulo que
modules.css pinta en .cli-form-group/.cli-filters select (causaba 2 flechas).
El :not(.no-bg) respeta los que se excluyen a propósito. */
select:not(.no-bg) {
appearance: base-select;
background-image: none !important;
padding-right: 2.2rem;
/* Texto largo (p. ej. "2026-A — Por defecto"): recorte con … en vez de salto de línea */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Con base-select lo que se pinta es : el recorte va ahí */
select:not(.no-bg) selectedcontent {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
select:not(.no-bg)::picker-icon {
color: var(--color-on-surface-variant);
transition: transform .2s ease;
}
select:not(.no-bg):open::picker-icon {
color: var(--color-primary);
transform: rotate(180deg);
}
/* Popup de opciones con estilo claymorphism */
::picker(select) {
appearance: base-select;
border: none;
background: var(--color-surface);
box-shadow: var(--clay-raised);
border-radius: var(--clay-r-md);
padding: .35rem;
margin-top: .4rem;
}
::picker(select) option {
border-radius: var(--clay-r-sm);
padding: .5rem .8rem;
color: var(--color-on-surface);
transition: background .12s ease;
cursor: pointer;
}
::picker(select) option:hover,
::picker(select) option:focus {
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
outline: none;
}
::picker(select) option:checked {
color: var(--color-primary);
font-weight: 700;
background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
::picker(select) option::checkmark {
color: var(--color-primary);
order: 1;
margin-left: auto;
}
/* ============ 4. CHROME (sidebar / topbar) ============ */
/* El velo morado (transparente a la izquierda, morado a la derecha) vive en el
PANEL, no en todo el sidebar: el rail lleva su propio tinte para que la
lengüeta del departamento abierto tenga con qué contrastar al pegarse.
El velo arranca transparente justo en la junta, así que ahí el panel es
exactamente --dash-panel-bg y la lengüeta funde sin costura.
Base y velo van en la misma propiedad: el gradiente translúcido necesita algo
debajo que teñir. */
.dash-sidebar {
background: var(--color-surface-container-lowest);
border-right: none;
box-shadow: var(--clay-flat);
}
.dash-panel {
background:
linear-gradient(90deg,
transparent 0%,
color-mix(in srgb, var(--color-primary) 7%, transparent) 45%,
color-mix(in srgb, var(--color-primary) 20%, transparent) 100%),
var(--dash-panel-bg);
}
.dash-nav-link { border-radius: var(--clay-r-sm); }
.dash-nav-link:hover { background: var(--color-surface); box-shadow: var(--clay-raised-sm); }
.dash-nav-link.active {
background: linear-gradient(145deg, var(--color-primary-container), var(--color-primary));
color: var(--color-on-primary);
border-right: none;
box-shadow: var(--clay-primary-glow);
}
.dash-nav-link.active .hi { color: var(--color-on-primary); }
/* Rail de departamentos. El tinte morado suave lo separa del panel (más claro):
ese contraste es lo que hace legible que la lengüeta activa se despega del
rail y se pega al panel. */
:root {
--dash-rail-bg: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface-container-lowest));
}
.dash-rail { border-right: none; }
.dash-rail__btn:hover { background-color: color-mix(in srgb, var(--color-surface) 70%, transparent); }
/* Departamento abierto: la lengüeta es una prolongación del panel, así que NO
lleva sombra de arcilla propia — una pieza pegada no proyecta sombra contra
aquello a lo que está pegada. Solo el icono y el texto se tiñen de morado. */
body:not(.sidebar-collapsed) .dash-rail__btn.active {
box-shadow: none;
color: var(--color-primary);
}
/* Contraído no hay panel: el departamento de la página actual vuelve a ser una
pastilla morada suelta */
/* El borde derecho transparente ya lo separa del borde; no hace falta margen */
body.sidebar-collapsed .dash-rail__btn.aqui {
background-image: linear-gradient(145deg, var(--color-primary-container), var(--color-primary));
color: var(--color-on-primary);
box-shadow: var(--clay-primary-glow);
border-radius: var(--clay-r-md);
}
.dash-panel { border-right: none; }
.dash-rail__flyout {
border: none;
border-radius: var(--clay-r-lg);
background: var(--color-surface);
box-shadow: var(--clay-raised);
}
.dash-topbar {
background: color-mix(in srgb, var(--color-background) 82%, transparent);
border-bottom: 1px solid var(--clay-line);
}
.dash-topbar__search input {
border: none;
border-radius: var(--clay-r-pill);
background: var(--color-surface-container-lowest);
box-shadow: var(--clay-inset);
}
/* ============ 5. ACENTOS (categorías / datos) ============ */
/* Disponibles como utilidades para iconos de tarjeta, avatares, etc. */
.clay-ic--amber { background: var(--c-amber-bg); color: var(--c-amber); }
.clay-ic--green { background: var(--c-green-bg); color: var(--c-green); }
.clay-ic--blue { background: var(--c-blue-bg); color: var(--c-blue); }
.clay-ic--teal { background: var(--c-teal-bg); color: var(--c-teal); }
.clay-ic--pink { background: var(--c-pink-bg); color: var(--c-pink); }
/* ============ 6. MODALES / DIÁLOGOS ============ */
.cli-dialog-overlay { background: rgba(20, 10, 32, .45); }
.cli-dialog {
background: var(--color-surface);
border-radius: var(--clay-r-xl);
box-shadow: var(--clay-raised);
}
.cli-dialog__header { border-bottom: 1px solid var(--clay-line); }
.cli-dialog__icon { box-shadow: var(--clay-inset); }
.cli-dialog__btn-danger {
border-radius: var(--clay-r-md);
background: linear-gradient(145deg, #d64545, var(--color-error));
box-shadow: 5px 5px 13px rgba(186,26,26,.30), -5px -5px 10px rgba(var(--clay-light), var(--clay-hi-a));
transition: box-shadow .15s ease, transform .1s ease, filter .15s ease;
}
.cli-dialog__btn-danger:hover { transform: translateY(-1px); filter: brightness(1.06); background: linear-gradient(145deg, #d64545, var(--color-error)); box-shadow: 7px 7px 16px rgba(186,26,26,.36), -6px -6px 12px rgba(var(--clay-light), var(--clay-hi-a)); }
.cli-dialog__btn-danger:active { transform: translateY(1px); box-shadow: var(--clay-inset); }
/* ============ 7. TOPBAR (botones / perfil / avatar) ============ */
.dash-topbar__icon-btn {
width: 42px; height: 42px; padding: 0; opacity: 1;
border-radius: var(--clay-r-md);
background: var(--color-surface);
box-shadow: var(--clay-raised-sm);
display: grid; place-items: center;
transition: box-shadow .15s ease, transform .1s ease, color .15s ease;
}
.dash-topbar__icon-btn:hover { transform: translateY(-1px); color: var(--color-primary); box-shadow: var(--clay-raised); }
.dash-topbar__icon-btn:active { transform: translateY(1px); box-shadow: var(--clay-inset); }
.dash-topbar__profile {
border-left: none;
background: var(--color-surface);
box-shadow: var(--clay-raised-sm);
border-radius: var(--clay-r-pill);
padding: .3rem .45rem .3rem 1rem;
transition: box-shadow .2s ease, transform .2s ease;
}
/* Es un enlace a "Mi Perfil": se comporta como el resto de piezas de arcilla pulsables */
a.dash-topbar__profile { text-decoration: none; color: inherit; }
a.dash-topbar__profile:hover { transform: translateY(-1px); box-shadow: var(--clay-raised); }
a.dash-topbar__profile:active { transform: translateY(1px); box-shadow: var(--clay-inset); }
a.dash-topbar__profile.active { box-shadow: var(--clay-inset); }
a.dash-topbar__profile:hover .dash-topbar__profile-name { color: var(--color-primary); }
.dash-topbar__avatar {
border: none;
background: linear-gradient(145deg, var(--color-primary-container), var(--color-primary));
box-shadow: var(--clay-primary-glow);
}
/* ============ 8. SIDEBAR (buscador / toggle) ============ */
/* Eclipse: un halo difuso que orbita despacio detrás del buscador.
- `overflow:hidden` + el radio de píldora lo recortan a la forma del campo: al rotar, un
rectángulo ancho barre un área del tamaño de su diagonal y el halo invadía el menú.
- El pseudo es cuadrado (aspect-ratio 1) para que su caja no crezca al girar.
- `isolation` mantiene el z-index:-1 dentro del buscador; si no, se colaría tras el sidebar.
El input es semitransparente, así que el halo se translucе como una aurora bajo el cristal. */
.dash-sidebar__search {
isolation: isolate;
overflow: hidden;
border-radius: var(--clay-r-pill);
}
.dash-sidebar__search::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 118%;
aspect-ratio: 1;
translate: -50% -50%;
z-index: -1;
/* Dos focos opuestos que orbitan el centro. Un conic-gradient no valía: de él solo se ve la
banda central —donde convergen todos los tonos— y al girar apenas hay movimiento.
Con focos desplazados, cada uno cruza el campo y se oculta por arriba y abajo: el eclipse. */
background:
radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--color-primary) 95%, transparent) 0 4%, transparent 40%),
radial-gradient(circle at 50% 80%, color-mix(in srgb, var(--c-teal) 85%, transparent) 0 4%, transparent 40%),
radial-gradient(circle at 18% 50%, color-mix(in srgb, var(--c-pink) 70%, transparent) 0 3%, transparent 34%);
filter: blur(11px);
opacity: .55;
pointer-events: none;
animation: eclipseOrbita 22s linear infinite;
transition: opacity .35s ease;
}
/* Al escribir o enfocar, el halo se aviva un poco */
.dash-sidebar__search:focus-within::before,
.dash-sidebar__search.has-text::before {
opacity: .62;
}
/* `rotate` como propiedad independiente: no pisa el `translate` del centrado */
@keyframes eclipseOrbita {
to { rotate: 360deg; }
}
/* El input lleva la clase 'no-bg', que lo saca de la regla universal de inputs de
modules.css (su especificidad (0,9,1) aplastaba a este selector (0,2,0) aunque
clay cargue después). Por eso aquí ya no hace falta ningún !important. */
.dash-sidebar__search input {
border: none;
border-radius: var(--clay-r-pill);
box-shadow: var(--clay-inset);
/* Semitransparente para que el eclipse se translucza. */
background: color-mix(in srgb, var(--color-surface) 62%, transparent);
}
/* El foco se marca por dentro: el buscador recorta a su forma con overflow:hidden
y el input lo llena entero, así que un anillo por fuera quedaría cortado. */
.dash-sidebar__search input:focus {
background: color-mix(in srgb, var(--color-surface) 72%, transparent);
box-shadow: var(--clay-inset), inset 0 0 0 2px var(--color-primary);
}
.dash-sidebar__toggle {
border: none;
background: var(--color-surface);
box-shadow: var(--clay-raised-sm);
}
.dash-sidebar__toggle:hover { box-shadow: var(--clay-raised); }
.dash-sidebar__search-kbd { box-shadow: var(--clay-flat); border-radius: 8px; }
/* Menú pegado arriba: ambas columnas (riel de iconos y panel) a la vez para
que iconos y logo queden alineados */
.dash-rail { padding-top: .2rem; }
.dash-panel { padding-top: .2rem; }
/* Logo sobre el buscador. Los PNG son cuadrados con la marca en la banda
central: el contenedor de altura fija recorta el lienzo sobrante
(flex centra la imagen y overflow:hidden corta arriba/abajo). */
.dash-panel__logo {
display: flex;
align-items: center;
justify-content: center;
height: 62px;
overflow: hidden;
margin: .5rem .75rem .25rem;
border-radius: var(--clay-r-sm);
flex: 0 0 auto;
}
/* ojo: sin display aquí — un display:block (0,1,1) ganaría al display:none
de .dash-panel__logo-oscuro (0,1,0) y se verían los dos logos a la vez */
.dash-panel__logo img { width: 100%; }
.dash-panel__logo-oscuro { display: none; }
:root[data-theme="dark"] .dash-panel__logo-claro { display: none; }
:root[data-theme="dark"] .dash-panel__logo-oscuro { display: block; }
/* ============ 9. TABLAS DE LISTADOS ============ */
/* Botones de acciones SIEMPRE en fila: la celda no parte línea aunque sea
estrecha, y el grupo flex no envuelve */
.dash-table td[data-col="acciones"],
.dash-table th[data-col="acciones"] { white-space: nowrap; }
.cli-row-actions { flex-wrap: nowrap; }
/* Compactas + zebra: fuera las spacer-row (siguen en el DOM, por eso el
zebra usa nth-child(even of .data-row) para contar solo filas de datos) */
.dash-table thead th { padding: .55rem 1rem; }
.dash-table tbody td { padding: .45rem 1rem; }
.dash-table .spacer-row { display: none; }
.dash-table tbody tr:nth-child(even of .data-row) {
background: color-mix(in srgb, var(--color-on-surface) 4%, transparent);
}
.dash-table__client-avatar { border-radius: var(--clay-r-sm); box-shadow: var(--clay-flat); }
.dash-table__more { border-radius: var(--clay-r-sm); }
.dash-table__more:hover { background: var(--color-surface-container); box-shadow: var(--clay-inset); }
/* Paginación */
.cli-pag-btn {
border: none;
border-radius: var(--clay-r-sm);
background: var(--color-surface);
box-shadow: var(--clay-raised-sm);
transition: box-shadow .15s ease, transform .1s ease;
}
.cli-pag-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--clay-raised); }
.cli-pag-btn:active:not(:disabled) { box-shadow: var(--clay-inset); }
.cli-pag-btn:disabled { opacity: .5; }
/* ============ 10. TABLAS DE LÍNEAS (documentos) ============ */
.pre-table-container { border: none; border-radius: var(--clay-r-lg); box-shadow: var(--clay-flat); }
.pre-table th { background: var(--color-surface-container-low); padding: .5rem .6rem; }
.pre-table td { padding: .3rem .5rem; }
.pre-table tbody tr:nth-child(even) {
background: color-mix(in srgb, var(--color-on-surface) 4%, transparent);
}
/* ============ 11. AJUSTES / TARJETAS ENLACE ============ */
.ajuste-card {
border: none;
border-radius: var(--clay-r-lg);
background: var(--color-surface);
box-shadow: var(--clay-raised);
transition: box-shadow .15s ease, transform .12s ease;
}
.ajuste-card:hover { transform: translateY(-2px); box-shadow: var(--clay-raised-hover); }
/* ============ 12. TOASTS / NOTIFICACIONES ============ */
#notificacion {
border: none;
border-radius: var(--clay-r-md);
box-shadow: var(--clay-raised);
}
/* ============ 12b. TRANSICIONES ENTRE PÁGINAS ============
La app ya emitía `@view-transition { navigation: none }` cuando el perfil activa "reducir
efectos de movimiento", pero nunca llegó a declarar la transición: el ajuste apagaba algo que
no existía. Aquí se declara; el