/* Piscina (js/piscina.js): elegir día y hora para que el robot reserve en IMDECO. */
#piscinaRoot{ max-width: 1080px; margin: 0 auto; padding-bottom: 32px; }
.psc-ico{ width: 22px; height: 22px; }
.psc-ico-s{ width: 16px; height: 16px; flex: none; }

/* Título grande en dos tonos */
.psc-hero{ display:flex; flex-direction:column; align-items:center; text-align:center; margin: 6px 0 22px; line-height: .95; }
.psc-hero span{ font-size: clamp(40px, 9vw, 68px); font-weight: 700; letter-spacing: -0.04em; color: var(--text); }
.psc-hero .psc-hero-b{ color: var(--muted-2); }

/* Tarjeta: info | calendario | horas */
.psc-card{ display:grid; grid-template-columns: 220px 1fr; background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.psc-cuerpo{ display:grid; grid-template-columns: 1fr 250px; min-height: 420px; }
.psc-card-ok .psc-cuerpo{ grid-template-columns: 1fr; }
.psc-info{ padding: 22px; border-right: 1px solid var(--line); }
.psc-info-ico{ width: 44px; height: 44px; border-radius: 12px; display:grid; place-items:center; background: var(--w06); border: 1px solid var(--line); color: var(--blue); }
.psc-info-t{ font-size: 22px; font-weight: 700; margin: 16px 0 8px; letter-spacing: -0.02em; }
.psc-info-p{ color: var(--muted); font-size: 13.5px; line-height: 1.5; margin: 0 0 16px; }
.psc-info-l{ list-style: none; margin: 0; padding: 0; display:flex; flex-direction:column; gap: 10px; color: var(--muted); font-size: 13.5px; }
.psc-info-l li{ display:flex; align-items:center; gap: 8px; }

.psc-col-t{ font-weight: 600; font-size: 15px; margin-bottom: 14px; }
.psc-cal{ padding: 22px; border-right: 1px solid var(--line); }
.psc-mes{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 12px; color: var(--text); font-size: 14px; }
.psc-mes-nav{ display:flex; gap: 6px; }
.psc-mes-nav button{ width: 32px; height: 32px; border-radius: 10px; display:grid; place-items:center; background: var(--w04); border: 1px solid var(--line); color: var(--text); cursor: pointer; }
.psc-mes-nav button:disabled{ opacity: .35; cursor: default; }
.psc-sem, .psc-dias{ display:grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.psc-sem span{ text-align:center; font-size: 11.5px; color: var(--muted-2); padding: 4px 0 8px; }
.psc-dia{ position: relative; aspect-ratio: 1; max-height: 46px; border: 0; background: none; color: var(--text); font: inherit; font-size: 14px; border-radius: 999px; cursor: pointer; display:grid; place-items:center; }
.psc-dia span{ width: 36px; height: 36px; display:grid; place-items:center; border-radius: 999px; transition: background .15s, color .15s; }
.psc-dia:hover:not(:disabled) span{ background: var(--w08); }
.psc-dia:disabled{ cursor: default; color: var(--muted-2); opacity: .45; }
.psc-dia.abierto:disabled{ opacity: .3; text-decoration: line-through; }
.psc-dia.hoy span{ box-shadow: inset 0 0 0 1px var(--line); }
.psc-dia.sel span{ background: var(--text); color: var(--bg); font-weight: 600; }
.psc-dia.con::after{ content:''; position:absolute; bottom: 2px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--blue); }
.psc-dia.con.reservada::after{ background: var(--green); }
.psc-dia.con.fallida::after{ background: var(--coral); }
.psc-dia.vacio{ pointer-events: none; }
.psc-nota{ margin-top: 14px; font-size: 12.5px; color: var(--muted-2); line-height: 1.45; }
.psc-nota a{ color: var(--muted); }

.psc-horas{ padding: 22px 18px; display:flex; flex-direction:column; gap: 8px; min-width: 0; }
.psc-horas-t{ font-weight: 600; font-size: 15px; }
.psc-horas-sub{ font-size: 12.5px; color: var(--muted-2); margin: -4px 0 6px; }
.psc-horas-vacio{ color: var(--muted-2); font-size: 13.5px; margin: auto; text-align:center; }
.psc-horas-l{ display:flex; flex-direction:column; gap: 8px; }
.psc-franja{ font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); margin: 6px 0 -2px; }
.psc-hora{ width: 100%; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--w02); color: var(--text);
  font: inherit; font-size: 14.5px; font-variant-numeric: tabular-nums; cursor: pointer; display:flex; align-items:center; justify-content:center; gap: 8px; transition: border-color .15s, background .15s, flex-basis .2s; }
.psc-hora:hover{ border-color: var(--w22); }
.psc-hora small{ font-size: 11px; color: var(--blue); }
.psc-hora.actual{ border-color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, transparent); }
.psc-hora-par{ display:flex; gap: 8px; animation: psc-entra .2s ease; }
.psc-hora-par .psc-hora{ flex: 0 0 42%; background: var(--w08); border-color: var(--w22); }
.psc-confirmar{ flex: 1; padding: 11px 14px; border-radius: 12px; border: 0; background: var(--text); color: var(--bg); font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer; }
.psc-confirmar:disabled{ opacity: .6; cursor: default; }
.psc-aviso{ font-size: 12.5px; line-height: 1.45; color: var(--amber); background: color-mix(in srgb, var(--amber) 10%, transparent); border-radius: 10px; padding: 9px 10px; }
.psc-estado{ display:flex; flex-direction:column; gap: 4px; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--w03); font-size: 13.5px; }
.psc-estado b{ font-size: 15px; }
.psc-estado.reservada b{ color: var(--green); }
.psc-estado.fallida b{ color: var(--coral); }
.psc-estado-det{ color: var(--muted); font-size: 12.5px; line-height: 1.45; word-break: break-word; }
.psc-btn-sec{ padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--w04); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.psc-btn-borrar{ margin-top: auto; align-self: center; display:flex; align-items:center; gap: 6px; padding: 8px 10px; border: 0; background: none; color: var(--muted-2); font: inherit; font-size: 13px; cursor: pointer; border-radius: 10px; }
.psc-btn-borrar:hover{ color: var(--coral); background: var(--w04); }

/* «Programado» con el check que se dibuja */
.psc-ok{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap: 8px; padding: 40px 22px; min-height: 420px; animation: psc-entra .3s ease; }
.psc-ok svg{ width: 64px; height: 64px; margin-bottom: 8px; }
.psc-ok-aro{ fill: none; stroke: var(--green); stroke-width: 2; stroke-dasharray: 151; stroke-dashoffset: 151; animation: psc-traza .6s ease forwards; }
.psc-ok-v{ fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 36; animation: psc-traza .35s .5s ease forwards; }
.psc-ok-t{ font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.psc-ok-s{ color: var(--text); font-size: 14.5px; }
.psc-ok-n{ color: var(--muted-2); font-size: 13px; margin-bottom: 14px; }
.psc-ok .psc-confirmar{ flex: none; padding: 10px 18px; }
@keyframes psc-traza{ to{ stroke-dashoffset: 0; } }
@keyframes psc-entra{ from{ opacity: 0; transform: translateY(4px); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){
  .psc-ok-aro, .psc-ok-v{ animation: none; stroke-dashoffset: 0; }
  .psc-ok, .psc-hora-par{ animation: none; }
}

/* Lista de lo programado */
.psc-lista{ margin-top: 22px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 6px 16px 10px; }
.psc-lista-t{ font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); padding: 12px 0 6px; }
.psc-lista-vacia{ color: var(--muted-2); font-size: 13.5px; padding: 10px 0 8px; }
.psc-fila{ display:flex; align-items:center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line-soft); cursor: pointer; }
.psc-fila:first-of-type{ border-top: 0; }
.psc-fila-dia{ width: 42px; flex: none; display:flex; flex-direction:column; align-items:center; line-height: 1.05; }
.psc-fila-dia b{ font-size: 19px; }
.psc-fila-dia small{ font-size: 11px; color: var(--muted-2); text-transform: uppercase; }
.psc-fila-txt{ flex: 1; min-width: 0; display:flex; flex-direction:column; gap: 2px; }
.psc-fila-txt b{ font-size: 14px; font-weight: 600; }
.psc-fila-txt span{ font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psc-chip{ flex: none; font-size: 11.5px; padding: 4px 9px; border-radius: 999px; background: var(--w06); color: var(--blue); }
.psc-chip.reservada{ color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.psc-chip.fallida{ color: var(--coral); background: color-mix(in srgb, var(--coral) 12%, transparent); }
.psc-chip.asistida{ color: var(--muted); background: var(--w06); }
.psc-chip.programada{ background: color-mix(in srgb, var(--blue) 12%, transparent); }
.psc-antes summary{ cursor: pointer; color: var(--muted-2); font-size: 13px; padding: 10px 0 4px; border-top: 1px solid var(--line-soft); }
.psc-antes .psc-fila{ opacity: .75; }

/* Pantallas medianas: info arriba, calendario y horas al lado */
@media (max-width: 900px){
  .psc-card{ grid-template-columns: 1fr; }
  .psc-info{ border-right: 0; border-bottom: 1px solid var(--line); display:grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items:center; padding: 16px 18px; }
  .psc-info-t{ margin: 0; font-size: 18px; }
  .psc-info-p{ grid-column: 1 / -1; margin: 10px 0 10px; }
  .psc-info-l{ grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
}
/* Móvil: todo en columna */
@media (max-width: 640px){
  .psc-hero{ margin-bottom: 16px; }
  .psc-card{ border-radius: 16px; }
  .psc-cuerpo{ grid-template-columns: 1fr; min-height: 0; }
  .psc-cal{ border-right: 0; border-bottom: 1px solid var(--line); padding: 16px; }
  .psc-horas{ padding: 16px; }
  .psc-ok{ min-height: 320px; }
  .psc-lista{ padding: 4px 14px 8px; }
}

/* Botón de Inicio (js/inicio.js) */
.ini-piscina .ini-continuar-ico{ background: var(--blue); }

/* Huecos ahora en IMDECO */
.psc-huecos{ background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px 18px; margin: 4px 0 26px; }
.psc-hc-t{ display:flex; align-items:baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.psc-hc-t b{ font-size: 16px; }
.psc-hc-t span{ font-size: 12.5px; color: var(--muted-2); flex: 1; min-width: 0; }
.psc-hc-recarga{ border: 1px solid var(--line); background: var(--w04); color: var(--text); width: 30px; height: 30px; border-radius: 9px; cursor: pointer; font-size: 15px; line-height: 1; }
.psc-hc-recarga:disabled{ opacity: .4; }
.psc-lib{ display:flex; align-items:center; gap: 10px; padding: 9px 12px; margin-bottom: 8px; border-radius: 12px; font-size: 13.5px;
  background: color-mix(in srgb, var(--green) 12%, transparent); border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); animation: psc-entra .3s ease; }
.psc-lib span{ flex: 1; min-width: 0; }
.psc-lib b{ color: var(--green); }
.psc-lib small{ color: var(--muted); font-size: 12px; white-space: nowrap; }
.psc-lib-punto{ flex: none !important; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 var(--green); animation: psc-latido 1.6s infinite; }
@keyframes psc-latido{ 0%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 60%, transparent); } 70%{ box-shadow: 0 0 0 8px transparent; } 100%{ box-shadow: 0 0 0 0 transparent; } }
.psc-hc-tabs{ display:flex; gap: 6px; margin: 4px 0 12px; overflow-x: auto; }
.psc-hc-tab{ flex: 1; min-width: 0; display:flex; align-items:center; justify-content:center; gap: 6px; padding: 8px 10px; border-radius: 11px; border: 1px solid var(--line); background: var(--w02); color: var(--muted); font: inherit; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.psc-hc-tab small{ color: var(--muted-2); }
.psc-hc-tab em{ font-style: normal; font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--w08); color: var(--text); }
.psc-hc-tab.sel{ background: var(--text); color: var(--bg); border-color: var(--text); }
.psc-hc-tab.sel small{ color: var(--bg); opacity: .6; }
.psc-hc-tab.sel em{ background: var(--bg); color: var(--text); }
.psc-hc-horas{ display:grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.psc-hc-horas .skel{ display:block; border-radius: 12px; }
.psc-hc-hora{ display:flex; flex-direction:column; align-items:center; gap: 3px; padding: 10px 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--w02); color: var(--text); font: inherit; cursor: pointer; transition: border-color .15s; }
.psc-hc-hora b{ font-size: 15px; font-variant-numeric: tabular-nums; }
.psc-hc-hora span{ font-size: 11.5px; color: var(--muted-2); }
.psc-hc-hora.libre span{ color: var(--green); }
.psc-hc-hora.pocas span{ color: var(--amber); }
.psc-hc-hora.llena span{ color: var(--coral); }
.psc-hc-hora.pasada{ opacity: .35; cursor: default; }
.psc-hc-hora.recien{ border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent); }
.psc-hc-hora.sel{ border-color: var(--text); }
.psc-hc-det{ margin-top: 10px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.psc-hc-det b{ color: var(--text); font-weight: 600; }
.psc-hc-det a{ color: var(--blue); white-space: nowrap; }
@media (max-width: 640px){
  .psc-huecos{ padding: 14px; border-radius: 16px; }
  .psc-hc-horas{ grid-template-columns: repeat(3, 1fr); }
  .psc-hc-tab{ padding: 8px 6px; gap: 5px; font-size: 13px; }
  .psc-hc-tab small{ display: none; }
}
@media (prefers-reduced-motion: reduce){ .psc-lib-punto, .psc-lib{ animation: none; } }

/* Cogerla si se libera */
.psc-hc-hora{ position: relative; }
.psc-hc-marca{ font-style: normal; font-size: 10.5px; padding: 1px 6px; border-radius: 999px; margin-top: 2px; }
.psc-hc-marca.tuya{ background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); }
.psc-hc-marca.vigilo{ background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); }
.psc-hc-acc{ display:flex; flex-wrap: wrap; align-items:center; gap: 8px 12px; margin-top: 10px; }
.psc-hc-acc .psc-confirmar{ flex: 0 1 auto; padding: 10px 16px; white-space: normal; text-align: center; }
.psc-hc-acc small{ flex-basis: 100%; color: var(--muted-2); font-size: 12px; }
.psc-hc-ok{ color: var(--green); font-weight: 600; }
.psc-hc-vig{ color: var(--amber); font-weight: 600; }
.psc-chip.vigilando{ color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); }