/* Ajustes de interacción y lectura, referencia WCAG 2.2. */
:root { --foco: #075ea8; }
html { scroll-padding-block: 80px 190px; }
body { line-height: 1.5; }
.saltar-contenido { position: fixed; top: 8px; left: 8px; transform: translateY(-180%); z-index: 100; padding: 12px 18px; background: var(--superficie); color: var(--texto); border: 3px solid var(--foco); border-radius: 8px; }
.saltar-contenido:focus { transform: none; }
:is(button, a, input, select, textarea, summary):focus-visible { outline: 3px solid var(--foco); outline-offset: 4px; box-shadow: 0 0 0 6px var(--superficie); }
:is(button, a, input, select, textarea, summary) { scroll-margin-block: 90px 190px; }
.btn, .btn.enlace, .btn.mini, input:not([type=checkbox]):not([type=radio]), select, summary { min-height: 48px; }
.btn { white-space: normal; overflow-wrap: anywhere; }
input, select, textarea { font-size: max(1rem, 16px); border-color: var(--suave); }
input::placeholder, textarea::placeholder { color: var(--suave); opacity: 1; }
.btn[disabled] { cursor: default; opacity: .7; }
.grupo-menu { --tono-menu: #667080; }
.panel-menu .menu a.activo { font-weight: 750; }
.grupo-menu h2 { text-transform: none; letter-spacing: .01em; font-size: .875rem; }
.vista { min-width: 0; }
.pantalla-crono { min-width: 0; }
.crono-esfera { border: 0; border-radius: 0; background: transparent; min-height: 0; padding: 16px 0; gap: 14px; }
.esfera-tiempo { position: relative; width: min(100%, 300px); aspect-ratio: 1; display: grid; place-items: center; }
.esfera-tiempo svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.crono-esfera .esfera-tiempo :is(.reloj, .cronometro) { border: 0; width: auto; height: auto; max-width: 68%; font-size: clamp(1.5rem, 6vw, 2.5rem); line-height: 1.2; font-weight: 650; }
.anillo-fondo { stroke: var(--borde); }
.anillo-valor { stroke-linecap: round; }
.anillo-punto { fill: var(--tono-anillo); stroke-width: 0; }
.anillo-0 { --tono-anillo: var(--marca); --hue-anillo: #76ff03; }
.anillo-1 { --tono-anillo: color-mix(in srgb, var(--marca) 75%, var(--superficie)); --hue-anillo: #b2ff59; }
.anillo-2 { --tono-anillo: color-mix(in srgb, var(--marca) 50%, var(--superficie)); --hue-anillo: #ccff90; }
.personal .anillo-0 { --hue-anillo: #ff5a00; }
.personal .anillo-1 { --hue-anillo: #ff8500; }
.personal .anillo-2 { --hue-anillo: #ffb300; }
.anillo-degradado { stroke: var(--hue-anillo); }
.esfera-tiempo .anillo-punto { stroke: var(--hue-anillo); stroke-width: 2; }
.pantalla-crono:not(.personal) .anillo-0 { --tono-anillo: #076838; --trazo-anillo: #078442; }
.pantalla-crono:not(.personal) .anillo-1 { --tono-anillo: #19824a; --trazo-anillo: #21a452; }
.pantalla-crono:not(.personal) .anillo-2 { --tono-anillo: #429753; --trazo-anillo: #58bd64; }
.pantalla-crono:not(.personal) .anillo-degradado { stroke: var(--trazo-anillo); }
.pantalla-crono:not(.personal) .anillo-degradado path {
  stroke: var(--trazo-anillo);
}
.pantalla-crono:not(.personal) .anillo-fondo { stroke: var(--borde); }
.crono-controles .crono-principal { color: var(--sobre-marca, #fff); }
.crono-controles .crono-pausa { border: 2px solid var(--suave); }
.crono-controles .btn::after { content: attr(aria-label); position: absolute; top: calc(100% + 6px); color: var(--texto); font-size: .8rem; line-height: 1.2; font-weight: 650; white-space: nowrap; }
.crono-controles { bottom: calc(98px + env(safe-area-inset-bottom)); }
.crono-controles .btn.cargando::after { animation: none; width: auto; height: auto; border: 0; border-radius: 0; }
.crono-historial { max-height: 75dvh; }
.crono-historial > summary { margin-inline: 108px; min-height: 76px; text-align: center; line-height: 1.3; }
.crono-listado { max-height: calc(75dvh - 92px); padding-inline: 4px; scroll-padding-block: 12px; }
.pantalla-crono:has(.crono-historial[open]) .crono-controles { visibility: hidden; }
.dialogo { max-width: min(560px, calc(100vw - 24px)); max-height: 85dvh; overflow-y: auto; }
.dialogo::backdrop { background: rgb(0 0 0 / .55); }
@media (max-width: 899px) {
  .panel-menu .menu { flex-direction: column; }
  .panel-menu .menu a { min-height: 56px; }
  .con-menu-lateral .vista { padding-bottom: calc(190px + env(safe-area-inset-bottom)); }
  #abrir-menu { color: var(--sobre-marca, #fff); }
}
@media (max-width: 380px) {
  .crono-historial > summary { margin-inline: 104px 8px; font-size: .875rem; }
  body:not([data-mano="izquierda"]) .crono-historial > summary { margin-inline: 8px 104px; }
}
@media (max-height: 520px) {
  .crono-controles { position: relative; left: auto !important; bottom: auto; transform: none; margin: 16px auto 48px; width: 92px; }
  .crono-historial { position: static; }
  .crono-historial > summary { margin-inline: 0; }
  .crono-listado { max-height: none; }
  .pantalla-crono:has(.crono-historial[open]) .crono-controles { visibility: visible; }
}
:root[data-tema="oscuro"] {
  .pantalla-crono:not(.personal) .anillo-0 { --tono-anillo: #a5edbf; --trazo-anillo: #a5edbf; }
  .pantalla-crono:not(.personal) .anillo-1 { --tono-anillo: #83d9ab; --trazo-anillo: #83d9ab; }
  .pantalla-crono:not(.personal) .anillo-2 { --tono-anillo: #63c89a; --trazo-anillo: #63c89a; }
  .pantalla-crono:not(.personal) .anillo-fondo { stroke: #718b7a; }
  & { --foco: #a5d8ff; }
  .crono-controles .crono-principal, #abrir-menu { color: var(--sobre-marca, #101b15); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .btn, .panel-menu .menu a { border: 1px solid ButtonText; }
  .panel-menu .menu a.activo { outline: 2px solid Highlight; }
  .anillo-fondo { stroke: GrayText; }
  .anillo-valor, .anillo-degradado { stroke: CanvasText; }
  .pantalla-crono:not(.personal) .anillo-degradado { stroke: CanvasText; }
  .pantalla-crono:not(.personal) .anillo-degradado path { stroke: CanvasText; }
  .pantalla-crono:not(.personal) .anillo-fondo { stroke: GrayText; }
  .anillo-degradado path { stroke-opacity: 1; }
  .anillo-punto { fill: CanvasText; }
  .esfera-tiempo .anillo-punto[class], .personal .esfera-tiempo .anillo-punto[class] { stroke: Highlight; }
  .crono-controles .btn::before { background: ButtonText; }
}

/* Una pantalla de dispositivo por vista, sin scroll de la página principal. */
.vista:has(> .pantalla-crono), .vista:has(> .ajustes-pantallas) { height: calc(100dvh - var(--alto-cabecera, 56px)); max-width: none; padding: 12px 20px 0; overflow: hidden; }
.vista > .pantalla-crono { height: 100%; min-height: 0; padding-bottom: calc(220px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }
.pantalla-crono > .pila { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.pantalla-crono .crono-esfera { flex: 1; min-height: 0; margin: 0 auto; padding: 0; width: min(100%, 380px); justify-content: center; gap: 12px; }
.pantalla-crono .esfera-tiempo { width: min(300px, 36dvh); flex-shrink: 1; min-height: 0; }
/* La esfera se mide con el hueco que le queda (avisos, móviles bajos): nunca se parte en columnas ni se sale.
   El texto del contador escala con la esfera. */
.pantalla-crono .crono-esfera { flex-wrap: nowrap; container-type: size; overflow: hidden; }
.pantalla-crono .crono-esfera > :not(.esfera-tiempo) { flex: none; }
.pantalla-crono .esfera-tiempo { width: min(300px, 100cqw, calc(100cqh - var(--reserva-esfera, 3.75rem))); min-width: 5rem; flex-shrink: 0; container-type: inline-size; }
.pantalla-crono .crono-esfera .esfera-tiempo :is(.reloj, .cronometro) { max-width: 76%; font-size: clamp(.9rem, 15cqi, 2.5rem); }
/* Móviles bajos (360×640): se deja el hueco a la esfera. La nota de privacidad y la tarea del Pomodoro dejan de verse
   (los lectores de pantalla las siguen leyendo) y el aviso de copia va en una línea. */
@media (max-height: 720px) and (min-height: 521px) {
  .pantalla-crono > p.ayuda, .pomodoro .crono-esfera > p.ayuda { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pantalla-crono > .copia-pendiente { flex-wrap: nowrap; padding: 4px 4px 4px 10px; font-size: .8rem; line-height: 1.25; }
  .pantalla-crono > .copia-pendiente .btn { flex: none; }
  .pomodoro .crono-esfera { --reserva-esfera: 5.5rem; }
}
.pantalla-crono > h1 { font-size: 1.35rem; flex: none; }
.pantalla-crono > p.ayuda { font-size: .8rem; margin-block: 0; flex: none; }
.ajustes-pantallas { height: 100%; display: flex; flex-direction: column; min-height: 0; gap: 8px; }
.ajustes-pantallas > h1 { flex: none; }
.carrusel-pantallas { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; padding-right: 32px; padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
.carrusel-estado { color: var(--suave); font-size: .85rem; margin: 0 0 8px; flex: none; }
.carrusel-pista { flex: 1; min-height: 0; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior-y: contain; scroll-padding: 0; }
.carrusel-pista::-webkit-scrollbar { display: none; }
.carrusel-pagina { height: 100%; scroll-snap-align: start; scroll-snap-stop: always; min-height: 0; padding: 4px; }
.carrusel-contenido { height: 100%; overflow-y: auto; padding: 4px 6px 24px; scroll-padding-block: 12px; }
.carrusel-contenido > .tarjeta { max-width: 760px; margin: 0 auto; }
.carrusel-indicadores { position: absolute; right: -6px; top: 50%; transform: translateY(-50%); display: grid; max-height: 65dvh; overflow-y: auto; }
button.carrusel-punto { width: 28px; height: 28px; min-height: 28px; padding: 0; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; }
.carrusel-punto::before { content: ''; width: 6px; height: 6px; border: 1px solid var(--suave); border-radius: 50%; }
.carrusel-punto[aria-current]::before { background: var(--texto); border-color: var(--texto); width: 9px; height: 9px; }
@media (max-height: 520px) {
  .vista > .pantalla-crono { padding-bottom: 82px; display: grid; grid-template-columns: minmax(0, 1fr) 160px; }
  .pantalla-crono > h1, .pantalla-crono > p.ayuda { display: none; }
  .pantalla-crono > .pila { display: contents; }
  .pantalla-crono .esfera-tiempo { width: min(220px, 60dvh); }
  .pantalla-crono .crono-controles { position: static; transform: none; width: 92px; margin: auto; }
  .pantalla-crono .crono-historial { position: fixed; }
  .pantalla-crono .crono-listado { max-height: calc(75dvh - 92px); }
}
@media print { .carrusel-pista, .carrusel-contenido { overflow: visible; height: auto; } .carrusel-pagina { height: auto; } .carrusel-indicadores { display: none; } }
.estado-registro { font-size: .75rem; max-width: 180px; }

/* Patrón común para secciones que crecen por bloques. */
.vista:has(> .pantallas-seccion) { height: calc(100dvh - var(--alto-cabecera, 56px)); max-width: none; padding: 12px 20px 0; overflow: hidden; }
.pantallas-seccion { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.pantallas-seccion > h1, .pantallas-seccion > a.volver { flex: none; }
.carrusel-titulo-punto { display: none; }
.carrusel-indicadores { z-index: 12; }
.carrusel-indicadores.expandido { width: min(330px, calc(100vw - 48px)); padding: 8px; border: 1px solid var(--borde); border-radius: 16px; background: var(--superficie); box-shadow: 0 8px 32px rgb(0 0 0 / .2); gap: 4px; }
.carrusel-indicadores.expandido .carrusel-punto { width: 100%; min-height: 48px; height: auto; padding: 10px 12px; display: flex; flex-direction: row-reverse; gap: 12px; text-align: right; color: var(--texto); border-radius: 10px; }
.carrusel-indicadores.expandido .carrusel-titulo-punto { display: block; font-size: .9rem; line-height: 1.4; overflow-wrap: anywhere; }
.carrusel-indicadores.expandido .carrusel-punto::before { flex: none; }
.carrusel-indicadores.expandido .carrusel-punto[aria-current] { background: color-mix(in srgb, var(--marca) 14%, var(--superficie)); font-weight: 700; }
.crono-listado.con-pantallas { height: min(58dvh, 560px); overflow: hidden; display: flex; flex-direction: column; }
.crono-listado.con-pantallas > .carrusel-pantallas { padding-bottom: 0; }
/* En móvil, el botón flotante «Menú» no tapa lo último de cada pantalla de la hoja */
@media (max-width: 899px) { .crono-listado .carrusel-contenido { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); } }
.lista-simple li > .btn, .lista-simple li > span > .btn { flex: none; white-space: nowrap; }
.crono-listado .carrusel-estado { font-size: .8rem; }
@media print {
  .vista:has(> .pantallas-seccion), .vista:has(> .ajustes-pantallas), .pantallas-seccion, .ajustes-pantallas, .carrusel-pantallas, .carrusel-pagina, .carrusel-contenido, .carrusel-pista { height: auto; max-height: none; overflow: visible; display: block; padding: 0; }
  .carrusel-indicadores, .carrusel-estado { display: none; }
}

/* Clientes: fichas cuadradas de dos columnas en móvil. */
.grid-clientes { gap: 12px; }
.cliente-tarjeta { display: flex; align-items: center; gap: 16px; padding: 14px; border: 1px solid var(--borde); border-radius: 16px; background: var(--superficie); min-width: 0; }
.cliente-identidad { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; color: var(--texto); text-decoration: none; }
.cliente-identidad strong { overflow-wrap: anywhere; }
.cliente-avatar { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--marca) 10%, var(--superficie)); font-size: 1.15rem; font-weight: 700; color: var(--marca); overflow: hidden; }
.cliente-avatar img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 4px; }
.cliente-direccion { color: var(--suave); flex: 1; }
.cliente-acciones { display: flex; gap: 6px; }
.cliente-acciones .btn { padding: 8px 10px; gap: 6px; }
.cliente-acciones .icono { display: inline-block; flex: none; width: 22px; height: 22px; }
.cliente-logo-previa img { max-width: 160px; max-height: 80px; object-fit: contain; background: #fff; padding: 8px; border-radius: 8px; }
.icono.editar { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linejoin="round"><path d="m15 4 5 5M4 20l5-1L21 7l-5-5L4 14v6z"/></svg>'); }
@media (max-width: 699px) {
  .grid-clientes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cliente-tarjeta { aspect-ratio: 1; padding: 8px; display: grid; grid-template-rows: minmax(0, 1fr) 44px; gap: 4px; }
  .cliente-identidad { height: 100%; display: flex; flex-direction: column; gap: 4px; justify-content: center; text-align: center; min-height: 0; }
  .cliente-avatar { width: min(52px, 100%); height: auto; aspect-ratio: 1; min-height: 20px; flex-shrink: 1; font-size: 1rem; }
  .cliente-identidad strong { font-size: .8rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex-shrink: 0; }
  .cliente-direccion { display: none; }
  .cliente-acciones { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
  .cliente-acciones .btn { min-width: 44px; min-height: 44px; height: 44px; padding: 0; }
  .cliente-acciones .cliente-ir:only-child { grid-column: 2; }
  .cliente-texto-accion { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
  .grid-clientes > .vacio { grid-column: 1 / -1; }
}
@media (forced-colors: active) { .cliente-tarjeta { border-color: CanvasText; } }
/* Sedes: nombre y dirección arriba; debajo, los botones a lo ancho con icono y texto (no se estrechan en móvil). */
.sede-tarjeta { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--borde); border-radius: 16px; background: var(--superficie); min-width: 0; }
.sede-tarjeta > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sede-tarjeta strong, .sede-tarjeta small { overflow-wrap: break-word; word-break: normal; }
.sede-tarjeta small { color: var(--suave); }
.sede-acciones { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.sede-acciones .btn { min-height: 44px; margin: 0; justify-content: center; gap: 6px; white-space: nowrap; word-break: normal; overflow-wrap: normal; }
.sede-acciones .icono { display: inline-block; flex: none; width: 22px; height: 22px; }
@media (forced-colors: active) { .sede-tarjeta { border-color: CanvasText; } }
.listado-alfabetico { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.listado-indexado > .cab, .listado-indexado > .filtros { flex: none; }
.listado-indexado > .cab { flex-wrap: wrap; }
.listado-indexado .filtros { margin-bottom: 0; }
@media (max-width: 699px) {
  .listado-indexado > .filtros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listado-indexado > .filtros input[type=search] { grid-column: 1 / -1; }
  .listado-indexado .carrusel-contenido { padding-inline: 0; }
}
/* Las pantallas verticales son para móvil y tableta (pantalla táctil). Con ratón y pantalla ancha,
   la sección se lee entera con scroll normal y los bloques se reparten en columnas. */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .vista:has(> .pantallas-seccion), .vista:has(> .ajustes-pantallas) { height: auto; overflow: visible; max-width: 1120px; padding: 16px 24px 32px; }
  .pantallas-seccion, .ajustes-pantallas { height: auto; }
  :is(.pantallas-seccion, .ajustes-pantallas) :is(.carrusel-pantallas, .carrusel-pagina, .carrusel-contenido) { height: auto; overflow: visible; padding: 0; }
  :is(.pantallas-seccion, .ajustes-pantallas) .carrusel-pista { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; align-items: start; height: auto; overflow: visible; scroll-snap-type: none; }
  .listado-indexado .carrusel-pista { grid-template-columns: 1fr; }
  :is(.pantallas-seccion, .ajustes-pantallas) :is(.carrusel-indicadores, .carrusel-estado) { display: none; }
  :is(.pantallas-seccion, .ajustes-pantallas) .carrusel-contenido > .tarjeta { max-width: none; }
}