/* ===========================================================================
   Consultorio ITM — identidad visual
   ---------------------------------------------------------------------------
   Se carga DESPUES de Bootstrap. Dos capas:

     1. Componentes propios (barra, encabezado, tarjetas de conteo, pestañas,
        tabla de consultas). Son los que definen el aspecto.
     2. Revestimiento de Bootstrap, porque las pantallas de captura y de
        consulta siguen armadas con sus componentes.

   Ojo: en Bootstrap 5.3 cambiar `--bs-primary` NO recolorea los botones. Cada
   componente resuelve su color al compilarse (`.btn-primary` trae fijo su
   propio `--bs-btn-bg` con el #0d6efd de fabrica), asi que hay que sobrescribir
   componente por componente. De ahi la extension de la segunda capa.

   Tipografia del sistema, sin fuentes de internet: la CSP prohibe cargar de
   otros dominios, y la aplicacion tiene que verse bien sin conexion.
   =========================================================================== */

:root {
    /* Azul noche. Casi negro: es el color de las acciones y de la barra, y a
       esa saturacion lee como tinta impresa, no como un enlace. */
    --noche:        #101c33;
    --noche-suave:  #1c2c4a;
    --noche-claro:  #24365a;

    --tinta:        #16233f;
    --tinta-media:  #5b6678;
    --tinta-tenue:  #8a94a6;

    --fondo:        #f4f5f7;
    --superficie:   #ffffff;
    --borde:        #e6e9ee;
    --linea:        #f0f2f5;
    --relleno:      #eef0f4;

    /* Acentos. Solo cuatro, y cada uno significa una cosa. */
    --azul:         #2563eb;
    --azul-tenue:   #e8f0fe;
    --ambar:        #b45309;
    --ambar-tenue:  #fdf3e3;
    --verde:        #15803d;
    --verde-tenue:  #e9f5ee;
    --rojo:         #b42318;
    --rojo-tenue:   #fdedeb;

    --tipografia: "Segoe UI Variable Text", "Segoe UI", system-ui,
                  -apple-system, "Helvetica Neue", Arial, sans-serif;
    --tipografia-mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

    --radio:     10px;
    --radio-sm:  8px;
    --radio-xs:  6px;
    --sombra:    0 1px 2px rgba(16, 28, 51, .04);
    --sombra-alta: 0 6px 20px rgba(16, 28, 51, .09);

    /* Bootstrap usa estas para enlaces, foco y utilidades de texto. */
    --bs-primary: var(--noche);
    --bs-primary-rgb: 16, 28, 51;
    --bs-link-color: var(--azul);
    --bs-link-color-rgb: 37, 99, 235;
    --bs-link-hover-color: var(--noche);
    --bs-border-color: var(--borde);
    --bs-body-color: var(--tinta);
    --bs-body-bg: var(--fondo);
    --bs-secondary-color: var(--tinta-media);
    --bs-focus-ring-color: rgba(37, 99, 235, .2);
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */

body {
    font-family: var(--tipografia);
    background-color: var(--fondo);
    color: var(--tinta);
    font-size: .9375rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.bg-body-tertiary {
    background-color: var(--fondo) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--tinta);
}

.text-body-secondary {
    color: var(--tinta-media) !important;
}

code, pre {
    font-family: var(--tipografia-mono);
    font-size: .875em;
}

code {
    color: var(--noche);
    background-color: var(--relleno);
    padding: .12em .4em;
    border-radius: var(--radio-xs);
}

main.container {
    max-width: 1200px;
}

/* ---------------------------------------------------------------------------
   Barra superior
   --------------------------------------------------------------------------- */

.barra {
    background-color: var(--noche);
    padding: .95rem 0;
}

.barra-interior {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 1200px;
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    white-space: nowrap;
}

.marca-nombre {
    color: #fff;
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: -.01em;
}

/* La institucion va detras de un filo vertical: es contexto, no marca. */
.marca-institucion {
    display: none;
    padding-left: 1rem;
    border-left: 1px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .55);
    font-size: .875rem;
    white-space: nowrap;
}

.barra-enlaces {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-left: auto;
}

.barra-enlaces a {
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    font-size: .9375rem;
}

.barra-enlaces a:hover,
.barra-enlaces a:focus-visible {
    color: #fff;
}

.barra-filo {
    width: 1px;
    height: 1.25rem;
    background-color: rgba(255, 255, 255, .16);
}

.barra-usuario {
    color: #fff;
    font-weight: 600;
    font-size: .9375rem;
    white-space: nowrap;
}

@media (min-width: 992px) {
    .marca-institucion {
        display: inline;
    }
}

/* ---------------------------------------------------------------------------
   Encabezado de pantalla
   --------------------------------------------------------------------------- */

.encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.encabezado-titulo {
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -.025em;
    color: var(--tinta);
    margin: 0;
}

.encabezado-fecha {
    color: var(--tinta-tenue);
    font-size: .9375rem;
    margin: .15rem 0 0;
}


/* ---------------------------------------------------------------------------
   Tarjetas de conteo
   --------------------------------------------------------------------------- */

.tarjetas-conteo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.tarjeta-conteo {
    display: block;
    background-color: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.4rem 1.5rem;
    text-decoration: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.tarjeta-conteo:hover {
    border-color: #cfd6e0;
    box-shadow: var(--sombra-alta);
}

.tarjeta-conteo.activa {
    border-color: var(--noche);
    box-shadow: inset 0 0 0 1px var(--noche);
}

.conteo {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--tinta);
}

/* El color del numero dice de que estado se habla sin leer la etiqueta. */
.conteo--azul  { color: var(--azul); }
.conteo--ambar { color: var(--ambar); }

.conteo-etiqueta {
    color: var(--tinta-media);
    font-size: .9375rem;
    margin-top: .35rem;
}

/* ---------------------------------------------------------------------------
   Tarjeta blanca genérica
   --------------------------------------------------------------------------- */

.tarjeta {
    background-color: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

/* ---------------------------------------------------------------------------
   Pestañas y buscador del panel
   --------------------------------------------------------------------------- */

.panel-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .35rem 1.5rem 0;
    border-bottom: 1px solid var(--linea);
}

.pestanas {
    display: flex;
    gap: 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pestanas a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: 1rem 0;
    color: var(--tinta-tenue);
    text-decoration: none;
    font-size: .9375rem;
    font-weight: 500;
    /* El filo se reserva desde el inicio para que la pestaña no salte al
       activarse. */
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.pestanas a:hover {
    color: var(--tinta);
}

.pestanas a.activa {
    color: var(--tinta);
    font-weight: 600;
    border-bottom-color: var(--noche);
}

.pestana-cuenta {
    display: inline-block;
    min-width: 1.5rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    background-color: var(--relleno);
    color: var(--tinta-media);
    font-size: .75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
    line-height: 1.35;
}

.pestanas a.activa .pestana-cuenta {
    background-color: var(--noche);
    color: #fff;
}

/* Buscador con la lupa dentro del campo. */
.buscador {
    position: relative;
    margin: .5rem 0 .85rem;
    min-width: 240px;
}

.buscador svg {
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: var(--tinta-tenue);
    pointer-events: none;
}

.buscador input {
    width: 100%;
    padding: .55rem .8rem .55rem 2.35rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    background-color: var(--superficie);
    color: var(--tinta);
    font-size: .9375rem;
    font-family: inherit;
}

.buscador input::placeholder {
    color: var(--tinta-tenue);
}

.buscador input:focus {
    outline: none;
    border-color: var(--noche-claro);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

/* ---------------------------------------------------------------------------
   Tabla de consultas
   --------------------------------------------------------------------------- */

.tabla-envoltura {
    overflow-x: auto;
}

.tabla-consultas {
    width: 100%;
    border-collapse: collapse;
}

.tabla-consultas th {
    padding: .9rem 1rem;
    text-align: left;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
    border-bottom: 1px solid var(--linea);
    white-space: nowrap;
}

.tabla-consultas th:first-child,
.tabla-consultas td:first-child {
    padding-left: 1.5rem;
}

.tabla-consultas th:last-child,
.tabla-consultas td:last-child {
    padding-right: 1.5rem;
    text-align: right;
}

.tabla-consultas td {
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--linea);
    vertical-align: middle;
    color: var(--tinta-media);
}

.tabla-consultas tbody tr:last-child td {
    border-bottom: 0;
}

.tabla-consultas tbody tr:hover {
    background-color: #fafbfc;
}

/* Paciente: iniciales, nombre y edad en un solo bloque. */
.celda-paciente {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.iniciales {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radio-sm);
    background-color: var(--relleno);
    color: var(--tinta-media);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
}

.nombre-paciente {
    color: var(--tinta);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    display: block;
    line-height: 1.35;
}

.nombre-paciente:hover {
    color: var(--azul);
}

.dato-menor {
    color: var(--tinta-tenue);
    font-size: .8125rem;
}

.no-control {
    font-family: var(--tipografia-mono);
    font-size: .875rem;
    color: var(--tinta-media);
}

.tabla-vacia {
    padding: 3.5rem 1.5rem !important;
    text-align: center;
    color: var(--tinta-tenue);
}

/* ---------------------------------------------------------------------------
   Etiquetas de estado
   --------------------------------------------------------------------------- */

.etiqueta {
    display: inline-block;
    padding: .3rem .6rem;
    border-radius: var(--radio-xs);
    font-size: .8125rem;
    font-weight: 500;
    white-space: nowrap;
    background-color: var(--relleno);
    color: var(--tinta-media);
}

.etiqueta--azul  { background-color: var(--azul-tenue);  color: var(--azul); }
.etiqueta--ambar { background-color: var(--ambar-tenue); color: var(--ambar); }
.etiqueta--verde { background-color: var(--verde-tenue); color: var(--verde); }

/* ---------------------------------------------------------------------------
   Botones propios
   --------------------------------------------------------------------------- */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .6rem 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--radio-sm);
    background-color: var(--noche);
    color: #fff;
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .12s ease;
}

.boton:hover {
    background-color: var(--noche-suave);
    color: #fff;
}

.boton:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .3);
}

.boton--chico {
    padding: .45rem .95rem;
    font-size: .875rem;
}

/* ---------------------------------------------------------------------------
   Pie
   --------------------------------------------------------------------------- */

.pie {
    background-color: var(--superficie);
    border-top: 1px solid var(--borde);
    padding: 1.5rem 0;
    margin-top: 3rem;
    text-align: center;
    color: var(--tinta-tenue);
    font-size: .875rem;
}

/* ===========================================================================
   Revestimiento de Bootstrap
   =========================================================================== */


.card {
    --bs-card-bg: var(--superficie);
    --bs-card-border-color: var(--borde);
    --bs-card-border-radius: var(--radio);
    --bs-card-inner-border-radius: var(--radio);
    --bs-card-cap-bg: var(--superficie);
    box-shadow: var(--sombra);
}

.card.shadow-sm {
    box-shadow: var(--sombra) !important;
}

.card-header {
    font-weight: 600;
    font-size: .75rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
    border-bottom: 1px solid var(--linea);
    padding: .95rem 1.25rem;
}

.card-body {
    padding: 1.25rem;
}

.btn {
    --bs-btn-border-radius: var(--radio-sm);
    --bs-btn-font-weight: 500;
    --bs-btn-font-size: .9375rem;
    --bs-btn-padding-y: .55rem;
    --bs-btn-padding-x: 1.05rem;
}

.btn-primary,
.btn-success {
    --bs-btn-bg: var(--noche);
    --bs-btn-border-color: var(--noche);
    --bs-btn-hover-bg: var(--noche-suave);
    --bs-btn-hover-border-color: var(--noche-suave);
    --bs-btn-active-bg: var(--noche-suave);
    --bs-btn-active-border-color: var(--noche-suave);
    --bs-btn-disabled-bg: var(--noche);
    --bs-btn-disabled-border-color: var(--noche);
}

.btn-outline-primary,
.btn-outline-secondary {
    --bs-btn-color: var(--tinta);
    --bs-btn-border-color: var(--borde);
    --bs-btn-bg: var(--superficie);
    --bs-btn-hover-bg: var(--fondo);
    --bs-btn-hover-border-color: #cfd6e0;
    --bs-btn-hover-color: var(--tinta);
    --bs-btn-active-bg: var(--fondo);
    --bs-btn-active-border-color: var(--noche);
    --bs-btn-active-color: var(--tinta);
}

.btn-danger {
    --bs-btn-bg: var(--rojo);
    --bs-btn-border-color: var(--rojo);
    --bs-btn-hover-bg: #9a1e14;
    --bs-btn-hover-border-color: #9a1e14;
}

.btn-link {
    --bs-btn-color: var(--tinta-media);
    --bs-btn-hover-color: var(--tinta);
    text-decoration: none;
}

.btn-link:hover {
    text-decoration: underline;
}

.btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .28);
}

.form-label {
    font-weight: 500;
    font-size: .875rem;
    color: var(--tinta);
    margin-bottom: .35rem;
}

.form-control,
.form-select {
    border-color: var(--borde);
    border-radius: var(--radio-sm);
    font-size: .9375rem;
    padding: .55rem .8rem;
    color: var(--tinta);
}

.form-control::placeholder {
    color: var(--tinta-tenue);
}

/* Con 119 campos, saber donde esta el cursor no es un lujo. */
.form-control:focus,
.form-select:focus {
    border-color: var(--noche-claro);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.form-text {
    color: var(--tinta-tenue);
    font-size: .8125rem;
}

.invalid-feedback {
    font-size: .8125rem;
    color: var(--rojo);
}

.table {
    --bs-table-border-color: var(--linea);
    --bs-table-hover-bg: #fafbfc;
    margin-bottom: 0;
    font-size: .9375rem;
}

.table > thead,
.table > thead.table-light {
    --bs-table-bg: var(--superficie);
}

.table > thead th {
    font-weight: 600;
    font-size: .6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
    border-bottom: 1px solid var(--linea);
    padding: .9rem 1rem;
    white-space: nowrap;
}

.table > tbody td {
    padding: .9rem 1rem;
    vertical-align: middle;
    border-color: var(--linea);
}

.table > tbody tr:last-child td {
    border-bottom: 0;
}

/* Las insignias de Bootstrap se igualan a `.etiqueta`. */
.badge {
    font-weight: 500;
    font-size: .8125rem;
    padding: .3rem .6rem;
    border-radius: var(--radio-xs);
}

.badge.bg-secondary {
    background-color: var(--relleno) !important;
    color: var(--tinta-media) !important;
}

.badge.bg-warning {
    background-color: var(--ambar-tenue) !important;
    color: var(--ambar) !important;
}

.badge.bg-success {
    background-color: var(--verde-tenue) !important;
    color: var(--verde) !important;
}

.badge.bg-danger {
    background-color: var(--rojo-tenue) !important;
    color: var(--rojo) !important;
}

.badge.bg-info,
.badge.bg-primary {
    background-color: var(--azul-tenue) !important;
    color: var(--azul) !important;
}

/* Avisos.
   ---------------------------------------------------------------------------
   El color vive en el fondo y en un filo de un pixel, no en una franja gruesa
   ni en el texto completo. Antes cada aviso llevaba una banda de color a la
   izquierda y todo el mensaje pintado del color del estado: se leía como un
   letrero pegado encima de la pantalla. Así se lee como una nota del propio
   documento, que es lo que es.

   El color se reserva para el titular en negrita y para los enlaces, que es
   donde de verdad dice de qué se trata. */

.alert {
    --bs-alert-border-radius: var(--radio);
    --bs-alert-color: var(--tinta);
    border-width: 1px;
    font-size: .9375rem;
    line-height: 1.55;
    padding: .85rem 1.05rem;
}

.alert strong {
    font-weight: 600;
}

.alert hr {
    border-top-color: currentColor;
    opacity: .15;
    margin: .7rem 0;
}

.alert-warning {
    --bs-alert-bg: var(--ambar-tenue);
    --bs-alert-border-color: #f2e0c2;
}

.alert-warning strong,
.alert-warning a {
    color: var(--ambar);
}

.alert-danger {
    --bs-alert-bg: var(--rojo-tenue);
    --bs-alert-border-color: #f4d3cf;
}

.alert-danger strong,
.alert-danger a {
    color: var(--rojo);
}

.alert-success {
    --bs-alert-bg: var(--verde-tenue);
    --bs-alert-border-color: #cfe7d8;
}

.alert-success strong,
.alert-success a {
    color: var(--verde);
}

.alert-info {
    --bs-alert-bg: var(--azul-tenue);
    --bs-alert-border-color: #d3e2fb;
}

.alert-info strong,
.alert-info a {
    color: var(--azul);
}

/* El neutro: se usa donde el aviso solo da contexto y no anuncia un estado. */
.alert-secondary {
    --bs-alert-bg: var(--relleno);
    --bs-alert-border-color: var(--borde);
}

.alert-secondary strong,
.alert-secondary a {
    color: var(--noche);
}

/* La equis de cerrar es una salida, no una acción: se nota al buscarla y no
   antes. Sin esto compite con el propio mensaje. */
.alert-dismissible .btn-close {
    padding: 1.1rem;
    opacity: .3;
}

.alert-dismissible .btn-close:hover,
.alert-dismissible .btn-close:focus-visible {
    opacity: .65;
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--linea);
    --bs-nav-tabs-link-active-color: var(--tinta);
    --bs-nav-tabs-link-active-border-color: transparent;
}

.nav-tabs .nav-link {
    color: var(--tinta-tenue);
    font-weight: 500;
    font-size: .9375rem;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: .75rem 0;
    margin-right: 1.75rem;
}

.nav-tabs .nav-link:hover {
    color: var(--tinta);
    border-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--tinta);
    font-weight: 600;
    background-color: transparent;
    border-bottom-color: var(--noche);
}

.pagination {
    --bs-pagination-color: var(--tinta-media);
    --bs-pagination-bg: var(--superficie);
    --bs-pagination-active-bg: var(--noche);
    --bs-pagination-active-border-color: var(--noche);
    --bs-pagination-hover-color: var(--tinta);
    --bs-pagination-hover-bg: var(--fondo);
    --bs-pagination-focus-color: var(--tinta);
    --bs-pagination-focus-bg: var(--fondo);
    --bs-pagination-border-color: var(--borde);
    --bs-pagination-border-radius: var(--radio-sm);
    --bs-pagination-font-size: .875rem;
}

/* ---------------------------------------------------------------------------
   Piezas propias de la aplicación
   --------------------------------------------------------------------------- */

/* El QR se dibuja como SVG sin dimensiones fijas; se acota aqui para que no
   ocupe toda la pantalla en el monitor de la ventanilla. */
.qr-contenedor {
    padding: .85rem;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    width: fit-content;
}

.qr-contenedor svg {
    width: 100%;
    max-width: 280px;
    height: auto;
    display: block;
    margin: 0 auto;
}


/* Las filas de Sí/No son la mayor parte del formulario del paciente. Una línea
   tenue entre ellas evita que se pierda la vista al contestar en el celular. */
.fila-sino + .fila-sino {
    border-top: 1px solid var(--linea);
}

.fila-sino .btn-group .btn {
    --bs-btn-padding-y: .4rem;
}

/* La respuesta marcada se pinta oscura: es el dato, tiene que verse. */
.fila-sino .btn-check:checked + .btn {
    background-color: var(--noche);
    border-color: var(--noche);
    color: #fff;
}


/* En el celular los grupos quedan más separados para poder tocar sin error. */
@media (max-width: 767.98px) {
    .fila-sino {
        padding-bottom: .75rem !important;
    }

    .fila-sino .btn-group .btn {
        --bs-btn-padding-y: .55rem;
    }

    .panel-cabecera {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .tabla-consultas th:first-child,
    .tabla-consultas td:first-child {
        padding-left: 1rem;
    }

    .tabla-consultas th:last-child,
    .tabla-consultas td:last-child {
        padding-right: 1rem;
    }
}

/* ---------------------------------------------------------------------------
   Impresión
   --------------------------------------------------------------------------- */

@media print {
    .barra,
    .pie,
    .boton,
    .btn,
    .buscador,
    .alert-dismissible .btn-close {
        display: none !important;
    }

    body {
        background: #fff;
    }

    .tarjeta,
    .card {
        border-color: #ccc;
        box-shadow: none;
    }
}


/* ---------------------------------------------------------------------------
   Pantalla de acceso
   --------------------------------------------------------------------------- */

.acceso {
    max-width: 400px;
    margin: 3rem auto;
}

.acceso-marca {
    text-align: center;
    margin-bottom: 1.75rem;
}

.acceso-titulo {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0;
}

.acceso-institucion {
    color: var(--tinta-tenue);
    font-size: .875rem;
    margin: .25rem 0 0;
}

.acceso-tarjeta {
    padding: 1.75rem;
}

.acceso-boton {
    width: 100%;
}

.acceso-nota {
    text-align: center;
    color: var(--tinta-tenue);
    font-size: .875rem;
    margin-top: 1.25rem;
}

/* ---------------------------------------------------------------------------
   Eliminar una consulta
   --------------------------------------------------------------------------- */

/* Rojo, y solo aquí: es la única acción del sistema que destruye algo. */
.boton--peligro {
    background-color: var(--rojo);
}

.boton--peligro:hover {
    background-color: #92180f;
}

.resumen-borrado {
    display: grid;
    grid-template-columns: minmax(7rem, auto) 1fr;
    gap: .5rem 1.5rem;
    margin: 0 0 1rem;
}

.resumen-borrado dt {
    color: var(--tinta-tenue);
    font-size: .8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding-top: .15rem;
}

.resumen-borrado dd {
    margin: 0;
    color: var(--tinta);
}

/* El enlace para borrar vive apartado del resto de acciones, para que no se
   toque por inercia al terminar una consulta. */
.zona-peligro {
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--borde);
}

.zona-peligro a {
    color: var(--rojo);
    font-size: .875rem;
    text-decoration: none;
}

.zona-peligro a:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   El ojo para ver la contraseña
   ---------------------------------------------------------------------------
   La envoltura y el botón los crea `ver_clave.js`; aquí solo viven los
   estilos, porque la CSP prohíbe `style=` embebido igual que los scripts. */

.campo-clave {
    position: relative;
}

/* Hueco para el ojo, para que el texto no le pase por debajo. */
.campo-clave .form-control {
    padding-right: 2.75rem;
}

.ver-clave {
    position: absolute;
    top: 50%;
    right: .5rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 0;
    border-radius: var(--radio-xs);
    background: transparent;
    color: var(--tinta-tenue);
    cursor: pointer;
}

.ver-clave svg {
    width: 1.15rem;
    height: 1.15rem;
}

.ver-clave:hover {
    color: var(--tinta);
    background: var(--relleno);
}

/* Con la contraseña a la vista el ojo se pinta oscuro: es un aviso de que hay
   algo legible en pantalla, no un botón más. */
.ver-clave[aria-pressed="true"] {
    color: var(--noche);
}

/* La firma escaneada, en la pantalla de edicion de la cuenta.
   Vive aqui y no en un `style=` de la plantilla porque la CSP dice
   `style-src 'self'` SIN 'unsafe-inline': un atributo `style` cae bajo
   `style-src-attr`, que hereda de ahi, asi que el navegador lo descarta sin
   avisar. Estaba puesto en la plantilla y por eso la firma salia del alto que
   le tocaba -- una regla de seguridad rompiendo la pantalla en silencio, que
   es la clase de fallo mas dificil de rastrear. */
.firma-guardada {
    max-height: 70px;
    max-width: 100%;
}