/* ==========================================================================
glassmorphism-light-cards-panels-tables-modals.css
Card / Panel / Table / Modal del skin "Glassmorphism LIGHT" (AdmPoint)
--------------------------------------------------------------------------
Contenido extraido 1:1 de glassmorphism-light.css: todo lo relativo a
card, panel, tabla y modal, incluidas las reglas de esos componentes que en
el skin convivian con otros elementos (fallback sin backdrop-filter,
"12. STATES", "13. SCROLLBARS", media queries responsive, hover:none,
prefers-reduced-motion, prefers-contrast y print).
IMPORTANTE: NO es un skin autonomo, es un complemento:
- Usa las variables --g-* definidas en glassmorphism-light.css.
- Se debe enlazar DESPUES de glassmorphism-light.css para respetar la
cascada original (estas reglas ganaban a las secciones posteriores del
skin: alerts, badges, tabs, states, ...).
Orden recomendado en el :
Los botones viven en glassmorphism-light-buttons.css.
Se conserva el ORDEN INTERNO original del skin (fallback - panel - cards -
card-icon - kpi - tablas - datatables - modales - states - scrollbars -
responsive - a11y/print) para no alterar la cascada entre estas reglas.
========================================================================== */
/* ========== 2b. FALLBACK SIN backdrop-filter (card / panel / modal) ===== */
/* Del bloque "2. GLOBAL" del skin: alli se quedan los selectores de navbar,
sidebar, dropdown, offcanvas, toast y list-group. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.card, .modal-content, .chart-container, .dash-kpi, .kpi-card {
background-color: var(--g-solid) !important;
}
.modal-content { background-color: var(--g-solid-2) !important; }
}
/* ================== 3b. LAYOUT: PANEL BASE DE LA APP =================== */
/* Panel base reutilizable de la app */
.layout-panel, .panel {
background: var(--g-layer-0);
border: 1px solid var(--g-border-soft);
border-radius: var(--g-radius-lg);
box-shadow: var(--g-highlight-soft);
-webkit-backdrop-filter: var(--g-filter);
backdrop-filter: var(--g-filter);
}
/* ========================= 5. CARDS / PANELS ============================ */
.card, .cards .card, .mx-card {
position: relative;
isolation: isolate;
background: linear-gradient(180deg, var(--g-layer-2), var(--g-layer-0));
border: 1px solid var(--g-border);
border-radius: var(--g-radius-lg);
box-shadow: var(--g-shadow-sm), var(--g-highlight);
overflow: hidden;
-webkit-backdrop-filter: var(--g-filter);
backdrop-filter: var(--g-filter);
transition: border-color var(--g-t), box-shadow var(--g-t), transform var(--g-t), background-color var(--g-t);
border-color: var(--g-border-strong);
box-shadow: var(--g-shadow-md), var(--g-highlight);
}
/* Reflejo de vidrio: en claro el sheen blanco es lo que "marca" el cristal */
.card::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
border-radius: inherit;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.10) 42%, rgba(255, 255, 255, 0) 64%),
radial-gradient(130% 70% at 0% 0%, rgba(255, 255, 255, 0.40), transparent 58%);
}
@media (hover: hover) {
.card:hover {
transform: translateY(-2px);
border-color: var(--g-border-strong);
box-shadow: var(--g-shadow-md), var(--g-highlight);
}
}
.card-body { padding: 1.5rem; color: var(--g-text); }
.card-header {
background: var(--g-layer-0);
border-bottom: 1px solid var(--g-border-soft);
box-shadow: var(--g-highlight-soft);
padding: 1.05rem 1.5rem;
color: var(--g-text);
font-weight: 600;
}
.card-footer {
background: var(--g-layer-0);
border-top: 1px solid var(--g-border-soft);
padding: 1rem 1.5rem;
}
.card-title { color: var(--g-text); font-weight: 600; margin-bottom: 0.35rem; letter-spacing: -0.015em; }
.card-subtitle { color: var(--g-text-muted); font-weight: 500; }
.card-description { color: var(--g-text-muted); font-size: 0.87rem; margin-bottom: 1rem; }
.card-text { color: var(--g-text-muted); }
.card-link { color: var(--g-accent-2); font-weight: 500; }
.card-link:hover { color: var(--g-accent); }
.card-link + .card-link { margin-left: 1rem; }
.card-img-top { border-radius: 0; }
/* Sobre imagenes se mantiene el velo oscuro: encima va texto claro */
.card-img-overlay {
border-radius: inherit;
background: linear-gradient(180deg, rgba(2, 6, 23, 0) 35%, rgba(2, 6, 23, 0.78));
}
.card-header-tabs .nav-link, .card-header-pills .nav-link { border-radius: var(--g-radius-sm); }
/* Card destacada / con highlight interno mas marcado */
.card--featured, .card-featured {
background: linear-gradient(180deg, var(--g-layer-3), var(--g-layer-0));
border-color: var(--g-border-strong);
box-shadow: var(--g-shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
/* Paneles de contenido */
.chart-container {
background: linear-gradient(180deg, var(--g-layer-2), var(--g-layer-0));
border: 1px solid var(--g-border);
border-radius: var(--g-radius-lg);
box-shadow: var(--g-shadow-sm), var(--g-highlight);
padding: 1.25rem;
-webkit-backdrop-filter: var(--g-filter);
backdrop-filter: var(--g-filter);
}
.app-window, .app-titlebar {
background: linear-gradient(180deg, var(--g-layer-2), var(--g-layer-0));
border: 1px solid var(--g-border);
border-radius: var(--g-radius);
box-shadow: var(--g-shadow-sm), var(--g-highlight);
-webkit-backdrop-filter: var(--g-filter);
backdrop-filter: var(--g-filter);
}
.app-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25); }
.app-dot:first-child { background: #ef4444; }
.app-dot:nth-child(2) { background: #f59e0b; }
.app-dot:last-child { background: #22c55e; }
.case-row {
background: var(--g-layer-1);
border: 1px solid var(--g-border-soft);
border-radius: var(--g-radius-sm);
padding: 0.7rem 1rem;
transition: background-color var(--g-t-fast), border-color var(--g-t-fast), transform var(--g-t-fast);
}
.case-row:hover {
background: var(--g-layer-3);
border-color: var(--g-border);
transform: translateX(2px);
}
.kanban-board { gap: 1rem; }
/* ============ 5b. CARD-ICON (icono de tarjeta) ========================= */
/* Parte "card" del grupo ".card-icon, .icon-box" del skin; las reglas de
.icon-box permanecen en glassmorphism-light.css. */
.card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: var(--g-radius-sm);
background: var(--g-layer-2);
border: 1px solid var(--g-border);
box-shadow: var(--g-highlight-soft);
color: var(--g-accent-2);
font-size: 1.12rem;
-webkit-backdrop-filter: var(--g-filter-sm);
backdrop-filter: var(--g-filter-sm);
transition: background-color var(--g-t-fast), border-color var(--g-t-fast), color var(--g-t-fast);
}
.card-icon i { font-size: 1.12em; }
/* ============ 5c. KPIS / TARJETAS DE METRICAS ========================== */
/* KPIs / estadisticas */
.dash-kpi, .kpi-card {
position: relative;
isolation: isolate;
background: linear-gradient(180deg, var(--g-layer-2), var(--g-layer-0));
border: 1px solid var(--g-border);
border-radius: var(--g-radius-lg);
box-shadow: var(--g-shadow-sm), var(--g-highlight);
padding: 1.35rem 1.5rem;
-webkit-backdrop-filter: var(--g-filter);
backdrop-filter: var(--g-filter);
transition: border-color var(--g-t), box-shadow var(--g-t), transform var(--g-t);
}
.dash-kpi::before, .kpi-card::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
border-radius: inherit;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.08) 42%, rgba(255, 255, 255, 0) 64%),
radial-gradient(120% 80% at 100% 0%, rgba(37, 99, 235, 0.10), transparent 62%);
}
.dash-kpi:hover, .kpi-card:hover {
transform: translateY(-2px);
border-color: var(--g-border-strong);
box-shadow: var(--g-shadow-md), var(--g-highlight);
}
.kpi-value {
color: var(--g-text);
font-weight: 600;
font-size: 1.72rem;
letter-spacing: -0.025em;
font-variant-numeric: tabular-nums;
}
.kpi-label {
color: var(--g-text-soft);
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
}
.kpi-growth {
display: inline-block;
font-weight: 600;
font-size: 0.78rem;
border-radius: var(--g-radius-pill);
padding: 0.16rem 0.55rem;
border: 1px solid transparent;
}
.kpi-growth.up, .kpi-growth.positive { color: var(--g-success); background: var(--g-success-soft); border-color: rgba(21, 128, 61, 0.22); }
.kpi-growth.down, .kpi-growth.negative { color: var(--g-danger); background: var(--g-danger-soft); border-color: rgba(220, 38, 38, 0.22); }
.kpi-icon { color: var(--g-accent-2); }
/* ============================= 8. TABLES ================================ */
.table {
--bs-table-bg: transparent;
--bs-table-color: var(--g-text);
--bs-table-border-color: var(--g-border-soft);
--bs-table-hover-bg: var(--g-layer-hover);
color: var(--g-text);
margin-bottom: 0;
font-size: 0.88rem;
border-color: var(--g-border-soft);
}
.table > :not(caption) > * > * {
background-color: transparent;
color: var(--g-text);
border-bottom: 1px solid var(--g-border-soft);
padding: 0.85rem 0.85rem;
box-shadow: none;
vertical-align: middle;
}
.table thead th {
background: var(--g-layer-1);
color: var(--g-text-soft);
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
/* En claro el rim blanco del base seria invisible: se usa hairline */
border-bottom: 1px solid var(--g-hairline) !important;
white-space: nowrap;
box-shadow: none;
}
.table tbody tr:last-child > * { border-bottom: 0; }
.table-hover > tbody > tr:hover > * {
background-color: var(--g-layer-hover);
color: var(--g-text);
transition: background-color var(--g-t-fast);
}
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(15, 23, 42, 0.02); }
.table-sm > :not(caption) > * > * { padding: 0.5rem 0.6rem; }
.table-dark { --bs-table-bg: #1e293b; --bs-table-color: #f8fafc; background-color: #1e293b; }
.table-dark > :not(caption) > * > * { color: #f8fafc; border-bottom-color: rgba(255, 255, 255, 0.12); }
.table-responsive {
background: linear-gradient(180deg, var(--g-layer-1), var(--g-layer-0));
border: 1px solid var(--g-border);
border-radius: var(--g-radius-lg);
box-shadow: var(--g-shadow-sm), var(--g-highlight);
padding: 0.35rem;
-webkit-backdrop-filter: var(--g-filter);
backdrop-filter: var(--g-filter);
}
/* La plantilla fuerza fondo blanco en contenedores dentro de tablas:
se neutraliza para mantener visible el vidrio del contenedor. */
table .d-flex { background: transparent !important; border-radius: 0 !important; padding: 0 !important; }
/* La plantilla fuerza link blanco en hover dentro de tablas */
.table-hover > tbody > tr:hover a { color: var(--g-accent-2) !important; }
.table caption { color: var(--g-text-soft); font-size: 0.78rem; }
/* ======================= 8b. TABLES: DATATABLES ======================== */
.dataTables_wrapper { color: var(--g-text-muted); font-size: 0.85rem; padding: 1rem 0.85rem; }
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label { color: var(--g-text-soft); font-size: 0.8rem; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
background-color: var(--g-layer-2);
border: 1px solid var(--g-hairline);
border-radius: var(--g-radius-xs);
color: var(--g-text);
padding: 0.35rem 0.6rem;
margin-left: 0.4rem;
outline: 0;
transition: border-color var(--g-t-fast), box-shadow var(--g-t-fast), background-color var(--g-t-fast);
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
border-color: var(--g-border-accent);
box-shadow: var(--g-ring);
background-color: var(--g-layer-3);
}
.dataTables_wrapper .dataTables_info { color: var(--g-text-soft); font-size: 0.8rem; padding-top: 0.85rem; }
.dataTables_wrapper .dataTables_paginate { padding-top: 0.6rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
border: 1px solid var(--g-hairline) !important;
background: var(--g-layer-2) !important;
color: var(--g-text-muted) !important;
border-radius: var(--g-radius-xs) !important;
margin: 0 0.12rem 0.3rem;
padding: 0.3rem 0.65rem;
font-weight: 500;
box-shadow: var(--g-highlight-soft);
transition: background-color var(--g-t-fast), border-color var(--g-t-fast), color var(--g-t-fast);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: var(--g-layer-4) !important;
border-color: var(--g-border-strong) !important;
color: var(--g-text) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
background: var(--g-accent-soft) !important;
border-color: var(--g-border-accent) !important;
color: var(--g-accent-2) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: 0.4; box-shadow: none; }
.dataTables_wrapper table.dataTable thead .sorting::before,
.dataTables_wrapper table.dataTable thead .sorting::after { opacity: 0.28; }
.dataTables_processing {
background: var(--g-layer-4) !important;
border: 1px solid var(--g-border);
border-radius: var(--g-radius);
box-shadow: var(--g-shadow-lg);
color: var(--g-text);
-webkit-backdrop-filter: var(--g-filter-lg);
backdrop-filter: var(--g-filter-lg);
}
/* ===================== 9b. MODALS ====================================== */
.modal-content {
position: relative;
isolation: isolate;
background: linear-gradient(180deg, var(--g-layer-4), var(--g-layer-2));
border: 1px solid var(--g-border-strong);
border-radius: var(--g-radius-lg);
box-shadow: var(--g-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.75);
color: var(--g-text);
-webkit-backdrop-filter: var(--g-filter-lg);
backdrop-filter: var(--g-filter-lg);
}
.modal-content::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
border-radius: inherit;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.10) 45%, rgba(255, 255, 255, 0) 70%);
}
.modal-header { border-bottom: 1px solid var(--g-border-soft); padding: 1.15rem 1.4rem; }
.modal-title { color: var(--g-text); font-weight: 600; letter-spacing: -0.015em; }
.modal-body { padding: 1.4rem; color: var(--g-text-muted); }
.modal-footer { border-top: 1px solid var(--g-border-soft); padding: 1rem 1.4rem; gap: 0.5rem; }
/* Scrim: en claro un velo menos denso que el negro del base */
.modal-backdrop {
background-color: rgba(15, 23, 42, 0.40) !important;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.modal-fullscreen .modal-content { border-radius: 0; }
/* ===== 12b. STATES: CARD (del bloque "12. STATES" del skin) ============ */
/* Transiciones coherentes: mismo valor que el grupo de "12. STATES" */
.card {
transition-duration: 180ms;
transition-timing-function: var(--g-ease);
}
/* Hover con elevacion luminosa sutil (del grupo de "12. STATES") */
.case-row:hover {
box-shadow: var(--g-highlight-soft);
}
/* Card con foco interno (accesibilidad en formularios dentro de tarjetas) */
.card:focus-within {
border-color: var(--g-border-strong);
box-shadow: var(--g-shadow-md), 0 0 0 1px rgba(37, 99, 235, 0.14), var(--g-highlight);
}
/* ==== 13b. SCROLLBARS: CONTENEDORES CON SCROLL (tablas / modales) ====== */
/* Del bloque "13. SCROLLBARS" del skin (sidebar, dropdown, offcanvas y pre
permanecen alli). */
.table-responsive, .modal-body {
scrollbar-color: rgba(15, 23, 42, 0.914) transparent;
border-radius: 20px;
}
/* ============ 14b. RESPONSIVE (card / kpi / tabla / modal) ============= */
/* Mismos breakpoints y mismos valores que el bloque "14. RESPONSIVE" */
@media (max-width: 1399.98px) {
.card-body, .card-header, .card-footer { padding-left: 1.25rem; padding-right: 1.25rem; }
}
@media (max-width: 1199.98px) {
.kpi-value { font-size: 1.55rem; }
}
@media (max-width: 991.98px) {
/* Se conserva el ahorro de blur, pero manteniendo saturacion alta: es lo
que hace visible el color a traves del vidrio en claro. */
.card, .chart-container, .dash-kpi, .kpi-card, .table-responsive {
-webkit-backdrop-filter: blur(15px) saturate(190%);
backdrop-filter: blur(15px) saturate(190%);
}
.modal-content {
-webkit-backdrop-filter: blur(20px) saturate(195%);
backdrop-filter: blur(20px) saturate(195%);
}
}
@media (max-width: 767.98px) {
.card-body { padding: 1.1rem; }
.card-header, .card-footer { padding: 0.85rem 1.1rem; }
.dash-kpi, .kpi-card { padding: 1.1rem 1.15rem; }
.kpi-value { font-size: 1.42rem; }
.table { font-size: 0.85rem; }
.table > :not(caption) > * > * { padding: 0.7rem 0.6rem; }
.chart-container { padding: 0.9rem; }
.card, .dash-kpi, .kpi-card, .chart-container, .table-responsive {
-webkit-backdrop-filter: blur(13px) saturate(185%);
backdrop-filter: blur(13px) saturate(185%);
}
.modal-content {
-webkit-backdrop-filter: blur(16px) saturate(190%);
backdrop-filter: blur(16px) saturate(190%);
}
.modal-dialog { margin: 0.5rem; }
.modal-content { border-radius: var(--g-radius); }
}
@media (max-width: 575.98px) {
.card-body { padding: 1rem; }
.card, .dash-kpi, .kpi-card { border-radius: var(--g-radius); }
.modal-dialog { margin: 0.35rem; }
.table-responsive { padding: 0.2rem; border-radius: var(--g-radius); }
}
/* Optimizacion: menos blur cuando no hay hover/foco (menos coste en GPU) */
@media (hover: none) {
.card:hover { transform: none; }
.card, .dash-kpi, .kpi-card { box-shadow: var(--g-shadow-sm), var(--g-highlight); }
}
/* ========= 15b. A11Y / PRINT (card / kpi / tabla / modal) ============== */
@media (prefers-reduced-motion: reduce) {
.card:hover, .dash-kpi:hover, .kpi-card:hover { transform: none; }
}
/* Contraste reforzado cuando el sistema lo solicita */
@media (prefers-contrast: more) {
.card, .modal-content { border-width: 1px; }
}
/* Impresion: el vidrio claro pasa a papel blanco */
@media print {
.modal-backdrop { display: none !important; }
.card, .dash-kpi, .kpi-card, .chart-container, .modal-content, .table-responsive {
background: #fff !important;
border: 1px solid #d0d0d0 !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
.card, .card * , .table, .table * { color: #111 !important; }
.table-dark, .table-dark * { color: #111 !important; background: #fff !important; border-color: #d0d0d0 !important; }
}