/* diseno.css — auditoría de diseño (Apple Design R1–R17), 15/11/2026. Cada bloque se puede sacar por separado.
   Lo carga header.php e index.php después de style.css. Colores de contraste: los pone accesibilidad (style.css). */

/* [G1-D1] Respuesta al toque (R1): estado presionado inmediato; sin demora de doble toque */
a, summary, button, .navbar-toggler, label { touch-action: manipulation; }
a:not(.btn), summary, .navbar-toggler, .carousel-control-prev, .carousel-control-next { transition: opacity 120ms ease-out; }
a:not(.btn):active, summary:active, .navbar-toggler:active, .contenedor-boton a:active { opacity: .55; transition-duration: 0s; }

/* [G1-D4] Carrusel: menos tiempo bloqueado entre diapositivas (R3) */
.carousel-item { transition: transform .35s ease-out; }

/* [G1-D3] Reducir movimiento (R14): sin deslizamientos, sin parallax, sin entrada animada */
@media (prefers-reduced-motion: reduce) {
  .carousel-item { transition: none !important; }
  .contenedor-boton { animation: none !important; }
  .navbar-collapse, .navbar-collapse.collapsing { transition: none !important; }
  .container-p section .image { background-attachment: scroll !important; }
  html { scroll-behavior: auto !important; }
}

/* [G3-D6] Cabecera en celular: logo y menú en una fila; el buscador pasa al menú (diseno.js) */
@media (max-width: 991.98px) {
  header.row > .col-lg-3 { display: none; }
  header.row { padding-bottom: 0 !important; margin-bottom: 0 !important; }
  header.row > .col-lg-4, header.row > .col-lg-4 > a { text-align: left !important; display: block; }
  header.row #logo { max-width: calc(100vw - 104px); height: auto; margin: 0 !important; }
  /* [G3-D6] corrimiento de la hamburguesa a la fila del logo: REVERTIDO 15/11 05:3x (la columna #btn-llamar de usabilidad la tapaba) */
  header.row + .container-fluid #botonera { justify-content: flex-end; padding-top: 0; padding-bottom: 0; }
  #botonera .navbar-toggler { margin-bottom: 9px; }
  #botonera .navbar-collapse > form.diseno-buscar { margin: 8px 0 4px; display: flex; gap: 8px; }
  #botonera .navbar-collapse > form.diseno-buscar input[type=text], #botonera .navbar-collapse > form.diseno-buscar input:not([type]) { flex: 1; }
}

/* [G3-D7] Banda de título más baja en celular (R15) */
@media (max-width: 767.98px) {
  .container-p { margin-bottom: 1em; }
  .container-p section { height: auto !important; min-height: 0; }
  .container-p section .stuff { max-width: 88%; padding: 4px 0; }
  .container-p section .stuff:before, .container-p section .stuff:after { margin: 18px 0; }
  .container-p section .stuff h1 { font-size: 2rem; line-height: 1.1; margin: 0; }
}

/* [G3-D5] Pie: renglones de 32 px en pantallas táctiles (R10). No toca colores */
@media (pointer: coarse) {
  footer ul li a, footer .col-md-4 > a { display: inline-block; padding: 5px 0; }
}

/* [G3-D12] Párrafos largos de la portada alineados a la izquierda en celular (R16) */
@media (max-width: 767.98px) {
  #ifn-resumen, #donde-polisomnografia p { text-align: left !important; }
}

/* [G3-D8] Carrusel oculto en celular: el texto del banner queda ilegible (R15) — decisión de Pablo 15/11 */
@media (max-width: 767.98px) {
  #carouselExampleIndicators, #carrusel-pausa { display: none !important; }
}

/* [G3-D9] Aviso del portal como franja no modal (R16 Agencia) — decisión de Pablo 15/11; lo arma diseno.js */
.diseno-aviso-portal { display: flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap;
  background: #fff8e1; border-bottom: 1px solid #f0e2b6; padding: 10px 16px; font-size: 1rem; color: #212529; }
.diseno-aviso-portal a { font-weight: 600; }
.diseno-aviso-portal button { border: 0; background: transparent; font-size: 1.5rem; line-height: 1; min-width: 44px; min-height: 44px; color: #495057; }

/* [G4-D10] Encabezados de Estudios y bloque «Si conducís» en el celeste de marca (el oscuro de accesibilidad) (R12) */
#articulos .list-group-item.active, #problemasNO .list-group-item.active, #estudiosNO .list-group-item.active { background-color: #117a8b; border-color: #117a8b; }
#manejar.bg-primary { background-color: #117a8b !important; }

/* [G4-D11] Estudios: las dos listas con el mismo estilo y ancho; título del desplegable sin resaltador (R16 Oficio) */
#problemasNO, #estudiosNO { background: transparent !important; font-size: 1.3em; line-height: 1.8em; color: #737672; margin-bottom: 1em; }
#estudiosNO .list-group-item.active.bg { padding: .75rem 1.25rem; }
main section.container > details > summary mark.bg { background: transparent; padding: 0; }
main section.container > details > summary h2 { color: #117a8b; font-family: 'Fjalla One', sans-serif; }
@media (min-width: 768px) { main section.container.p-4 { max-width: 80%; padding-left: 0 !important; padding-right: 0 !important; } }