*{box-sizing:border-box}body{margin:0;background:#F0F9FF;color:#164663;font:16px/1.6 "Segoe UI",Arial,sans-serif}.contenedor{max-width:1080px;margin:auto;padding:24px}header{background:#0068A6;color:white}h1{margin:5px 0 18px;font-size:32px}.etiqueta{font-size:12px;letter-spacing:.1em;font-weight:700}nav{display:flex;flex-wrap:wrap;gap:10px}nav a{color:white;text-decoration:none;padding:8px 14px;border:1px solid #ffffff50;border-radius:6px}nav a:hover{background:#ffffff20}h2{margin:0;font-size:26px}p{color:#42687E;margin-top:6px}.cabecera{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:12px 0 24px}.boton,button{display:inline-block;border:0;border-radius:7px;background:#0068A6;color:white;text-decoration:none;padding:12px 18px;font:inherit;cursor:pointer}.boton:hover,button:hover{background:#005587}.tabla,.panel{background:white;border:1px solid #CBE8F8;border-radius:12px;box-shadow:0 4px 16px #0068A608}.tabla{overflow-x:auto}table{border-collapse:collapse;width:100%;text-align:left}caption{text-align:left;padding:16px 20px;font-weight:600}th,td{padding:16px 20px;border-top:1px solid #DCEFFA}th{background:#E4F4FD;font-size:14px}.estado{display:inline-block;padding:4px 12px;border-radius:20px;font-size:14px;font-weight:600}.disponible{background:#E0F4FF;color:#0068A6}.prestado{background:#C7E9FC;color:#005587}.panel{padding:28px;margin-top:22px}.formulario{max-width:640px}label{display:block;font-weight:600;margin-bottom:6px}input,select{width:100%;padding:12px;border:1px solid #9BCBE5;border-radius:6px;font:inherit;background:white;margin-bottom:22px;color:#164663}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #38A9E8;outline-offset:3px}.error{padding:12px;background:#fff0f0;border-left:4px solid #b43b3b;color:#8c2525}footer{font-size:13px;color:#42687E}@media(max-width:600px){.contenedor{padding:20px 16px}.cabecera{align-items:flex-start;flex-direction:column}h1{font-size:27px}th,td{padding:12px}nav a{font-size:14px}.panel{padding:20px}}


/* Distribución fluida: móviles, tabletas y monitores grandes. */
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; display: flex; flex-direction: column; }
.contenedor {
    width: 100%;
    max-width: 1440px;
    padding: clamp(20px, 2.5vw, 40px) clamp(16px, 3vw, 48px);
    min-width: 0;
}
header .contenedor { margin-inline: auto; }
main.contenedor { flex: 1; margin: 0 auto; }
footer.contenedor { margin: 0 auto; }
h1 { font-size: clamp(27px, 2.4vw, 40px); line-height: 1.25; }
h2 { font-size: clamp(23px, 1.8vw, 30px); line-height: 1.3; }
h1, h2, h3, p, td, caption, footer { overflow-wrap: anywhere; }
nav a, .boton, button { min-height: 44px; }
nav a { display: flex; align-items: center; justify-content: center; }
.cabecera > div { min-width: 0; }
.cabecera .boton { flex-shrink: 0; text-align: center; }
.formulario { width: 100%; max-width: 760px; }
input, select { min-width: 0; max-width: 100%; min-height: 48px; font-size: 16px; }
form { min-width: 0; }
table { table-layout: fixed; }
th, td { vertical-align: top; }
.estado { max-width: 100%; }
.campo-movil { display: none; }

@media (min-width: 1800px) {
    .contenedor { max-width: 1640px; }
    th, td { padding: 22px 24px; }
}

@media (max-width: 900px) {
    .cabecera { align-items: flex-start; flex-direction: column; gap: 12px; }
    .cabecera p { margin-bottom: 0; }
}

@media (max-width: 600px) {
    nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    nav a { padding: 10px 8px; font-size: 14px; text-align: center; }
    .etiqueta { font-size: 11px; letter-spacing: .06em; }
    .cabecera .boton, form button { width: 100%; text-align: center; }
    .panel { padding: 20px 16px; }
    .tabla { overflow: visible; }
    table, caption, tbody { display: block; width: 100%; }
    /* Conserva los encabezados para lectores de pantalla. */
    thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    tr { display: block; padding: 16px; border-top: 1px solid #CBE8F8; }
    td { display: block; width: 100%; padding: 8px 0; border: 0; }
    .campo-movil { display: block; margin-bottom: 3px; color: #42687E; font-size: 12px; font-weight: 700; }
    caption { padding: 16px; }
    footer { font-size: 12px; }
}

@media (prefers-reduced-motion: no-preference) {
    nav a, .boton, button { transition: background-color .15s ease; }
}