/*
 * Pantallas de acceso — CartillaVeterinaria.
 *
 * Concepto: la cartilla de papel. El producto sustituye a un carnet de
 * vacunación real, así que la pantalla es ese carnet abierto: cubierta verde a
 * la izquierda, página interior a la derecha y un troquelado entre las dos,
 * como el corte de un talonario. En la cubierta, el isotipo al agua; el resto
 * es papel quieto y tipografía.
 *
 * Todo lo de aquí son variables y pseudo-elementos sobre la maquetación de
 * `bundles/uix/css/uix-auth.css`. Estructura, cero: así los arreglos del bundle
 * siguen llegando y esto no se convierte en una copia divergente.
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root {
    /* Los mismos verdes y cremas de la web pública: hasta ahora el acceso iba
       con el azul de Tabler y parecía de otro producto. */
    --uix-auth-brand: #0f766e;
    --cv-cover-deep: #134e4a;
    --uix-auth-bg: #fafaf8;
    --uix-auth-ink: #1c1917;
    --uix-auth-muted: #78716c;
    --uix-auth-line: #ececea;
    --uix-auth-border: #ddd9d4;
    --uix-auth-radius: 6px;          /* un carnet no tiene esquinas de app */
    --uix-auth-shadow: 0 18px 40px -20px rgba(19, 78, 74, .45);
    --cv-rule: rgba(15, 118, 110, .07);
}

.uix-auth {
    font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    /* El papel del escritorio sobre el que descansa la cartilla. */
    background:
        radial-gradient(120% 90% at 50% -20%, #fff 0%, var(--uix-auth-bg) 60%);
}

/* ---------- Cabecera ---------- */
.uix-auth__top { padding: 1.75rem 2rem; }

.uix-auth__back {
    font-size: .8125rem;
    letter-spacing: .01em;
}

/* ---------- La cartilla ---------- */
.uix-auth__card {
    max-width: 900px;
    border: 1px solid var(--uix-auth-line);
    /* Sin overflow oculto el troquelado y el sello se cortan. */
    overflow: visible;
    border-radius: var(--uix-auth-radius);
}

/* Redondeo solo por fuera, como una cartulina cortada. */
.uix-auth__brand {
    border-radius: var(--uix-auth-radius) 0 0 var(--uix-auth-radius);
    position: relative;
    overflow: hidden;
    padding: 3rem 2.25rem 2.25rem;
    background: linear-gradient(168deg, var(--uix-auth-brand) 0%, var(--cv-cover-deep) 100%);
    justify-content: flex-start;
    gap: 0;
}

.uix-auth__panel {
    border-radius: 0 var(--uix-auth-radius) var(--uix-auth-radius) 0;
    background: #fff;
    padding: 3rem 2.5rem 2.5rem;
}

/* Troquelado: el canto por el que se separan las dos hojas. */
.uix-auth__brand::after {
    content: "";
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    right: 0;
    border-right: 2px dashed rgba(255, 255, 255, .5);
}

.uix-auth__card { position: relative; }
.uix-auth__panel { position: relative; }

/* ---------- Tipografía ---------- */
.uix-auth__brand-title,
.uix-auth__heading {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: 1.08;
}

.uix-auth__brand-title { font-size: 2rem; }
.uix-auth__heading { font-size: 1.625rem; color: var(--uix-auth-ink); }

.uix-auth__brand-text {
    font-size: .9375rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .82);
    max-width: 30ch;
}

/* ---------- Los argumentos, como casillas marcadas de la cartilla ---------- */
.uix-auth__highlights { gap: .75rem; margin-top: 2rem; }

.uix-auth__highlights li {
    align-items: baseline;
    gap: .75rem;
    font-size: .875rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .92);
    max-width: 34ch;
}

/* Sin iconos: tres frases cortas no necesitan viñeta ilustrada, y a 14 px los
   glifos se veían como manchas. Una raya fina de guía y espacio. */
.uix-auth__highlights .icon { display: none; }

.uix-auth__highlights li { padding-left: 1.125rem; position: relative; }

.uix-auth__highlights li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .6em;
    width: .5rem;
    height: 1.5px;
    background: rgba(255, 255, 255, .45);
}

/* ---------- La marca, al agua ----------
   El isotipo (la cruz con la pata) en blanco muy bajo sobre el verde: llena el
   hueco de la mitad inferior de la cubierta sin competir con el titular ni con
   el formulario, y dice de quién es la cartilla sin repetir el nombre que ya
   está en la cabecera. Antes había aquí un sello de goma con texto: sobraba
   ruido para lo poco que aportaba. */
.uix-auth__brand-body { flex: 1; }

.uix-auth__trust {
    position: relative;
    margin-top: auto;
    padding-top: 9rem;
    justify-content: center;
    font-size: .6875rem;
    color: rgba(255, 255, 255, .55);
}

.uix-auth__trust::before {
    content: "";
    position: absolute;
    top: 1.5rem;
    left: 50%;
    width: 6.5rem;
    height: 6.5rem;
    transform: translateX(-50%);
    background: url('/images/brand/isotipo-blanco.svg') center / contain no-repeat;
    opacity: .14;
}

/* ---------- Formulario ---------- */
.uix-auth .form-label {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--uix-auth-muted);
}

/* Campos de impreso: línea inferior, no caja. Una caja dentro de una hoja
   pautada compite con la pauta. */
.uix-auth .form-control,
.uix-auth .form-select {
    border: 0;
    border-bottom: 1.5px solid var(--uix-auth-border);
    border-radius: 0;
    padding-inline: 0;
    background: transparent;
    font-size: .9375rem;
    color: var(--uix-auth-ink);
}

.uix-auth .form-control:focus,
.uix-auth .form-select:focus {
    border-bottom-color: var(--uix-auth-brand);
    box-shadow: none;
    background: transparent;
}

.uix-auth .form-control::placeholder { color: #b9b4ae; }

.uix-auth .btn-primary {
    border-radius: 4px;
    padding: .75rem 1rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.uix-auth .btn-outline-secondary {
    border-radius: 4px;
    border-color: var(--uix-auth-border);
    color: var(--uix-auth-ink);
}

.uix-auth__panel-foot { border-top-color: var(--uix-auth-line); }

/* Menos aire entre campos: con la línea inferior en vez de la caja, el espacio
   de Tabler entre grupos sobra y estiraba la cartilla. */
.uix-auth__panel .mb-3 { margin-bottom: 1.125rem !important; }
.uix-auth__panel .form-hint { margin-top: .25rem; font-size: .75rem; }

/* ---------- Móvil ----------
   La cubierta pasa a ser una banda superior: el sello y el troquelado sobran
   cuando no hay dos páginas que separar. */
@media (max-width: 991.98px) {
    .uix-auth__card { max-width: 460px; }

    .uix-auth__brand {
        border-radius: var(--uix-auth-radius) var(--uix-auth-radius) 0 0;
        padding: 2rem 1.5rem 1.75rem;
    }

    .uix-auth__brand-title { font-size: 1.5rem; }

    .uix-auth__panel {
        border-radius: 0 0 var(--uix-auth-radius) var(--uix-auth-radius);
        padding: 2rem 1.5rem;
    }

    /* El troquelado separa dos páginas: apiladas, no hay nada que separar. */
    .uix-auth__brand::after { display: none; }
    .uix-auth__trust { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .uix-auth * { transition: none !important; }
}

/* Botón grande de disparo en el móvil: se usa con una mano y la cartilla en la otra. */
.intake-shoot {
    display: grid;
    place-items: center;
    gap: .25rem;
    padding: 2rem 1rem;
    border: 2px dashed #ddd9d4;
    border-radius: 14px;
    cursor: pointer;
    text-align: center;
    transition: border-color .2s ease, background-color .2s ease;
}

.intake-shoot:active { border-color: #0f766e; background: rgba(15, 118, 110, .04); }
.intake-shoot__icon .icon { width: 34px; height: 34px; color: #0f766e; }
.intake-shoot__text { font-weight: 600; font-size: 1rem; }
.intake-shoot__hint { font-size: .8125rem; color: #78716c; }

.intake-sent {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    font-size: .875rem;
    color: #78716c;
}

.intake-sent li { padding: .375rem 0; border-bottom: 1px solid #f1f3f5; }
.intake-sent li:last-child { border-bottom: 0; }