/* ============================================
   CONTROL DE HERRAMIENTAS — TEMA CLARO NAVY
   Paleta: #04376B (azul marino)
   Fuentes: Syne (títulos) + Plus Jakarta Sans (texto)
   Botones: azul marino PLANOS (sin efectos)
   ============================================ */

:root {
    --fondo: #f2f6fb;
    --tarjeta: rgba(255, 255, 255, .85);
    --tarjeta-solida: #ffffff;
    --borde: rgba(4, 55, 107, .22);
    --borde-fuerte: rgba(4, 55, 107, .45);
    --texto: #0b1b2e;
    --texto-suave: #4a5d73;
    --navy: #04376B;
    --navy-claro: #0e5aa7;
    --ok: #059669;
    --aviso: #d97706;
    --peligro: #dc2626;
    --radio: 16px;
    --sombra: 0 8px 30px rgba(4, 55, 107, .12);
    --brillo: 0 0 18px rgba(4, 55, 107, .22);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background:
        radial-gradient(520px 300px at 15% -10%, rgba(14, 90, 167, .10), transparent 60%),
        radial-gradient(520px 300px at 110% 120%, rgba(4, 55, 107, .10), transparent 55%),
        var(--fondo);
    background-attachment: fixed;
    color: var(--texto);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Sin subrayados en ningún enlace */
a { text-decoration: none; color: inherit; }

.contenedor {
    max-width: 1100px;
    margin: 0 auto;
    padding: .75rem;
    width: 100%;
    flex: 1 1 auto;
}

/* ============================================
   TÍTULOS — MISMO ESTILO EN LAS 3 PÁGINAS
   ============================================ */
h1, h2, h3, .logo-texto, .pie-titulo {
    font-family: 'Syne', 'Plus Jakarta Sans', sans-serif;
}
.logo-texto,
.cabecera-acceso h1 {
    background: linear-gradient(90deg, #0b1b2e, var(--navy));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}
.subtitulo-seccion {
    font-size: 1.05rem;
    margin: 1.1rem 0 .6rem;
    color: var(--navy);
}

/* ============================================
   BARRA SUPERIOR
   ============================================ */
.barra-superior {
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--borde);
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 4px 24px rgba(4, 55, 107, .08);
}
.barra-contenido {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding-top: .7rem;
    padding-bottom: .7rem;
}
.logo {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: none;
    -webkit-text-fill-color: initial;
}
.logo-icono {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--navy);
    box-shadow: 0 0 14px rgba(4, 55, 107, .25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--navy);
    overflow: hidden;
    padding: 0;
}
.logo-icono svg { width: 62%; height: 62%; }
.logo-icono img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    background: #ffffff;
}
.logo-texto { font-size: 1rem; white-space: nowrap; }
.navegacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem 1rem;
}
.navegacion a:not(.boton):not(.icono-enlace) {
    color: var(--texto-suave);
    font-size: .92rem;
    padding: .25rem .1rem;
    transition: color .15s;
}
.navegacion a:not(.boton):not(.icono-enlace):hover { color: var(--navy); }

/* Engranaje de configuración */
.icono-enlace {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--borde-fuerte);
    color: var(--navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.icono-enlace:hover { background: rgba(4, 55, 107, .08); }
.icono-enlace svg { width: 18px; height: 18px; }

/* ============================================
   ACCESO (LOGIN)
   ============================================ */
.pagina-acceso {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: 1rem;
    background:
        radial-gradient(600px 400px at 50% -10%, rgba(14, 90, 167, .14), transparent 60%),
        radial-gradient(600px 400px at 90% 110%, rgba(4, 55, 107, .12), transparent 55%),
        var(--fondo);
}
.pagina-acceso .tarjeta-acceso { margin: auto; }
.tarjeta-acceso {
    background: var(--tarjeta);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra), var(--brillo);
    padding: 1.75rem;
    width: 100%;
    max-width: 380px;
}
.cabecera-acceso { text-align: center; margin-bottom: 1.25rem; }
.cabecera-acceso h1 { margin: .25rem 0; font-size: 1.45rem; letter-spacing: .01em; }
.cabecera-acceso p { margin: 0; color: var(--texto-suave); font-size: .92rem; }

/* Círculo del logo (con efecto flotante) */
.logo-circulo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #ffffff;
    border: 5px solid var(--navy);
    box-shadow: 0 0 40px rgba(4, 55, 107, .45);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: var(--navy);
    transition: transform .4s ease, box-shadow .4s ease;
    animation: flotar 3s ease-in-out infinite;
}
.logo-circulo:hover {
    transform: scale(1.05) rotate(3deg);
    box-shadow: 0 0 60px rgba(4, 55, 107, .65), inset 0 0 25px rgba(4, 55, 107, .2);
}
.logo-circulo svg { width: 58%; height: 58%; }
.logo-circulo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    background: #ffffff;
    padding: 10px;
}

@keyframes flotar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* ============================================
   FORMULARIOS
   ============================================ */
.formulario { display: flex; flex-direction: column; gap: .55rem; }
.formulario label { font-weight: 600; font-size: .88rem; color: var(--texto-suave); }
.formulario input,
.formulario select,
.buscador input {
    padding: .6rem .8rem;
    border: 1px solid var(--borde);
    border-radius: 10px;
    font-size: 1rem;
    background: rgba(255, 255, 255, .9);
    color: var(--texto);
    width: 100%;
    transition: border-color .15s;
}
.formulario input:focus-visible,
.formulario select:focus-visible,
.buscador input:focus-visible {
    outline: none;
    border-color: var(--navy);
}
.formulario input[type="file"] { padding: .45rem; }
.obligatorio { color: var(--peligro); }
.opcional { color: var(--texto-suave); font-weight: 400; font-size: .8rem; }
.enlace-registro { text-align: center; margin-top: 1rem; font-size: .88rem; color: var(--texto-suave); }

/* ============================================
   BOTONES — AZUL MARINO PLANO (sin efectos)
   Solo Eliminar (rojo) y Cerrar sesión (rojo contorno) se distinguen.
   ============================================ */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--navy);
    border-radius: 10px;
    padding: .55rem 1rem;
    font-size: .92rem;
    font-weight: 700;
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
    text-decoration: none;
    background: var(--navy);
    color: #ffffff;
    transition: background .15s;
}
.boton:hover { background: var(--navy-claro); }
.boton:active { background: #032a4d; }
.boton:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.boton-primario { background: var(--navy); color: #ffffff; }
.boton-primario:hover { background: var(--navy-claro); }

.boton-plano {
    background: transparent;
    color: var(--navy);
}
.boton-plano:hover { background: rgba(4, 55, 107, .07); }

.boton-peligro {
    background: var(--peligro);
    border-color: var(--peligro);
    color: #ffffff;
}
.boton-peligro:hover { background: #b91c1c; }

.boton-cerrar {
    background: transparent;
    border-color: var(--peligro);
    color: var(--peligro);
    padding: .35rem .8rem;
    font-size: .85rem;
}
.boton-cerrar:hover { background: rgba(220, 38, 38, .07); }

.fila-botones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .3rem; }

/* ============================================
   AVISOS
   ============================================ */
.aviso {
    padding: .65rem .9rem;
    border-radius: 10px;
    font-size: .9rem;
    margin: .5rem 0;
    border: 1px solid transparent;
}
.aviso-error { background: rgba(220, 38, 38, .07); border-color: rgba(220, 38, 38, .35); color: var(--peligro); }
.aviso-exito { background: rgba(5, 150, 105, .07); border-color: rgba(5, 150, 105, .35); color: var(--ok); }

/* ============================================
   RESUMEN
   ============================================ */
.tarjetas-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .7rem;
    margin-bottom: 1rem;
}
.tarjeta-resumen {
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: .9rem;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(10px);
}
.numero {
    font-size: 1.7rem;
    font-weight: 800;
    background: linear-gradient(90deg, #0b1b2e, var(--navy));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.numero-ok { -webkit-text-fill-color: var(--ok); }
.numero-aviso { -webkit-text-fill-color: var(--aviso); }
.numero-peligro { -webkit-text-fill-color: var(--peligro); }
.etiqueta { color: var(--texto-suave); font-size: .82rem; }

/* ============================================
   BÚSQUEDA Y FILTROS
   ============================================ */
.fila-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    margin-bottom: .7rem;
}
.buscador { margin-bottom: .7rem; }
.form-buscador { display: flex; gap: .5rem; flex: 1 1 260px; }
.form-buscador input { flex: 1; }
.filtros-estado { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
.chip {
    border: 1px solid var(--borde);
    border-radius: 999px;
    padding: .3rem .85rem;
    font-size: .84rem;
    text-decoration: none;
    color: var(--texto-suave);
    background: var(--tarjeta);
    transition: background .15s, color .15s;
}
.chip:hover { color: var(--navy); border-color: var(--navy); }
.chip.activo {
    background: var(--navy);
    border-color: var(--navy);
    color: #ffffff;
    font-weight: 700;
}

/* ============================================
   TABLAS
   ============================================ */
.tabla-contenedor {
    overflow-x: auto;
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    backdrop-filter: blur(10px);
}
.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th, .tabla td {
    text-align: left;
    padding: .65rem .8rem;
    border-bottom: 1px solid var(--borde);
}
.tabla th {
    background: rgba(4, 55, 107, .06);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--texto-suave);
}
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr { transition: background .15s; }
.tabla tbody tr:hover { background: rgba(4, 55, 107, .04); }
.sin-datos { text-align: center; color: var(--texto-suave); padding: 1.5rem !important; }
.celda-acciones { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.formulario-inline { display: inline-flex; gap: .3rem; align-items: center; margin: 0; }
.formulario-inline select {
    padding: .3rem .45rem;
    border: 1px solid var(--borde);
    border-radius: 8px;
    font-size: .85rem;
    background: var(--tarjeta-solida);
    color: var(--texto);
}

/* ============================================
   ESTADOS
   ============================================ */
.estado {
    display: inline-block;
    border-radius: 999px;
    padding: .2rem .65rem;
    font-size: .78rem;
    font-weight: 700;
    border: 1px solid transparent;
}
.estado-disponible { background: rgba(5, 150, 105, .1); border-color: rgba(5, 150, 105, .4); color: var(--ok); }
.estado-prestada { background: rgba(217, 119, 6, .1); border-color: rgba(217, 119, 6, .4); color: var(--aviso); }
.estado-en_reparacion { background: rgba(220, 38, 38, .1); border-color: rgba(220, 38, 38, .4); color: var(--peligro); }
.estado-eliminada { background: rgba(74, 93, 115, .1); border-color: rgba(74, 93, 115, .35); color: var(--texto-suave); }

/* ============================================
   FOTOS
   ============================================ */
.foto-mini {
    width: 46px;
    height: 46px;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid var(--borde);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(4, 55, 107, .05);
}
.foto-vacia {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1.5px solid rgba(4, 55, 107, .35);
}
.foto-previa {
    max-width: 180px;
    max-height: 180px;
    border-radius: 12px;
    border: 1px solid var(--borde);
    margin-top: .4rem;
    object-fit: contain;
}

/* ============================================
   GRILLA DE HERRAMIENTAS (USUARIO COMÚN)
   ============================================ */
.grilla-herramientas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .8rem;
}
.tarjeta-herramienta {
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
    backdrop-filter: blur(12px);
    transition: border-color .2s;
}
.tarjeta-herramienta:hover { border-color: var(--borde-fuerte); }
.foto-herramienta {
    width: 100%;
    object-fit: contain;
    height: auto;
    min-height: 120px;
    max-height: 220px;
    display: block;
    background: #ffffff;
}
.foto-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}
.tarjeta-cuerpo { padding: .75rem; }
.tarjeta-cuerpo h3 { margin: 0 0 .3rem; font-size: 1rem; }
.tarjeta-cuerpo p { margin: .1rem 0; color: var(--texto-suave); font-size: .85rem; }
.tarjeta-cuerpo .estado { margin-top: .4rem; }
.fecha-retiro { font-size: .78rem !important; }
.tarjeta-cuerpo .formulario-inline { margin-top: .5rem; }

/* ============================================
   TARJETA DE FORMULARIO INTERNO
   ============================================ */
.tarjeta {
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 1.25rem;
    max-width: 560px;
    backdrop-filter: blur(12px);
    box-shadow: var(--sombra);
}
.tarjeta h2 { margin: 0 0 .75rem; font-size: 1.1rem; }

/* ============================================
   CONFIGURACIÓN (lugares y categorías)
   ============================================ */
.configuracion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .9rem;
}
.config-seccion { max-width: none; }
.config-desc { color: var(--texto-suave); font-size: .88rem; margin: 0 0 .8rem; }
.config-form { width: 100%; }
.config-form input { flex: 1; min-width: 0; }
.lista-config {
    list-style: none;
    margin: .9rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.lista-config li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .5rem .7rem;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: rgba(255, 255, 255, .7);
    font-size: .92rem;
}
.lista-config li .boton { padding: .3rem .7rem; font-size: .82rem; }

/* Configuración: subtítulos y ítems eliminados */
.config-subtitulo {
    font-size: .95rem;
    color: var(--texto-suave);
    margin: 1rem 0 .4rem;
    font-family: 'Syne', sans-serif;
}
.lista-config li .eliminado {
    text-decoration: line-through;
    opacity: .7;
}

/* ============================================
   CARTEL MODAL (cambiar contraseña)
   ============================================ */
.modal-fondo {
    position: fixed;
    inset: 0;
    background: rgba(4, 55, 107, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 1rem;
}
.modal-caja {
    background: #ffffff;
    border: 1px solid var(--borde);
    border-radius: 16px;
    padding: 1.5rem;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 20px 50px rgba(4, 55, 107, .3);
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.modal-caja h3 { margin: 0; color: var(--navy); }
.modal-usuario { margin: 0; color: var(--texto-suave); font-size: .9rem; }
.modal-caja input {
    padding: .6rem .8rem;
    border: 1px solid var(--borde);
    border-radius: 10px;
    font-size: 1rem;
    background: #fff;
    color: var(--texto);
}
.modal-caja input:focus-visible { outline: none; border-color: var(--navy); }
.modal-caja label { font-weight: 600; font-size: .88rem; color: var(--texto-suave); }

/* ============================================
   PIE DE PÁGINA (angosto, centrado)
   ============================================ */
.pie-reproductor {
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(4, 55, 107, .3);
    padding: 12px 16px;
    display: flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    margin-top: auto;
}
.pie-interior {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 22px;
    max-width: 640px;
    width: 100%;
}
.pie-titulo {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: .04em;
}
.pie-icono {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ffffff;
    border: 1.5px solid rgba(4, 55, 107, .5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--navy);
    transition: background .15s;
}
.pie-icono:hover { background: rgba(4, 55, 107, .07); }
.pie-icono svg { width: 60%; height: 60%; }
.pie-derechos {
    font-size: .8rem;
    font-weight: 300;
    color: var(--texto-suave);
    margin: 0;
    letter-spacing: .3px;
    text-align: right;
}

/* ============================================
   LOGO DE LA PROMO — redondo con efecto
   ============================================ */
.promo-logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #04376B;
    box-shadow: 0 0 10px rgba(4, 55, 107, .35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    transition: transform .25s ease, box-shadow .25s ease;
}
.promo-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    background: #ffffff;
}
.promo-logo:hover {
    transform: scale(1.12) rotate(6deg);
    box-shadow: 0 0 18px rgba(4, 55, 107, .55);
}
.promo-logo-barra {
    width: 30px;
    height: 30px;
    border: 1.5px solid rgba(4, 55, 107, .55);
    box-shadow: 0 0 8px rgba(4, 55, 107, .25);
}
.promo-logo-barra:hover {
    transform: scale(1.15) rotate(6deg);
    box-shadow: 0 0 14px rgba(4, 55, 107, .5);
}

/* ============================================
   ACCESIBILIDAD
   ============================================ */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================================
   IMPRESIÓN
   ============================================ */
@media print {
    .barra-superior, .fila-acciones, .boton, .chip, .celda-acciones, .icono-enlace { display: none; }
    body { background: #fff; color: #000; }
}

/* ============================================
   REDISEÑO VISUAL CELULAR — SOLO CSS
   Buscador píldora con lupa (corregida) + chips deslizables + menú de app
   ============================================ */

/* ---------- 1) BUSCADOR MODERNO (píldora con lupa) ---------- */
.form-buscador {
    display: flex;
    align-items: stretch;
    background: #ffffff;
    border: 1.5px solid rgba(4, 55, 107, .22);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(4, 55, 107, .08);
    transition: border-color .2s, box-shadow .2s;
}
.form-buscador:focus-within {
    border-color: #04376B;
    box-shadow: 0 0 0 4px rgba(4, 55, 107, .10), 0 8px 24px rgba(4, 55, 107, .14);
}
.form-buscador input {
    flex: 1;
    min-width: 0;
    border: none !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304376B' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 1rem center;
    background-size: 1.15rem;
    padding: .85rem 1rem .85rem 2.9rem;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 1rem;
}
.form-buscador .boton {
    border-radius: 0;
    border: none;
    padding: .85rem 1.4rem;
    font-size: .95rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.form-buscador .boton-plano {
    background: rgba(4, 55, 107, .06);
    color: #04376B;
}

/* ---------- 2) CHIPS DE CATEGORÍAS (fila que desliza) ---------- */
.filtros-estado {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: .4rem;
}
.filtros-estado::-webkit-scrollbar { display: none; }
.chip {
    border-radius: 999px;
    padding: .45rem 1.1rem;
    font-size: .88rem;
    white-space: nowrap;
    background: #ffffff;
    border: 1.5px solid rgba(4, 55, 107, .18);
    box-shadow: 0 2px 10px rgba(4, 55, 107, .06);
    transition: transform .15s, background .15s, color .15s;
}
.chip:active { transform: scale(.96); }
.chip.activo {
    background: #04376B;
    border-color: #04376B;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(4, 55, 107, .30);
}

/* ---------- 3) TARJETAS DE CONFIGURACIÓN (lugares y categorías) ---------- */
.config-seccion {
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff, #f6f9fd);
    border: 1px solid rgba(4, 55, 107, .16);
    box-shadow: 0 10px 30px rgba(4, 55, 107, .08);
    padding: 1.3rem 1.2rem 1.2rem;
    position: relative;
    overflow: hidden;
}
.config-seccion::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #04376B, #0e5aa7);
}
.config-seccion h2 { font-size: 1.15rem; margin: 0 0 .3rem; }
.config-desc { font-size: .85rem; }
.config-form {
    display: flex;
    align-items: stretch;
    background: #ffffff;
    border: 1.5px solid rgba(4, 55, 107, .22);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(4, 55, 107, .07);
    transition: border-color .2s, box-shadow .2s;
}
.config-form:focus-within {
    border-color: #04376B;
    box-shadow: 0 0 0 4px rgba(4, 55, 107, .10);
}
.config-form input {
    flex: 1;
    min-width: 0;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: .8rem 1rem;
    font-size: .95rem;
    border-radius: 0 !important;
}
.config-form .boton {
    border-radius: 0;
    border: none;
    padding: .8rem 1.2rem;
    font-size: .9rem;
    flex-shrink: 0;
}
.lista-config { gap: .55rem; }
.lista-config li {
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(4, 55, 107, .14);
    padding: .55rem .9rem;
    box-shadow: 0 2px 8px rgba(4, 55, 107, .05);
    font-size: .92rem;
    transition: border-color .15s;
}
.lista-config li:hover { border-color: rgba(4, 55, 107, .35); }

/* ---------- 4) BARRA Y MENÚ EN CELULAR (estilo app) ---------- */
@media (max-width: 640px) {
    .barra-contenido { flex-direction: row; align-items: center; gap: .4rem; }
    .logo-texto { font-size: .9rem; }
    .logo-icono { width: 36px; height: 36px; }
    .navegacion {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: flex-start;
        gap: .9rem;
        padding-bottom: .2rem;
    }
    .navegacion::-webkit-scrollbar { display: none; }
    .navegacion a:not(.boton):not(.icono-enlace) { white-space: nowrap; font-size: .88rem; }
    .contenedor { padding: 1rem .9rem 1.2rem; }
    .tarjetas-resumen { gap: .55rem; }
    .tarjeta-resumen { padding: .75rem; border-radius: 14px; }
}

/* ---------- 5) PULIDO GENERAL MÓVIL ---------- */
@media (max-width: 480px) {
    .form-buscador { flex-direction: row; }
    .form-buscador .boton { width: auto; padding: .8rem 1.1rem; }
    .fila-acciones { flex-direction: row; align-items: center; }
    .fila-acciones .boton { width: auto; }
    .navegacion .boton { width: auto; }
    .grilla-herramientas { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
    .tarjeta-herramienta { border-radius: 18px; }
    .config-form { flex-direction: row; }
    .config-form .boton { width: auto; }
}

/* ============================================
   RESOLUCIÓN ADAPTABLE — todos los dispositivos
   ============================================ */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
.tabla-contenedor {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
.tabla {
    min-width: 100%;
    width: max-content;
    max-width: none;
}

@media (max-width: 600px) {
    .formulario input,
    .formulario select,
    .formulario textarea,
    .buscador input,
    .config-form input {
        font-size: 16px; /* evita el zoom automático en iOS */
        padding: .7rem .8rem;
    }
    .fila-botones { flex-direction: column; }
    .fila-botones .boton { width: 100%; }
    .tarjeta { max-width: 100%; padding: 1rem; }
    .foto-previa { max-width: 100%; height: auto; }
}

@media (max-width: 768px) {
    .tabla { font-size: .8rem; }
    .tabla th, .tabla td { padding: .45rem .5rem; }
    .celda-acciones { flex-direction: column; align-items: stretch; }
    .celda-acciones .formulario-inline { width: 100%; }
    .celda-acciones select { width: 100%; }
    .celda-acciones .boton { width: 100%; }
    .tarjetas-resumen { grid-template-columns: repeat(2, 1fr); }
    .grilla-herramientas { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .foto-herramienta { min-height: 110px; }
}

/* Imágenes siempre proporcionadas */
img { max-width: 100%; height: auto; }
.foto-mini { flex-shrink: 0; }

/* ============================================
   TARJETAS DESPLEGABLES DEL ADMINISTRADOR
   ============================================ */
.lista-herramientas-admin {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.tarjeta-admin {
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: 14px;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.tarjeta-admin-resumen {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem .9rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.tarjeta-admin-resumen::-webkit-details-marker { display: none; }

/* Foto del admin: cuadrada y proporcional, la foto COMPLETA sin cortar */
.admin-foto {
    width: 84px;
    height: 84px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid var(--borde);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.admin-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* la foto se ve completa, sin recortar */
    background: #ffffff;
    padding: 4px;
    border-radius: 12px;
}
.admin-foto-vacia {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1.5px solid rgba(4, 55, 107, .35);
}

.admin-nombre {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.admin-nombre strong { font-size: .98rem; }
.admin-nombre small { color: var(--texto-suave); font-size: .8rem; }

.admin-flecha {
    color: var(--texto-suave);
    font-size: 1.1rem;
    transition: transform .2s;
    flex-shrink: 0;
}
.tarjeta-admin[open] .admin-flecha { transform: rotate(180deg); }

.tarjeta-admin-detalle {
    border-top: 1px solid var(--borde);
    padding: .6rem .9rem .9rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.admin-fila {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
}
.admin-etiqueta {
    flex: 0 0 42%;
    max-width: 42%;
    color: var(--texto-suave);
    font-size: .86rem;
    font-weight: 600;
}
.admin-valor {
    flex: 1;
    font-size: .9rem;
    word-break: break-word;
}

/* ============================================
   BOTONES DE ACCIONES — más espacio, cómodos
   ============================================ */
.admin-acciones {
    display: grid;
    grid-template-columns: 1fr;
    gap: .7rem;
    width: 100%;
}
.admin-acciones a.boton,
.admin-acciones form {
    width: 100%;
}
.admin-acciones .formulario-inline {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
}
.admin-acciones select {
    flex: 1;
    min-width: 130px;
    padding: .55rem .6rem;
    border: 1px solid var(--borde);
    border-radius: 10px;
    font-size: .92rem;
    background: var(--tarjeta-solida);
    color: var(--texto);
}
.admin-acciones .boton {
    padding: .6rem 1.1rem;
    font-size: .92rem;
    min-height: 44px; /* área de toque cómoda en celulares */
}

@media (min-width: 480px) and (max-width: 900px) {
    .admin-acciones {
        grid-template-columns: 1fr 1fr;
    }
    .admin-acciones .acciones-estado { grid-column: 1 / -1; }
}

@media (min-width: 901px) {
    .admin-acciones {
        grid-template-columns: auto auto auto;
        align-items: center;
        justify-content: start;
        gap: .8rem;
    }
    .admin-acciones a.boton,
    .admin-acciones form { width: auto; }
}

/* Celdas de acciones en columna en celulares */
@media (max-width: 600px) {
    .admin-etiqueta { flex-basis: 36%; max-width: 36%; }
    .admin-acciones { flex-direction: column; align-items: stretch; }
    .admin-acciones .formulario-inline { width: 100%; }
    .admin-acciones select { width: 100%; }
}

/* Centra los botones Retirar/Devolver en las tarjetas del usuario */
.centrar-botones {
    justify-content: center;
}

/* Asegura que el contenido no se "agrande" en el celular */
#viewport-meta-fix { display: none; }

/* ============================================
   ADMIN — herramienta agrupada con cantidad
   ============================================ */

/* Chips de cantidad en el resumen de la tarjeta */
.admin-cantidad {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    flex-shrink: 0;
}

/* Lista de unidades dentro del detalle */
.admin-unidades {
    margin-top: .3rem;
    border-top: 1px dashed var(--borde);
    padding-top: .5rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
.admin-unidad-titulo {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-suave);
}
.admin-unidad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .55rem .7rem;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: rgba(255, 255, 255, .7);
}
.admin-unidad-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem .6rem;
    font-size: .92rem;
}
.admin-unidad-info small {
    color: var(--texto-suave);
}

@media (max-width: 600px) {
    .admin-unidad { flex-direction: column; align-items: stretch; }
    .admin-unidad .admin-acciones { width: 100%; }
}

/* ============================================
   ADMIN — cantidad agrupada + cuadro de préstamo
   ============================================ */

/* Chips de cantidad en el resumen de la tarjeta */
.admin-cantidad {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    flex-shrink: 0;
}

/* Lista de unidades dentro del detalle */
.admin-unidades {
    margin-top: .3rem;
    border-top: 1px dashed var(--borde);
    padding-top: .5rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
.admin-unidad-titulo {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-suave);
}
.admin-unidad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .55rem .7rem;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: rgba(255, 255, 255, .7);
}
.admin-unidad-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem .6rem;
    font-size: .92rem;
}
.admin-unidad-info small { color: var(--texto-suave); }

@media (max-width: 600px) {
    .admin-unidad { flex-direction: column; align-items: stretch; }
    .admin-unidad .admin-acciones { width: 100%; }
}

/* Cuadro de préstamo: opciones alumno / profesor */
.modal-radios {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.modal-radio {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .9rem;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: #fff;
    font-size: .92rem;
    font-weight: 600;
    color: var(--texto);
    cursor: pointer;
}
.modal-radio input { width: auto; margin: 0; }
.modal-radio:has(input:checked) {
    border-color: var(--navy);
    background: rgba(4, 55, 107, .07);
    color: var(--navy);
}

/* ============================================
   CÓDIGO QR EN LAS TARJETAS DE USUARIO
   ============================================ */
.qr-caja {
    margin-top: .6rem;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: rgba(255, 255, 255, .8);
    overflow: hidden;
}
.qr-titulo {
    cursor: pointer;
    list-style: none;
    padding: .5rem .7rem;
    font-size: .88rem;
    font-weight: 700;
    color: var(--navy);
    user-select: none;
}
.qr-titulo::-webkit-details-marker { display: none; }
.qr-contenido {
    padding: .5rem .7rem .8rem;
    text-align: center;
    border-top: 1px solid var(--borde);
}
.qr-imagen {
    width: 150px;
    height: 150px;
    max-width: 100%;
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--borde);
    padding: 4px;
}
.qr-texto {
    font-size: .78rem !important;
    color: var(--texto-suave);
    margin: .5rem 0 0 !important;
}

/* QR en las tarjetas de usuario */
.qr-caja {
    margin-top: .6rem;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: rgba(255, 255, 255, .8);
    overflow: hidden;
}
.qr-titulo {
    cursor: pointer;
    list-style: none;
    padding: .5rem .7rem;
    font-size: .88rem;
    font-weight: 700;
    color: var(--navy);
    user-select: none;
}
.qr-titulo::-webkit-details-marker { display: none; }
.qr-contenido {
    padding: .5rem .7rem .8rem;
    text-align: center;
    border-top: 1px solid var(--borde);
}
.qr-imagen {
    width: 150px;
    height: 150px;
    max-width: 100%;
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--borde);
    padding: 4px;
}
.qr-texto {
    font-size: .78rem !important;
    color: var(--texto-suave);
    margin: .5rem 0 0 !important;
}

/* ============================================
   UNIDADES + QR POR ID (página de usuarios)
   ============================================ */
.unidades-lista {
    margin-top: .6rem;
    border-top: 1px dashed var(--borde);
    padding-top: .5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.unidades-titulo {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-suave);
}
.unidad-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .6rem;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: rgba(255, 255, 255, .75);
}
.unidad-datos {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    font-size: .9rem;
}
.unidad-datos small { color: var(--texto-suave); font-size: .74rem; }
.unidad-botones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}
.unidad-botones .boton { padding: .45rem .8rem; font-size: .85rem; }

/* QR chico dentro de cada unidad */
.qr-mini { margin-top: 0; width: 100%; }
.qr-mini .qr-titulo { padding: .4rem .6rem; font-size: .82rem; }
.qr-mini .qr-imagen { width: 130px; height: 130px; }

@media (max-width: 480px) {
    .unidad-fila { flex-direction: column; align-items: stretch; }
    .unidad-botones .boton { width: 100%; }
}