/* ═══════════════════════════════════════════════════════════
   VetKaim — Login
   ═══════════════════════════════════════════════════════════ */

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

body {
    min-height: 100dvh;
    font-family: "nunito", sans-serif;
    font-weight: 400;
    font-style: normal;
    background: #61c4ca;
    overflow: hidden; /* paneles de cuadrante ocupan toda la pantalla */
}

/* ── Contenedor ──────────────────────────────────────────── */
.container {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 10; /* crea stacking context por encima de .paws-bg (z-index:2) */
}

/* ── Patas flotantes ─────────────────────────────────────── */
.paws-bg {
    position: fixed;
    inset: 0;
    overflow: hidden;   /* clipea la entrada/salida de cada pata */
    pointer-events: none;
    z-index: 2;         /* detrás de paneles (10) y tarjeta (20) */
}

.paw {
    position: absolute;
    top: 0;
    opacity: 0;                          /* ocultas hasta que la animación las muestra */
    color: rgba(255, 255, 255, .40);
    animation: floatPaw var(--dur, 10s) var(--del, 0s) linear infinite;
    animation-fill-mode: backwards;      /* aplica 0% (opacity:0, translateY:110vh) durante el delay */
    pointer-events: none;
}

@keyframes floatPaw {
    0%   { transform: translateY(110vh) rotate(0deg);   opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { transform: translateY(-10vh)  rotate(360deg); opacity: 0; }
}

/* ── 4 paneles de cuadrante ──────────────────────────────── */
.panel {
    position: absolute;
    width: 50%;
    height: 50%;
    will-change: transform;
    transition: transform .65s cubic-bezier(.77, 0, .175, 1);
    z-index: 10;
}

.panel-tl { top: 0;    left: 0;  background: #ce9acb; }
.panel-tr { top: 0;    right: 0; background: #74ccb2; }
.panel-bl { bottom: 0; left: 0;  background: #2352b8; }
.panel-br { bottom: 0; right: 0; background: #274749; }

.container.open .panel-tl { transform: translate(-100%, -100%); }
.container.open .panel-tr { transform: translate( 100%, -100%); }
.container.open .panel-bl { transform: translate(-100%,  100%); }
.container.open .panel-br { transform: translate( 100%,  100%); }

/* ── Formulario central ──────────────────────────────────── */
.center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    pointer-events: none;
    padding: 16px;               /* margen seguro en móvil */
}

.login-card {
    width: 380px;
    max-width: 100%;
    background: rgba(255,255,255,.97);
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(0,0,0,.25);
    padding: 36px 32px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: scale(.94);
    transition: opacity .4s ease, transform .4s ease;
    transition-delay: 0s;
    pointer-events: none;
}

.container.open .login-card {
    opacity: 1;
    transform: scale(1);
    transition-delay: .38s;
    pointer-events: all;
}

/* Logo */
.login-logo { margin-bottom: 10px; }
.login-logo img { max-width: 210px; width: 100%; }

.login-subtitle {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 26px;
}

/* Form */
.login-form { width: 100%; }

.login-input {
    width: 100%;
    padding: 13px 16px;
    margin-bottom: 12px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    color: #374151;
    background: #f9fafb;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.login-input:focus {
    border-color: #61c4ca;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(26,95,63,.1);
}

/* Contraseña con botón ojo */
.pass-wrap {
    position: relative;
    margin-bottom: 12px;
}

.pass-wrap .login-input {
    margin-bottom: 0;
    padding-right: 46px;
}

.btn-toggle-pass {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #9ca3af;
    font-size: 18px;
    line-height: 1;
    transition: color .2s;
}

.btn-toggle-pass:hover { color: #61c4ca; }

/* Fila recordarme */
.login-row {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    font-size: 13px;
}

.rem-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.remcheck { accent-color: #61c4ca; cursor: pointer; }
.remspan  { color: #6b7280; }
.remcheck:checked + .remspan { color: #61c4ca; font-weight: 600; }

/* Botón entrar */
.login-btn {
    width: 100%;
    padding: 14px;
    background: #61c4ca;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 4px 14px rgba(26,95,63,.3);
}

.login-btn:hover {
    background: #4eb5bb;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(26,95,63,.4);
}

.login-btn:active { transform: translateY(0); }

/* Biometría */
.bioSections {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    color: #61c4ca;
}

.bio-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 14px 0;
}

.bio-divider::before,
.bio-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.bio-divider span {
    color: #9ca3af;
    font-size: 11px;
    white-space: nowrap;
    letter-spacing: 1px;
}

.btn-bio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 20px;
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    color: #374151;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: .2s;
}

.btn-bio:hover {
    background: rgba(97,196,202,.06);
    border-color: #61c4ca;
    color: #61c4ca;
}

.btn-bio:disabled { opacity: .45; cursor: wait; }
.btn-bio .bio-icon { font-size: 20px; line-height: 1; }

/* Footer */
.login-footer {
    margin-top: 20px;
    font-size: 10px;
    color: #c4c9d1;
    text-align: center;
    letter-spacing: 1px;
}

/* ── Responsive ──────────────────────────────────────────── */

/* Tablets pequeñas / móvil grande */
@media (max-width: 480px) {
    .login-card {
        padding: 28px 22px 22px;
        border-radius: 16px;
    }

    .login-logo img { max-width: 170px; }
    .login-subtitle { letter-spacing: 2px; margin-bottom: 20px; }
    .login-input    { font-size: 14px; padding: 11px 14px; }
    .login-btn      { font-size: 13px; letter-spacing: 2px; padding: 13px; }
}

/* Móvil pequeño (iPhone SE, Galaxy A, etc.) */
@media (max-width: 360px) {
    .login-card {
        padding: 22px 16px 18px;
        border-radius: 14px;
    }

    .login-logo img  { max-width: 140px; }
    .login-subtitle  { display: none; }
    .login-input     { font-size: 13px; padding: 10px 12px; margin-bottom: 10px; }
    .login-btn       { font-size: 12px; letter-spacing: 1.5px; padding: 12px; }
    .login-footer    { display: none; }

    .btn-bio    { font-size: 13px; padding: 10px 14px; }
    .bio-divider span { font-size: 10px; }
}