/* PescaWiki — Auth */
:root {
    --color-agua-profunda: #0a3d62;
    --color-agua-media: #1e88e5;
    --color-acento: #00bcd4;
    --color-error: #c62828;
    --color-exito: #2e7d32;
}

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

body.auth-body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    min-height: 100vh;
    background: linear-gradient(135deg, #0a3d62 0%, #1e88e5 50%, #00bcd4 100%);
    display: flex; align-items: center; justify-content: center;
    padding: 20px; overflow-x: hidden; position: relative;
}

.auth-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.wave {
    position: absolute; width: 200%; height: 200px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 45%;
    animation: wave-anim 15s infinite linear;
    bottom: -50px;
}
.wave2 { background: rgba(255,255,255,0.04); animation-duration: 20s; bottom: -80px; }
.wave3 { background: rgba(255,255,255,0.03); animation-duration: 25s; bottom: -110px; }

@keyframes wave-anim {
    0%   { transform: translateX(0) rotate(0deg); }
    100% { transform: translateX(-50%) rotate(360deg); }
}

.auth-container {
    position: relative; z-index: 1;
    width: 100%; max-width: 460px;
    animation: slideUp 0.6s ease-out;
}

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

.auth-card {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 40px 36px;
    box-shadow: 0 20px 60px rgba(10, 61, 98, 0.25);
}

.auth-brand { text-align: center; margin-bottom: 28px; }
.auth-logo {
    font-size: 56px; display: inline-block;
    animation: floatLogo 3s ease-in-out infinite;
    filter: drop-shadow(0 4px 10px rgba(10, 61, 98, 0.3));
}
@keyframes floatLogo {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

.auth-brand h1 { font-size: 28px; font-weight: 700; color: var(--color-agua-profunda); margin-top: 8px; }
.tagline { color: #5a6c7d; font-size: 13px; margin-top: 4px; font-style: italic; }

.auth-card h2 { font-size: 22px; margin-bottom: 24px; text-align: center; font-weight: 600; }

.auth-form { display: flex; flex-direction: column; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-group label { font-size: 13px; font-weight: 600; }

.input-icon { position: relative; display: flex; align-items: center; }
.input-icon span { position: absolute; left: 14px; font-size: 16px; pointer-events: none; opacity: 0.7; }
.input-icon input {
    width: 100%; padding: 14px 14px 14px 44px;
    border: 2px solid #e3f2fd; border-radius: 12px;
    font-size: 15px; font-family: inherit;
    transition: all 0.2s; background: #f8fbfe;
}
.input-icon input:focus {
    outline: none; border-color: var(--color-agua-media);
    background: white;
    box-shadow: 0 0 0 4px rgba(30, 136, 229, 0.1);
}

.btn-primary {
    margin-top: 8px; padding: 15px 24px;
    background: linear-gradient(135deg, var(--color-agua-profunda), var(--color-agua-media));
    color: white; border: none; border-radius: 12px;
    font-size: 15px; font-weight: 600;
    cursor: pointer; transition: all 0.3s;
    font-family: inherit;
    box-shadow: 0 6px 20px rgba(30, 136, 229, 0.3);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(30, 136, 229, 0.45); }

.alert {
    padding: 12px 16px; border-radius: 10px;
    font-size: 14px; margin-bottom: 18px;
    border-left: 4px solid;
}
.alert-error { background: #ffebee; color: var(--color-error); border-color: var(--color-error); }
.alert-success { background: #e8f5e9; color: var(--color-exito); border-color: var(--color-exito); }

.auth-footer { margin-top: 24px; text-align: center; font-size: 14px; color: #5a6c7d; }
.auth-footer a { color: var(--color-agua-media); text-decoration: none; font-weight: 600; }
.auth-footer a:hover { color: var(--color-agua-profunda); }

@media (max-width: 480px) {
    .auth-card { padding: 32px 24px; }
    .form-row { grid-template-columns: 1fr; }
}