/**
 * ==================================================
 * MASCOTAPP 2026
 * Sistema de Diseño Global
 * ==================================================
 */

/* ==================================================
   RESET
================================================== */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    padding:0;
    font-family:'Inter',sans-serif;
}

/* ==================================================
   SCROLLBAR
================================================== */

::-webkit-scrollbar{
    width:8px;
    height:8px;
}

::-webkit-scrollbar-track{
    background:transparent;
}

::-webkit-scrollbar-thumb{
    background:#d1d5db;
    border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
    background:#9ca3af;
}

/* ==================================================
   LAYOUT
================================================== */

.app-container{
    min-height:100vh;
    background:#F8FAFC;
}

.page-container{
    max-width:1400px;
    margin:0 auto;
}

.page-header{
    margin-bottom:32px;
}

.page-title{
    font-size:2rem;
    font-weight:800;
    color:#111827;
    line-height:1.1;
}

.page-subtitle{
    margin-top:6px;
    font-size:.95rem;
    color:#6B7280;
}

/* ==================================================
   CARDS
================================================== */

.card{
    background:#FFFFFF;
    border:1px solid #EEF2F7;
    border-radius:20px;
    box-shadow:0 2px 12px rgba(15,23,42,.04);
}

.card-body{
    padding:24px;
}

.card-hover{
    transition:all .25s ease;
}

.card-hover:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(15,23,42,.08);
}

/* ==================================================
   BOTONES
================================================== */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    border:none;
    cursor:pointer;
    text-decoration:none;

    font-weight:600;
    font-size:.95rem;

    padding:12px 20px;
    border-radius:14px;

    transition:.25s ease;
}

.btn-primary{
    background:#6C63FF;
    color:white;
}

.btn-primary:hover{
    background:#5A52E0;
}

.btn-secondary{
    background:white;
    color:#374151;
    border:1px solid #E5E7EB;
}

.btn-secondary:hover{
    background:#F9FAFB;
}

.btn-danger{
    background:#EF4444;
    color:white;
}

.btn-danger:hover{
    background:#DC2626;
}

/* ==================================================
   FORMULARIOS
================================================== */

.form-group{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.form-label{
    font-size:.9rem;
    font-weight:600;
    color:#374151;
}

.form-input{
    width:100%;

    border:1px solid #E5E7EB;
    background:#FFFFFF;

    border-radius:14px;

    padding:12px 16px;

    font-size:.95rem;

    transition:.2s ease;
}

.form-input:focus{
    outline:none;
    border-color:#6C63FF;
    box-shadow:0 0 0 4px rgba(108,99,255,.10);
}

.form-input::placeholder{
    color:#9CA3AF;
}

/* ==================================================
   BADGES
================================================== */

.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    font-size:.75rem;
    font-weight:700;

    padding:6px 10px;
    border-radius:999px;
}

.badge-primary{
    background:#F3F2FF;
    color:#6C63FF;
}

.badge-success{
    background:#DCFCE7;
    color:#15803D;
}

.badge-warning{
    background:#FEF3C7;
    color:#B45309;
}

.badge-danger{
    background:#FEE2E2;
    color:#B91C1C;
}

/* ==================================================
   ESTADÍSTICAS DASHBOARD
================================================== */

.stat-card{
    background:#FFFFFF;
    border-radius:20px;
    border:1px solid #EEF2F7;
    padding:22px;
}

.stat-icon{
    width:48px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:14px;

    background:#F3F2FF;
    color:#6C63FF;
}

.stat-label{
    margin-top:14px;
    font-size:.85rem;
    color:#6B7280;
}

.stat-value{
    margin-top:4px;
    font-size:1.8rem;
    font-weight:800;
    color:#111827;
}

/* ==================================================
   TARJETA DE MASCOTA
================================================== */

.pet-card{
    background:#FFFFFF;
    border:1px solid #EEF2F7;
    border-radius:24px;

    padding:24px;

    text-align:center;

    transition:.25s ease;
    cursor:pointer;
}

.pet-card:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 35px rgba(15,23,42,.08);
}

.pet-avatar{
    width:96px;
    height:96px;

    border-radius:999px;

    object-fit:cover;

    margin:0 auto 16px;
}

.pet-name{
    font-size:1.2rem;
    font-weight:800;
    color:#111827;
}

.pet-breed{
    margin-top:4px;
    font-size:.85rem;
    color:#6B7280;
}

.pet-age{
    margin-top:16px;
}

/* ==================================================
   MODALES
================================================== */

.modal-backdrop{
    position:fixed;
    inset:0;

    background:rgba(15,23,42,.40);
    backdrop-filter:blur(4px);

    z-index:80;
}

.modal-card{
    background:white;
    border-radius:24px;
    padding:28px;
}

/* ==================================================
   ANIMACIONES
================================================== */

.fade-in{
    animation:fadeIn .25s ease;
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(8px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ==================================================
   MOBILE
================================================== */

@media(max-width:768px){

    .page-title{
        font-size:1.7rem;
    }

    .card-body{
        padding:18px;
    }

    .btn{
        width:100%;
    }

}