/* ============================================================================
   EL CALENDARIO · assets/calendario-campo.css (17 oct 2026, COO)
   ============================================================================
   Su JS: assets/calendario-campo.js (la cabecera dice cómo se usa). Hermano
   de assets/desplegable.css: mismo botón, misma caja, mismas filas. Va
   después de componentes.css: usa .caja, .btn, .btn-sm y los aros --filo-*.

   · El botón es un control de 40 px (--alto-control): escalón 37–60 →
     --bevel-sm, aro --filo-sm y foco --filo-foco-sm. Dentro de un `.control`
     (el dashboard) va sin caja propia, como el desplegable.
   · El calendario es una .caja de capa doble (contorno completo, nunca
     border + clip-path), fija en el <body> o dentro del diálogo modal.
   · Celdas de día y de año, flechas, títulos y opciones de hora miden
     32–36 px: escalón 31–36 → --bevel-compacto, --filo-compacto y
     --filo-foco-compacto. Las de mes miden 60: --bevel-sm y su aro.
   · Elegido: amarillo macizo con --sobre-amarillo, sin aro (lo macizo no
     lleva aro); su foco, el anillo oscuro por dentro. Hoy: texto amarillo y
     aro amarillo al 45 %. Fuera de min/max: --gris-2 y tachado (aria-disabled).
     Días de otro mes: --texto-3.
   · En ≤520 px, hoja abajo a todo el ancho (como el desplegable).
   ========================================================================== */

/* ── EL <input> ESCONDIDO ── sigue en el DOM (formularios, change, label). */
.cc-oculto{
  position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;
  overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;border:0!important;
  opacity:0!important;pointer-events:none!important;white-space:nowrap!important;flex:none!important;
}
.cc-envoltura{display:block;min-width:0;position:relative}
.cc-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ── EL BOTÓN ── */
.cc-boton{
  position:relative;display:flex;align-items:center;width:100%;min-width:0;box-sizing:border-box;
  height:var(--alto-control,2.5rem);padding:0 2.5rem 0 var(--esp-3,.75rem);margin:0;
  font:inherit;font-size:var(--tipo-cuerpo);font-weight:400;color:var(--texto-1);text-align:left;cursor:pointer;
  background:var(--velo-1,rgba(242,232,220,.045));border:0;clip-path:var(--bevel-sm);--filo-color:var(--line);
  box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color));transition:background .15s;
  font-variant-numeric:tabular-nums;
}
.cc-boton:hover{--filo-color:var(--texto-3)}
.cc-boton:focus-visible,.cc-boton[aria-expanded="true"]{outline:none;--filo-color:var(--yellow);background:var(--velo-2,rgba(242,232,220,.08))}
.cc-boton:disabled{cursor:not-allowed;color:var(--texto-3)}
@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  .cc-boton::after{content:'';position:absolute;inset:0;pointer-events:none;clip-path:var(--filo-sm);background:var(--filo-color)}
  .cc-boton:focus-visible::after,.cc-boton[aria-expanded="true"]::after{clip-path:var(--filo-foco-sm)}
}
.cc-valor{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-boton.es-vacio .cc-valor{color:var(--texto-3)}
.cc-icono{
  position:absolute;right:var(--esp-3,.75rem);top:50%;translate:0 -50%;width:1.125rem;height:1.125rem;
  color:var(--texto-3);pointer-events:none;transition:color .15s;
}
.cc-boton:focus-visible .cc-icono,.cc-boton[aria-expanded="true"] .cc-icono{color:var(--yellow)}

/* Dentro de un .control (dashboard): sin caja propia, la envoltura la pone. */
.control>.cc-boton{height:100%;flex:1;clip-path:none;background:transparent;box-shadow:none;transition:none}
.control>.cc-boton::after{display:none}
.control:has(>.cc-boton[aria-expanded="true"]),.control:has(>.cc-boton:focus-visible){--filo-color:var(--yellow);background:var(--velo-2,rgba(242,232,220,.08))}
@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  .control:has(>.cc-boton[aria-expanded="true"])::after,.control:has(>.cc-boton:focus-visible)::after{clip-path:var(--filo-foco-sm)}
}
/* En el asistente a pantalla completa, el campo es .as-campo. */
.cc-boton.as-campo{
  height:auto;min-height:3.5rem;clip-path:none;box-shadow:none;padding:1rem 2.75rem 1rem 1.1rem;
  background:var(--surface);border:1px solid var(--line);font-size:var(--tipo-entradilla);
}
.cc-boton.as-campo::after{display:none}
.cc-boton.as-campo:focus-visible,.cc-boton.as-campo[aria-expanded="true"]{border-color:var(--yellow);background:var(--surface)}

/* ── EL CALENDARIO ── */
.cc-pop{
  --cc-celda:2.25rem;                 /* 36 · celda de día y de año: escalón compacto */
  --cc-hueco:.125rem;
  --cc-vista:calc(1.5rem + 6 * var(--cc-celda) + 6 * var(--cc-hueco));   /* semana + 6 filas */
  position:fixed;z-index:1050;display:flex;flex-direction:column;gap:.75rem;box-sizing:border-box;
  padding:.75rem;overflow:auto;overscroll-behavior:contain;
  --caja-fondo:var(--surface-2);--filo-color:rgba(255,198,33,.45);
  animation:cc-entra .14s ease-out;
}
@keyframes cc-entra{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}
.cc-pop.cc-hoja{left:0;right:0;bottom:0;top:auto;width:100%;max-height:85dvh;animation-name:cc-sube;
  padding-bottom:calc(.75rem + env(safe-area-inset-bottom))}
@keyframes cc-sube{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
.cc-pop :focus{outline:none}

.cc-cuerpo{display:flex;gap:.75rem;align-items:stretch}
.cc-cal{display:flex;flex-direction:column;gap:.5rem;width:calc(7 * var(--cc-celda) + 6 * var(--cc-hueco))}

/* La cabecera: ‹ mes ▾ año ▾ › */
.cc-cabeza{display:flex;align-items:center;gap:.25rem;height:var(--btn-sm-alto,2rem)}
.cc-titulo{flex:1;display:flex;justify-content:center;gap:.125rem;min-width:0}
.cc-flecha,.cc-titulo-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box;
  height:var(--btn-sm-alto,2rem);margin:0;padding:0;border:0;cursor:pointer;font:inherit;
  color:var(--texto-2);background:transparent;clip-path:var(--bevel-compacto);--filo-color:transparent;
  transition:background .12s ease,color .12s ease;
}
.cc-flecha{width:var(--btn-sm-alto,2rem)}
.cc-flecha svg{width:1.25rem;height:1.25rem}
.cc-flecha[hidden]{display:inline-flex;visibility:hidden}
.cc-flecha:disabled{cursor:not-allowed;color:var(--gris-2)}
.cc-titulo-btn{gap:.25rem;padding:0 .5rem;font-size:var(--tipo-cuerpo);font-weight:600;color:var(--texto-1);white-space:nowrap;min-width:0}
.cc-titulo-btn span{overflow:hidden;text-overflow:ellipsis}
.cc-chev{width:1.125rem;height:1.125rem;flex:none;color:var(--texto-3);transition:rotate .15s ease}
.cc-titulo-btn[aria-pressed="true"]{color:var(--yellow)}
.cc-titulo-btn[aria-pressed="true"] .cc-chev{rotate:180deg;color:var(--yellow)}
.cc-flecha:not(:disabled):hover,.cc-titulo-btn:hover{background:rgba(242,232,220,.07);--filo-color:rgba(242,232,220,.25);color:var(--texto-1)}
.cc-flecha:focus-visible,.cc-titulo-btn:focus-visible{--filo-color:var(--yellow);color:var(--texto-1)}

/* Las rejillas: días, meses y años */
.cc-rejilla{display:flex;flex-direction:column;gap:var(--cc-hueco);height:var(--cc-vista)}
.cc-fila{display:grid;grid-template-columns:repeat(7,var(--cc-celda));gap:var(--cc-hueco)}
.cc-semana{height:1.5rem;align-items:center}
.cc-dsem{
  text-align:center;font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-3);line-height:1;padding-left:.14em;
}
.cc-celda{
  position:relative;display:grid;place-items:center;box-sizing:border-box;height:var(--cc-celda);
  font-size:var(--tipo-descripcion);font-weight:400;color:var(--texto-1);cursor:pointer;user-select:none;
  clip-path:var(--bevel-compacto);--filo-color:transparent;transition:background .12s ease,color .12s ease;
}
.cc-celda:hover{background:rgba(242,232,220,.07);--filo-color:rgba(242,232,220,.25)}
.cc-dia.es-fuera{color:var(--texto-3)}
.cc-celda[aria-current="date"]{color:var(--yellow);font-weight:600;--filo-color:rgba(255,198,33,.45)}
.cc-celda[aria-selected="true"]{background:var(--yellow);color:var(--sobre-amarillo);font-weight:600;--filo-color:transparent}
.cc-celda[aria-selected="true"]:hover{background:var(--yellow-alto)}
.cc-celda[aria-disabled="true"]{cursor:not-allowed;color:var(--gris-2);text-decoration:line-through;text-decoration-thickness:1px}
.cc-celda[aria-disabled="true"]:hover{background:transparent;--filo-color:transparent}
.cc-celda[aria-disabled="true"][aria-current="date"]{--filo-color:rgba(255,198,33,.25)}
.cc-celda[aria-disabled="true"][aria-selected="true"]{background:var(--gris-1);color:var(--gris-3)}
.cc-pop.es-teclado .cc-celda:focus{--filo-color:var(--yellow)}
.cc-pop.es-teclado .cc-celda[aria-selected="true"]:focus{--filo-color:var(--sobre-amarillo)}

.cc-meses .cc-fila{grid-template-columns:repeat(3,1fr);flex:1}
.cc-meses{gap:.25rem}
.cc-meses .cc-fila{gap:.25rem}
.cc-mes{height:auto;clip-path:var(--bevel-sm);font-weight:500}   /* 60 px de alto: escalón 37–60 */

.cc-anios{overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:.25rem}
.cc-anios .cc-fila{grid-template-columns:repeat(4,1fr);flex:none}
.cc-anio{font-variant-numeric:tabular-nums}

@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  .cc-celda::after,.cc-flecha::after,.cc-titulo-btn::after{content:'';position:absolute;inset:0;pointer-events:none;
    clip-path:var(--filo-compacto);background:var(--filo-color)}
  .cc-mes::after{clip-path:var(--filo-sm)}
  .cc-pop.es-teclado .cc-celda:focus::after,.cc-flecha:focus-visible::after,.cc-titulo-btn:focus-visible::after{clip-path:var(--filo-foco-compacto)}
  .cc-pop.es-teclado .cc-mes:focus::after{clip-path:var(--filo-foco-sm)}
}

/* Las horas: una columna por parte (hora, min, seg, a. m./p. m.) */
.cc-horas{display:flex;gap:.25rem;min-height:0}
.cc-datetime .cc-horas{padding-left:.75rem;box-shadow:inset 1px 0 0 var(--line)}   /* filete, sin clip-path */
.cc-col{display:flex;flex-direction:column;gap:.5rem;width:3.25rem;min-height:0}
.cc-col-p{width:3.75rem}
.cc-col-titulo{
  height:var(--btn-sm-alto,2rem);display:flex;align-items:center;justify-content:center;flex:none;
  font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3);
}
.cc-lista{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:var(--cc-hueco);
  height:var(--cc-vista);scroll-padding-block:.25rem;
}
.cc-time .cc-lista{height:calc(5 * var(--btn-sm-alto,2rem) + 4 * var(--cc-hueco))}
.cc-op{
  position:relative;display:grid;place-items:center;flex:none;height:var(--btn-sm-alto,2rem);
  font-size:var(--tipo-descripcion);font-variant-numeric:tabular-nums;color:var(--texto-1);cursor:pointer;user-select:none;
  clip-path:var(--bevel-compacto);--filo-color:transparent;transition:background .12s ease;
}
.cc-op:hover{background:rgba(242,232,220,.07);--filo-color:rgba(242,232,220,.25)}
.cc-op[aria-selected="true"]{background:var(--yellow);color:var(--sobre-amarillo);font-weight:600;--filo-color:transparent}
.cc-op[aria-disabled="true"]{cursor:not-allowed;color:var(--gris-2);text-decoration:line-through;text-decoration-thickness:1px}
.cc-op[aria-disabled="true"]:hover{background:transparent;--filo-color:transparent}
.cc-pop.es-teclado .cc-lista:focus .cc-op.es-activa{--filo-color:var(--yellow)}
.cc-pop.es-teclado .cc-lista:focus .cc-op.es-activa[aria-selected="true"]{--filo-color:var(--sobre-amarillo)}
@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  .cc-op::after{content:'';position:absolute;inset:0;pointer-events:none;clip-path:var(--filo-compacto);background:var(--filo-color)}
  .cc-pop.es-teclado .cc-lista:focus .cc-op.es-activa::after{clip-path:var(--filo-foco-compacto)}
}

/* El pie: Hoy · Borrar · [Listo] — una fila de botones del mismo alto. */
.cc-pie{display:flex;gap:.5rem;align-items:center;flex-wrap:nowrap}
.cc-pie .btn{white-space:nowrap}
.cc-pie .cc-listo{margin-left:auto}

/* ── LA HOJA (≤520 px) ── las celdas llenan el ancho; la hora va debajo. */
.cc-hoja .cc-cuerpo{flex-direction:column;align-items:stretch;max-width:26rem;width:100%;margin-inline:auto}
.cc-hoja .cc-cal{width:auto}
.cc-hoja .cc-fila{grid-template-columns:repeat(7,1fr)}
.cc-hoja .cc-meses .cc-fila{grid-template-columns:repeat(3,1fr)}
.cc-hoja .cc-anios .cc-fila{grid-template-columns:repeat(4,1fr)}
.cc-hoja .cc-horas{justify-content:center;padding-left:0;box-shadow:none}
.cc-hoja.cc-datetime .cc-horas{padding-top:.75rem;box-shadow:inset 0 1px 0 var(--line)}
.cc-hoja .cc-col{flex:1;max-width:5rem}
.cc-hoja .cc-lista{height:calc(5 * var(--btn-sm-alto,2rem) + 4 * var(--cc-hueco))}
.cc-hoja .cc-pie{max-width:26rem;width:100%;margin-inline:auto}
.cc-hoja .cc-pie .btn{flex:1}
.cc-hoja .cc-pie .cc-listo{margin-left:0;order:-1}

@media (prefers-reduced-motion: reduce){
  .cc-pop,.cc-pop.cc-hoja{animation:none}
  .cc-boton,.cc-icono,.cc-celda,.cc-op,.cc-flecha,.cc-titulo-btn,.cc-chev{transition:none}
}