/* ============================================================
UI KIT TUTRONIC — Hoja de estilos de componentes
------------------------------------------------------------
Complementa Tailwind CDN. Se importa con:
Cualquier módulo nuevo la reutiliza para mantener el mismo
look en toda la suite.
============================================================ */
/* ---- Escala de visualización ----
En pantallas de escritorio la interfaz se muestra al 90%
(equivalente al zoom del navegador al 90%) para un uso más
compacto y equilibrado. En móvil se mantiene al 100%. */
@media (min-width: 1024px) {
html { zoom: 0.9; }
}
/* ---- Reserva de layout del shell ----
El sidebar es fijo y el contenido lleva margen/padding. Estas reglas
reservan el espacio desde el PRIMER FRAME (ui.css va en ), de modo
que al navegar entre páginas el contenido NO se desplaza ni el sidebar
"aparece" deformando la página mientras se carga shell.js. */
main.suite-main {
padding: 6rem 0.75rem 2.5rem; /* pt-24 px-3 pb-10 */
}
@media (min-width: 768px) {
/* El margen izquierdo lo controla shell.js: si la página tiene sidebar
(#suiteSidebar), agrega la clase md:ml-64; si no (launcher de la suite),
el contenido queda a ancho completo. */
main.suite-main.md\:ml-64 {
margin-left: 16rem;
}
main.suite-main {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
body.suite-collapsed main.suite-main { margin-left: 4rem; }
/* Columna del sidebar oscura desde el primer frame (evita destello claro) */
#suiteSidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 16rem;
background: #0f172a;
z-index: 40;
}
body.suite-collapsed #suiteSidebar { width: 4rem; }
}
/* Durante la carga inicial ("boot") el shell se monta SIN animar:
el acordeón no se expande ni el contenido se desliza. shell.js añade la
clase body.suite-boot y la quita tras el primer paint. */
body.suite-boot .suite-group-body,
body.suite-boot main.suite-main,
body.suite-boot #suiteHeader header {
transition: none !important;
}
/* ---- Botones ---- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
font-weight: 500;
border-radius: .75rem;
line-height: 1.25rem;
white-space: nowrap;
cursor: pointer;
user-select: none;
transition: all .18s ease;
}
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(99,102,241,.35); }
.btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn-sm { padding: .4rem .8rem; font-size: .75rem; border-radius: .625rem; gap: .375rem; min-height: 2rem; }
.btn-md { padding: .5rem 1rem; font-size: .875rem; min-height: 2.5rem; }
.btn-lg { padding: .65rem 1.3rem; font-size: .9375rem; min-height: 3rem; }
.btn-icon { width: 2.5rem; height: 2.5rem; padding: 0; }
.btn-icon-sm { width: 2.25rem; height: 2.25rem; padding: 0; }
.btn-primary {
background: linear-gradient(135deg, #6366f1, #4f46e5);
color: #fff;
box-shadow: 0 1px 2px rgba(79,70,229,.45), 0 4px 12px -4px rgba(79,70,229,.35);
}
.btn-primary:hover { filter: brightness(1.07); box-shadow: 0 2px 4px rgba(79,70,229,.45), 0 10px 24px -8px rgba(79,70,229,.5); }
.btn-danger {
background: linear-gradient(135deg, #f43f5e, #e11d48);
color: #fff;
box-shadow: 0 1px 2px rgba(225,29,72,.4);
}
.btn-danger:hover { filter: brightness(1.06); }
.btn-success {
background: linear-gradient(135deg, #10b981, #059669);
color: #fff;
box-shadow: 0 1px 2px rgba(5,150,105,.4);
}
.btn-success:hover { filter: brightness(1.06); }
.btn-outline { border: 1px solid #e2e8f0; background: #fff; color: #475569; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.btn-outline:hover { background: #f8fafc; border-color: #cbd5e1; color: #1e293b; }
.btn-ghost { background: transparent; color: #64748b; }
.btn-ghost:hover { background: #f1f5f9; color: #1e293b; }
.btn-soft { background: #eef2ff; color: #4f46e5; }
.btn-soft:hover { background: #e0e7ff; }
.btn-block { width: 100%; }
/* ---- Badges ---- */
.badge {
display: inline-flex;
align-items: center;
gap: .25rem;
font-size: .6875rem;
font-weight: 600;
padding: .25rem .625rem;
border-radius: 9999px;
}
.badge-indigo { background: #eef2ff; color: #4f46e5; }
.badge-emerald { background: #ecfdf5; color: #059669; }
.badge-amber { background: #fffbeb; color: #d97706; }
.badge-rose { background: #fff1f2; color: #e11d48; }
.badge-slate { background: #f1f5f9; color: #64748b; }
.badge-sky { background: #f0f9ff; color: #0284c7; }
/* ---- Alertas ---- */
.alert {
display: flex;
align-items: flex-start;
gap: .75rem;
border-radius: .875rem;
padding: .75rem 1rem;
border: 1px solid transparent;
}
.alert .a-ico { flex-shrink: 0; margin-top: .1rem; }
.alert .a-close { margin-left: auto; opacity: .55; transition: opacity .15s, transform .15s; flex-shrink: 0; }
.alert .a-close:hover { opacity: 1; transform: scale(1.1); }
.alert-info { background: #f0f9ff; border-color: #bae6fd; color: #075985; }
.alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-danger { background: #fff1f2; border-color: #fecdd3; color: #9f1239; }
/* ---- Tarjetas ---- */
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; box-shadow: 0 1px 3px rgba(15,23,42,.04); }
.card-pad { padding: 1.25rem; }
/* ---- Tablas ---- */
.ui-table { width: 100%; font-size: .875rem; }
.ui-table thead th {
background: linear-gradient(180deg, #f1f5f9, #e9eef4);
font-size: .6875rem;
text-transform: uppercase;
letter-spacing: .06em;
color: #334155;
font-weight: 700;
padding: .8rem 1rem;
text-align: left;
border-bottom: 2px solid #cbd5e1;
white-space: nowrap;
}
.ui-table thead th:last-child { text-align: right; }
.ui-table tbody td { padding: .75rem 1rem; }
.ui-table tbody tr { transition: background .15s; }
.ui-table tbody tr:hover { background: #f8fafc; }
/* ---- Modales (