/* Sistema de diseño (tokens + Manrope + reglas base). @import debe ir PRIMERO.
duck-motion.css está en el de casi todas las páginas → carga el theme pre-render
(sin salto de fuente ni de color). */
@import url('/theme.css?v=4');
/* ════════════════════════════════════════════════════════════════════════
Duck Motion — capa de microinteracciones premium (principios Emil Kowalski)
Sutil, rápida, intencional. Solo transform/opacity. Respeta reduced-motion.
Editar este archivo afina el motion de TODA la plataforma.
════════════════════════════════════════════════════════════════════════ */
/* ── File inputs con clip 📎 (estilo unificado en toda la plataforma) ──
Estiliza el botón nativo de para que se vea como un botón
tipo "Adjuntar" con icono de clip. CSS-only — no requiere JS ni cambios HTML.
Soporta navegadores modernos vía ::file-selector-button y WebKit legacy. */
input[type="file"] {
font-family: inherit;
font-size: 0.8125rem;
color: #64748b;
cursor: pointer;
}
input[type="file"]::file-selector-button {
background:
url('data:image/svg+xml;utf8,')
no-repeat 0.625rem center / 14px,
#f8fafc;
border: 1.5px dashed #cbd5e1;
border-radius: 0.5rem;
padding: 0.4375rem 0.875rem 0.4375rem 1.875rem;
margin-right: 0.625rem;
color: #475569;
font-family: inherit;
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
transition: background-color 150ms cubic-bezier(0.16,1,0.3,1),
border-color 150ms cubic-bezier(0.16,1,0.3,1),
color 150ms cubic-bezier(0.16,1,0.3,1),
transform 130ms cubic-bezier(0.16,1,0.3,1);
}
input[type="file"]::file-selector-button:hover {
background-color: #f1f5f9;
border-color: #94a3b8;
color: #334155;
transform: translateY(-1px);
}
input[type="file"]::file-selector-button:active {
transform: translateY(0) scale(0.97);
transition-duration: 80ms;
}
/* WebKit legacy fallback (Safari viejo) — mismas reglas */
input[type="file"]::-webkit-file-upload-button {
background:
url('data:image/svg+xml;utf8,')
no-repeat 0.625rem center / 14px,
#f8fafc;
border: 1.5px dashed #cbd5e1;
border-radius: 0.5rem;
padding: 0.4375rem 0.875rem 0.4375rem 1.875rem;
margin-right: 0.625rem;
color: #475569;
font-family: inherit;
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
}
/* ── Badges/chips no rompen en múltiples líneas ──
Cualquier span/div con rounded-full (badges de estado Tailwind) se queda en una línea. */
span[class*="rounded-full"],
div[class*="rounded-full"] {
white-space: nowrap;
}
/* ── Pill-toggle global (estilo de los chips de Requisitos de Nueva Requisición) ──
Uso:
Funciona con CSS :has() — no requiere JS. */
.duck-chips { display:inline-flex; flex-wrap:wrap; gap:0.5rem; }
.duck-chip {
position:relative; display:inline-flex; align-items:center; gap:0.4375rem;
padding:0.4375rem 0.75rem 0.4375rem 0.625rem;
border:1.5px solid #e2e8f0; border-radius:9999px;
background:#f8fafc; color:#64748b;
font-size:0.8125rem; font-weight:600; line-height:1.1;
cursor:pointer; user-select:none; text-transform:none; letter-spacing:0;
transition:background 150ms cubic-bezier(0.16,1,0.3,1),
color 150ms cubic-bezier(0.16,1,0.3,1),
border-color 150ms cubic-bezier(0.16,1,0.3,1),
transform 130ms cubic-bezier(0.16,1,0.3,1);
}
.duck-chip:hover { border-color:#cbd5e1; background:#f1f5f9; color:#334155; transform:translateY(-1px); }
.duck-chip:active { transform:translateY(0) scale(0.97); transition-duration:80ms; }
.duck-chip input { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.duck-chip .duck-chip-check {
width:1rem; height:1rem; border-radius:9999px;
background:#fff; border:1.5px solid #cbd5e1;
display:inline-flex; align-items:center; justify-content:center;
color:#fff; font-size:0.625rem; line-height:1; flex-shrink:0;
transition:background 150ms cubic-bezier(0.16,1,0.3,1), border-color 150ms cubic-bezier(0.16,1,0.3,1);
}
.duck-chip:has(input:checked) { background:#dcfce7; border-color:#22c55e; color:#166534; }
.duck-chip:has(input:checked) .duck-chip-check { background:#22c55e; border-color:#22c55e; }
.duck-chip:has(input:checked) .duck-chip-check::after { content:"✓"; font-weight:700; }
.duck-chip:focus-within { outline:2px solid #F4502E; outline-offset:2px; }
:root{
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* entradas (easeOutExpo) */
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* movimiento A→B */
--ease-in: cubic-bezier(0.4, 0, 1, 1); /* salidas */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* micro-overshoot */
--dur-fast: 130ms; --dur: 200ms; --dur-slow: 320ms;
--mo-accent: #F4502E;
}
/* ── Botones: hover sube, press hunde, focus visible ───────────────────── */
button, .btn, [role="button"], a.btn, input[type="submit"], input[type="button"]{
transition: transform var(--dur-fast) var(--ease-out),
box-shadow var(--dur) var(--ease-out),
background-color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
filter var(--dur-fast) var(--ease-out);
will-change: transform;
}
button:hover, .btn:hover, [role="button"]:hover, a.btn:hover{ transform: translateY(-1px); }
button:active, .btn:active, [role="button"]:active, a.btn:active{
transform: translateY(0) scale(0.97); transition-duration: 80ms; /* release más rápido = táctil */
}
button:disabled, .btn:disabled{ transform: none !important; }
/* ── Focus accesible y elegante (anillo naranja SACS) ──────────────────── */
button:focus-visible, .btn:focus-visible, [role="button"]:focus-visible,
a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
outline: none;
box-shadow: 0 0 0 3px rgba(244, 80, 46, 0.30);
border-color: var(--mo-accent);
}
/* ── Inputs: focus suave ───────────────────────────────────────────────── */
input, select, textarea{
transition: border-color var(--dur) var(--ease-out),
box-shadow var(--dur) var(--ease-out),
background-color var(--dur) var(--ease-out);
}
/* ── Cards / paneles / filas interactivas: leve elevación al hover ─────── */
.card, [class*="card"]{
transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.card:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(21,19,43,0.12); }
/* Filas de tabla: solo color (translate/scale causa "shimmer" del texto) */
tr{ transition: background-color var(--dur-fast) var(--ease-out); }
/* ── Enlaces ───────────────────────────────────────────────────────────── */
a{ transition: color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
/* ── Entrada al montar: fade + subida (aplicar clase .duck-in) ─────────── */
@keyframes duck-enter{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform:none; } }
.duck-in{ animation: duck-enter var(--dur-slow) var(--ease-out) both; }
/* Stagger opcional: .duck-in[style*="--i"] usa --i para el delay */
.duck-in{ animation-delay: calc(var(--i, 0) * 45ms); }
/* ── Modales / diálogos: pop-in desde arriba ───────────────────────────── */
@keyframes duck-pop{ from{ opacity:0; transform: scale(0.96) translateY(6px); } to{ opacity:1; transform:none; } }
@keyframes duck-fade{ from{ opacity:0; } to{ opacity:1; } }
[role="dialog"], .modal, .modal-content, .dialog{
animation: duck-pop var(--dur) var(--ease-out) both;
transform-origin: top center;
}
.modal-backdrop, .overlay, [data-overlay]{ animation: duck-fade var(--dur) var(--ease-out) both; }
/* ── Dropdowns / menús / popovers: scale desde el origen ───────────────── */
@keyframes duck-menu{ from{ opacity:0; transform: scale(0.95) translateY(-4px); } to{ opacity:1; transform:none; } }
.dropdown-menu, [role="menu"], .popover, .menu-pop{
animation: duck-menu var(--dur-fast) var(--ease-out) both;
transform-origin: top right;
}
/* ── Toasts / notificaciones (feel Sonner) ─────────────────────────────── */
@keyframes duck-toast{ from{ opacity:0; transform: translateY(12px) scale(0.98); } to{ opacity:1; transform:none; } }
.toast, [role="status"].toast, .notification-toast{
animation: duck-toast var(--dur) var(--ease-out) both;
}
/* ── Spinners: lo único que debe ser linear ────────────────────────────── */
.spinner, [class*="spinner"], [class*="loading"]{ animation-timing-function: linear !important; }
/* ── Skeleton shimmer para estados de carga ────────────────────────────── */
@keyframes duck-shimmer{ 0%{ background-position: -200% 0; } 100%{ background-position: 200% 0; } }
.skeleton{ background: linear-gradient(90deg,#eee 25%,#f6f6f9 37%,#eee 63%); background-size: 200% 100%; animation: duck-shimmer 1.4s linear infinite; border-radius: 6px; }
/* ── Imágenes/avatares: aparición suave al cargar ──────────────────────── */
img{ transition: opacity var(--dur) var(--ease-out); }
/* ── Proteger el logo SACS de esquina (fixed top-right) ────────────────────
Reserva zona libre arriba-derecha para que los botones de acción del header
no queden debajo del logo. El título sigue a la izquierda; el botón se corre. */
.header{ padding-right: 6.25rem; }
.wrap > .card:first-child .card-header-bar{ padding-right: 5.5rem; }
@media (max-width: 600px){
.header, .wrap > .card:first-child .card-header-bar{ padding-right: 0; flex-wrap: wrap; gap: 0.6rem; }
}
/* ── Accesibilidad: respetar reduced-motion (innegociable) ─────────────── */
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}