/* ============================================================
   DINERIN — Design System
   Unificado: variables + animaciones + componentes + layout
   ============================================================ */

/* ============================================================
   1. CUSTOM PROPERTIES
   ============================================================ */

:root {
    --color-blue: #DCEBFF;
    --color-green: #DFF5EA;
    --color-purple: #EFE3FF;
    --color-orange: #FFE9D6;
    --color-red: #FFE2E2;
    --color-yellow: #FFF4CC;
    --color-teal: #E0F7F5;
    --color-gray: #ECEFF3;
    --icon-color: #1F2937;
    --brand: #10B981;
    --brand-600: #059669;
}

/* ============================================================
   2. RESET & BASE (evita colisiones con Tailwind)
   ============================================================ */

[x-cloak] { display: none !important; }

.max-w-2xl { min-width: 0; }

.max-w-2xl input[type="text"],
.max-w-2xl input[type="number"],
.max-w-2xl input[type="date"],
.max-w-2xl input[type="datetime-local"],
.max-w-2xl input[type="email"],
.max-w-2xl input[type="password"],
.max-w-2xl select,
.max-w-2xl textarea {
    max-width: 100% !important;
    box-sizing: border-box;
}

html { scroll-behavior: smooth; }

/* ============================================================
   3. KEYFRAME ANIMATIONS (unificadas, sin duplicados)
   ============================================================ */

/* Fade */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-15px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(15px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Scale */
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes scaleInUp {
    from { opacity: 0; transform: scale(0.9) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes scaleUp {
    from { transform: scale(1); }
    to   { transform: scale(1.05); }
}

/* Slide */
@keyframes slideInFromLeft {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}
@keyframes slideInFromRight {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
@keyframes slideInFromTop {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}
@keyframes slideInFromBottom {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
@keyframes slideOutToRight {
    from { transform: translateX(0); }
    to   { transform: translateX(100%); }
}
@keyframes slideUpIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Bounce & Elastic */
@keyframes bounceIn {
    0%   { opacity: 0; transform: scale(0.3) translateY(-30px); }
    50%  { opacity: 1; transform: scale(1.05); }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1) translateY(0); }
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
@keyframes elastic {
    0%   { transform: scale(0.9); }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Spin */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes spinReverse {
    from { transform: rotate(360deg); }
    to   { transform: rotate(0deg); }
}

/* Glow */
@keyframes glow {
    0%, 100% { box-shadow: 0 0 5px rgba(16, 185, 129, 0.5); }
    50%      { box-shadow: 0 0 20px rgba(16, 185, 129, 0.8); }
}
@keyframes glowSuccess {
    0%, 100% { box-shadow: 0 0 5px rgba(34, 197, 94, 0.5); }
    50%      { box-shadow: 0 0 20px rgba(34, 197, 94, 0.8); }
}
@keyframes glowError {
    0%, 100% { box-shadow: 0 0 5px rgba(239, 68, 68, 0.5); }
    50%      { box-shadow: 0 0 20px rgba(239, 68, 68, 0.8); }
}

/* Shimmer */
@keyframes shimmer {
    0%   { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

/* Gradient */
@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes colorShift {
    0%, 100% { color: #10b981; }
    50%      { color: #059669; }
}

/* Attention */
@keyframes wobble {
    0%, 100% { transform: translateX(0); }
    15%  { transform: translateX(-5px) rotate(-1deg); }
    30%  { transform: translateX(5px) rotate(1deg); }
    45%  { transform: translateX(-5px) rotate(-1deg); }
    60%  { transform: translateX(5px) rotate(1deg); }
    75%  { transform: translateX(-5px) rotate(-1deg); }
}
@keyframes jello {
    from, to { transform: skewX(0deg) skewY(0deg); }
    30%  { transform: skewX(-12.5deg) skewY(-12.5deg); }
    60%  { transform: skewX(6.25deg) skewY(6.25deg); }
}

/* Page transitions */
@keyframes fadeInPage {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slideDownIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes focusGlow {
    0%   { box-shadow: 0 0 0 2px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); }
}
@keyframes heroEnter {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   4. UTILITY CLASSES
   ============================================================ */

.animate-fade-in        { animation: fadeIn 0.3s ease-in-out; }
.animate-fade-in-down   { animation: fadeInDown 0.4s ease-out; }
.animate-fade-in-up     { animation: fadeInUp 0.4s ease-out; }
.animate-fade-in-left   { animation: fadeInLeft 0.4s ease-out; }
.animate-fade-in-right  { animation: fadeInRight 0.4s ease-out; }
.animate-scale-in       { animation: scaleIn 0.3s ease-out; }
.animate-scale-in-up    { animation: scaleInUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.animate-pulse-soft     { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-slide-in-left  { animation: slideInFromLeft 0.3s ease-out; }
.animate-slide-in-right { animation: slideInFromRight 0.3s ease-out; }
.animate-slide-in-up    { animation: slideInFromBottom 0.3s ease-out; }
.animate-slide-out-right{ animation: slideOutToRight 0.3s ease-in forwards; }
.animate-bounce-in      { animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.animate-bounce-soft    { animation: bounce 2s ease-in-out infinite; }
.animate-elastic        { animation: elastic 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.animate-glow           { animation: glow 2s ease-in-out infinite; }
.animate-glow-success   { animation: glowSuccess 2s ease-in-out infinite; }
.animate-glow-error     { animation: glowError 2s ease-in-out infinite; }
.animate-spin-slow      { animation: spin 3s linear infinite; }
.animate-spin-fast      { animation: spin 1s linear infinite; }
.animate-wobble         { animation: wobble 0.8s ease-in-out; }
.animate-jello          { animation: jello 0.9s ease-in-out; }

.page-enter  { animation: fadeInUp 0.4s ease-out; }
.page-exit   { animation: fadeOut 0.2s ease-in; }

.hero-appear  { animation: heroEnter .28s ease-out; }

/* ============================================================
   5. TRANSITION HELPERS
   ============================================================ */

.transition-all-fast    { transition: all 0.15s ease-in-out; }
.transition-all-normal  { transition: all 0.3s ease-in-out; }
.transition-all-smooth  { transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.transition-smooth      { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.transition-bounce      { transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ============================================================
   6. HOVER STATE ANIMATIONS
   ============================================================ */

.hover-scale        { transition: transform 0.3s ease-out; }
.hover-scale:hover  { transform: scale(1.05); }
.hover-scale-sm     { transition: transform 0.3s ease-out; }
.hover-scale-sm:hover { transform: scale(1.02); }

.hover-lift {
    transition: all 0.3s ease-out;
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
.hover-lift-subtle {
    transition: all 0.3s ease-out;
}
.hover-lift-subtle:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.hover-glow {
    transition: all 0.3s ease-out;
}
.hover-glow:hover {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
}

/* ============================================================
   7. STAGGER ANIMATIONS
   ============================================================ */

.animate-stagger-children > * {
    animation: fadeInUp 0.4s ease-out both;
}
.animate-stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
.animate-stagger-children > *:nth-child(2) { animation-delay: 0.1s; }
.animate-stagger-children > *:nth-child(3) { animation-delay: 0.15s; }
.animate-stagger-children > *:nth-child(4) { animation-delay: 0.2s; }
.animate-stagger-children > *:nth-child(5) { animation-delay: 0.25s; }
.animate-stagger-children > *:nth-child(6) { animation-delay: 0.3s; }
.animate-stagger-children > *:nth-child(7) { animation-delay: 0.35s; }
.animate-stagger-children > *:nth-child(8) { animation-delay: 0.4s; }

/* ============================================================
   8. LOADING STATES
   ============================================================ */

.loading {
    position: relative;
    pointer-events: none;
}
.loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 16px; height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(16, 185, 129, 0.2);
    border-radius: 50%;
    border-top-color: #10b981;
    animation: spin 1s linear infinite;
}

.loading-shimmer {
    background: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}
.loading-pulse   { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.loading-spinner { animation: spin 1s linear infinite; }

/* ============================================================
   9. SCROLLBAR CUSTOM
   ============================================================ */

.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}
.custom-scrollbar:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
}

/* Firefox */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}

/* ============================================================
   10. PAGE & NAVIGATION ANIMATIONS
   ============================================================ */

body {
    animation: fadeInPage 0.5s ease-out;
}
header {
    animation: slideDownIn 0.4s ease-out;
}

/* ============================================================
   11. BUTTONS — base interaction
   ============================================================ */

button {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
button:hover  { transform: translateY(-2px); }
button:active { transform: translateY(0); }

/* ============================================================
   12. INPUTS — focus glow
   ============================================================ */

input,
select,
textarea {
    transition: all 0.25s ease;
}
input:focus,
select:focus,
textarea:focus {
    animation: focusGlow 0.3s ease;
}

/* ============================================================
   13. LINKS — underline animation
   ============================================================ */

a {
    transition: all 0.25s ease;
    position: relative;
}
a::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 0; height: 2px;
    background: currentColor;
    transition: width 0.3s ease;
    opacity: 0.5;
}
a:hover::after { width: 100%; }

/* Exclude nav links */
aside nav a::after { display: none; }
aside nav a:hover  { transform: none; }
aside nav a.border  { border-color: transparent !important; }

/* ============================================================
   14. SIDEBAR — branding + user menu
   ============================================================ */

.sidebar {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.sidebar-top    { flex: 1; }
.sidebar-footer {
    padding: 16px 18px;
    border-top: 1px solid rgba(255,255,255,0.06);
    position: relative;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    padding: 20px 20px 18px;
    border-bottom: 1px solid #1e293b;
}
.sidebar-brand__icon {
    width: 28px; height: 28px;
    object-fit: contain;
    display: block;
    flex: 0 0 28px;
}
.sidebar-brand__text {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.95);
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.user-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #10b981;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}
.user-name  { font-size: 14px; font-weight: 600; color: white; }
.user-email { font-size: 12px; opacity: 0.6; color: white; }
.user-dropdown { margin-top: 10px; background: #1e293b; }

.menu-item {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 14px;
    color: white;
    transition: background 0.2s;
    text-align: left;
}
.menu-item:hover {
    background: rgba(255,255,255,0.05);
    text-decoration: none;
}
.menu-item.logout { color: #ef4444; }

/* ============================================================
   15. ALERTS
   ============================================================ */

.alert {
    border-radius: 16px;
    border: 2px solid;
    animation: slideInDown 0.4s ease-out;
    padding: 16px 20px;
}
.alert-success {
    background: linear-gradient(135deg, #dcfce7 0%, #ecfdf5 100%);
    border-color: rgba(34, 197, 94, 0.3);
    color: #166534;
}
.alert-danger {
    background: linear-gradient(135deg, #fee2e2 0%, #fef0f0 100%);
    border-color: rgba(239, 68, 68, 0.3);
    color: #7f1d1d;
}
.alert-info {
    background: linear-gradient(135deg, #dbeafe 0%, #f0f9ff 100%);
    border-color: rgba(59, 130, 246, 0.3);
    color: #1e40af;
}
.alert-warning {
    background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
    border-color: rgba(217, 119, 6, 0.3);
    color: #78350f;
}

/* ============================================================
   16. BADGES
   ============================================================ */

.badge {
    border-radius: 20px;
    padding: 6px 12px;
    font-weight: 600;
    display: inline-block;
    transition: all 0.25s ease;
}
.badge:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.badge-primary  { background: linear-gradient(135deg, #dbeafe 0%, #e0f2fe 100%); color: #0c4a6e; }
.badge-success  { background: linear-gradient(135deg, #dcfce7 0%, #ecfdf5 100%); color: #166534; }
.badge-danger   { background: linear-gradient(135deg, #fee2e2 0%, #fef0f0 100%); color: #7f1d1d; }

/* ============================================================
   17. MODALS
   ============================================================ */

.modal-enter {
    animation: fadeInUp 0.4s ease-out;
}

/* ============================================================
   18. PROGRESS BARS
   ============================================================ */

.progress-bar {
    border-radius: 20px;
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
    animation: slideInFromLeft 0.6s ease-out;
    transition: width 0.4s ease;
}

.progress-bar-animated { transition: width .4s ease; }

/* ============================================================
   19. TABLES
   ============================================================ */

.table-row-hover:hover { background-color: rgba(15,23,42,.03); }

/* ============================================================
   20. KPI / HERO AMOUNTS
   ============================================================ */

.kpi-hero-amount {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.hero-state-chip {
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* ============================================================
   21. SPINNER / LOADER
   ============================================================ */

.spinner {
    animation: spin 1s linear infinite;
}
.loader {
    border: 4px solid rgba(16, 185, 129, 0.1);
    border-top: 4px solid #10b981;
    border-radius: 50%;
    width: 40px; height: 40px;
    animation: spin 1s linear infinite;
}

/* ============================================================
   22. PAGINATION
   ============================================================ */

.pagination a,
.pagination button {
    border-radius: 12px;
    transition: all 0.25s ease;
    margin: 0 4px;
}
.pagination a:hover,
.pagination button:hover {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    transform: translateY(-2px);
}
.pagination .active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}