/* CRC Citas v2 - Staging */

.crc-citas-v2 {
  padding: 16px;
  border: 1px solid #ccc;
  margin: 16px 0;
}

.crc-citas-v2__title {
  margin: 0 0 12px 0;
}

.crc-citas-v2__notice {
  padding: 12px;
  background: #f7f7f7;
  border: 1px dashed #999;
}

#crc-citas-v2-root {
  margin-top: 16px;
}
/* Paso 2.3 (ajuste): look mas profesional + no disponibles mas oscuros
   Colores corporativos:
   - Pantone 221 (granate): #9D2235
   - Pantone 425 (gris):    #54585A
*/

:root{
  --crc-primary: #9D2235;       /* Pantone 221 */
  --crc-primary-2: #7f1b2b;     /* Pantone 221 oscuro para hover */
  --crc-gray: #54585A;          /* Pantone 425 */

  --crc-bg: #f4f5f6;
  --crc-card: #ffffff;
  --crc-text: #1f2933;
  --crc-muted: #6b7280;

  --crc-disabled-bg: #dde1e4;   /* no disponible: visible */
  --crc-disabled-text: #7b848d;

  --crc-border: rgba(0,0,0,0.12);
  --crc-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* Contenedor general del calendario */
.crc-cal{
  margin-top: 16px;
  background: var(--crc-card);
  border: 1px solid var(--crc-border);
  border-radius: 14px;
  box-shadow: var(--crc-shadow);
  overflow: hidden;
}

/* Cabecera tipo tarjeta */
.crc-cal__header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding: 14px 14px;
  background: linear-gradient(180deg, var(--crc-bg), #ffffff);
  border-bottom: 1px solid var(--crc-border);
}

.crc-cal__title{
  font-weight: 800;
  letter-spacing: 0.2px;
  color: var(--crc-text);
}

/* Botones nav */
.crc-cal__nav{
  display:flex;
  gap:10px;
}

.crc-cal__nav-btn{
  border: 1px solid rgba(157,34,53,0.25);
  border-radius: 10px;
  padding: 8px 12px;
  background: #ffffff;
  cursor:pointer;
  line-height:1.2;
  font-weight: 700;
  color: var(--crc-primary);
  transition: transform 0.05s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.crc-cal__nav-btn:hover{
  border-color: rgba(157,34,53,0.55);
  box-shadow: 0 6px 16px rgba(157,34,53,0.12);
  transform: translateY(-1px);
}

/* Barra dias semana: contraste alto para que se vea claro */
.crc-cal__weekdays{
  display:grid;
  grid-template-columns: repeat(7,1fr);
  gap: 8px;
  padding: 10px 14px;
  background: var(--crc-gray); /* Pantone 425 */
}

.crc-cal__weekday{
  text-align:center;
  font-weight: 800;
  font-size: 13px;
  color: #ffffff;
  opacity: 0.95;
}

/* Grid dias */
.crc-cal__grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  padding: 14px 14px 16px 14px;
  background: #ffffff;
}

/* Dia base */
.crc-cal__day{
  border: 1px solid var(--crc-border);
  border-radius: 12px;
  padding: 12px 0;
  text-align:center;
  background: #ffffff;
  cursor:pointer;
  color: var(--crc-text);
  transition: transform 0.05s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

/* Fuera de mes */
.crc-cal__day.is-out{
  background: transparent;
  color: rgba(31,41,51,0.25);
  border-color: rgba(0,0,0,0.06);
  cursor: default;
  opacity: 0.55;
}

/* No disponible: ENSOMBRECIDO de verdad */
.crc-cal__day.is-unavailable{
  background: var(--crc-disabled-bg);
  color: var(--crc-disabled-text);
  border-color: rgba(0,0,0,0.10);
  cursor: not-allowed;
  opacity: 1;
}

/* Disponible */
.crc-cal__day.is-available{
  font-weight: 800;
  border-color: rgba(84,88,90,0.35); /* gris corporativo */
  background: #ffffff;
}

.crc-cal__day.is-available:hover{
  border-color: rgba(157,34,53,0.75);
  box-shadow: 0 10px 22px rgba(157,34,53,0.12);
  transform: translateY(-1px);
}

/* Seleccionado: granate corporativo */
.crc-cal__day.is-selected{
  background: var(--crc-primary);
  color: #ffffff;
  border-color: rgba(0,0,0,0.0);
  box-shadow: 0 10px 22px rgba(157,34,53,0.22);
}

/* Panel horas */
.crc-hours{
  padding: 14px 14px 16px 14px;
  border-top: 1px solid var(--crc-border);
  background: linear-gradient(180deg, #ffffff, var(--crc-bg));
}

.crc-hours__hint{
  color: var(--crc-muted);
  font-weight: 600;
}

.crc-hours__title{
  font-weight: 900;
  margin-bottom: 12px;
  color: var(--crc-text);
}

.crc-hours__section{
  margin-bottom: 14px;
}

.crc-hours__section-title{
  font-weight: 900;
  margin-bottom: 8px;
  color: var(--crc-gray);
}

.crc-hours__list{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

.crc-hours__slot{
  border: 1px solid rgba(157,34,53,0.25);
  border-radius: 12px;
  padding: 10px 12px;
  background: #ffffff;
  cursor:pointer;
  line-height: 1.2;
  font-weight: 800;
  color: var(--crc-primary);
  transition: transform 0.05s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.crc-hours__slot:hover{
  border-color: rgba(157,34,53,0.60);
  box-shadow: 0 10px 22px rgba(157,34,53,0.10);
  transform: translateY(-1px);
}
/* Paso 2.4: hoy + mensaje + responsive */

.crc-cal__day.is-today{
  box-shadow: inset 0 0 0 2px rgba(157,34,53,0.35);
}

.crc-hours__message{
  margin: 8px 0 10px 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(84,88,90,0.20);
  background: rgba(244,245,246,0.9);
  font-weight: 700;
  color: var(--crc-gray);
}

/* Responsive: compactar un poco en pantallas estrechas */
@media (max-width: 520px){
  .crc-cal__grid{
    gap: 8px;
    padding: 12px;
  }

  .crc-cal__day{
    padding: 10px 0;
    border-radius: 10px;
  }

  .crc-hours__list{
    gap: 8px;
  }

  .crc-hours__slot{
    padding: 9px 10px;
    border-radius: 10px;
  }

  .crc-cal__nav-btn{
    padding: 7px 10px;
  }
}
/* Paso 2.5: selector de tipo de cita / modalidad */

.crc-step{
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.crc-step__title{
  font-weight: 900;
  color: var(--crc-text);
  margin-bottom: 10px;
}

.crc-step__options{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.crc-step__btn{
  border: 1px solid rgba(84,88,90,0.25);
  border-radius: 12px;
  padding: 10px 12px;
  background: #ffffff;
  cursor: pointer;
  font-weight: 900;
  color: var(--crc-gray);
  line-height: 1.2;
}

.crc-step__btn:hover{
  border-color: rgba(157,34,53,0.55);
  box-shadow: 0 10px 22px rgba(157,34,53,0.10);
  transform: translateY(-1px);
}

.crc-step__btn.is-active{
  border-color: rgba(157,34,53,0.85);
  background: rgba(157,34,53,0.07);
  color: var(--crc-primary);
}

.crc-step__btn.is-disabled{
  opacity: 0.6;
  cursor: not-allowed;
}

.crc-panel{
  margin-top: 14px;
}

.crc-form{
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  padding: 14px;
}

.crc-form__title{
  font-weight: 900;
  margin-bottom: 8px;
  color: var(--crc-text);
}

.crc-form__hint{
  color: var(--crc-muted);
  font-weight: 600;
  margin-bottom: 12px;
}

.crc-form__row{
  margin-bottom: 12px;
}

.crc-form__label{
  display: block;
  font-weight: 900;
  margin-bottom: 6px;
  color: var(--crc-gray);
}

.crc-form__field{
  width: 100%;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 600;
  background: #ffffff;
}

.crc-form__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.crc-form__btn{
  border: 1px solid rgba(157,34,53,0.25);
  border-radius: 12px;
  padding: 10px 12px;
  background: #ffffff;
  cursor: pointer;
  font-weight: 900;
  color: var(--crc-primary);
}

.crc-form__btn:hover{
  border-color: rgba(157,34,53,0.60);
  box-shadow: 0 10px 22px rgba(157,34,53,0.10);
  transform: translateY(-1px);
}

.crc-form__btn--secondary{
  border-color: rgba(84,88,90,0.25);
  color: var(--crc-gray);
}
/* Ajuste mobile: mas aire, menos estrecho y menos estres */

@media (max-width: 520px){
  /* que el calendario no parezca comprimido */
  .crc-cal__header{
    padding: 16px;
    gap: 10px;
  }

  .crc-cal__title{
    font-size: 16px;
  }

  .crc-cal__weekdays{
    padding: 10px 12px;
    gap: 10px;
  }

  .crc-cal__grid{
    padding: 14px 12px 16px 12px;
    gap: 12px; /* mas separacion entre dias */
  }

  .crc-cal__day{
    padding: 14px 0;      /* dia mas grande */
    border-radius: 12px;
    font-size: 15px;
  }

  /* botones nav mas comodos */
  .crc-cal__nav{
    gap: 8px;
  }

  .crc-cal__nav-btn{
    padding: 10px 12px;
    border-radius: 12px;
  }

  /* selector de tipo de cita: mas aire */
  .crc-step{
    padding: 14px 14px;
  }

  .crc-step__options{
    gap: 12px;
  }

  .crc-step__btn{
    padding: 12px 12px;
    border-radius: 14px;
    width: 100%; /* apila botones y evita estrechez visual */
    text-align: center;
  }

  /* formulario */
  .crc-form{
    padding: 16px;
  }

  .crc-form__actions{
    gap: 12px;
  }

  .crc-form__btn{
    width: 100%;
    padding: 12px 12px;
    border-radius: 14px;
  }

  /* horas: chips mas grandes y con mas separacion */
  .crc-hours{
    padding: 16px;
  }

  .crc-hours__list{
    gap: 12px;
  }

  .crc-hours__slot{
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 15px;
  }

  .crc-hours__message{
    padding: 12px 14px;
    border-radius: 14px;
  }
}
/* Ajuste: quitar sensacion de "caja que comprime" en movil */
@media (max-width: 520px){
  /* La caja exterior del shortcode */
  .crc-citas-v2{
    border: 0;
    box-shadow: none;
    background: transparent;

    /* mas aire */
    padding: 0;
    margin: 12px 0;
  }

  /* Los pasos/selector y formularios como tarjetas mas suaves */
  .crc-step,
  .crc-form{
    box-shadow: 0 8px 22px rgba(0,0,0,0.06);
    border-radius: 16px;
  }

  /* Evitar que todo parezca "encajonado" */
  .crc-step{
    margin-top: 12px;
  }

  /* El calendario ya es una tarjeta; lo hacemos mas protagonista */
  .crc-cal{
    border-radius: 16px;
  }
}
/* UX movil: mes centrado, anterior izquierda, siguiente derecha */
@media (max-width: 520px){
  .crc-cal__header{
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* izq / centro / der */
    align-items: center;
    gap: 10px;
  }

  /* Colocacion */
  .crc-cal__nav{
    display: contents; /* permite posicionar los 2 botones en las 3 columnas */
  }

  /* Primer boton (Anterior) a la izquierda */
  .crc-cal__nav-btn:first-child{
    grid-column: 1;
    justify-self: start;
  }

  /* Segundo boton (Siguiente) a la derecha */
  .crc-cal__nav-btn:last-child{
    grid-column: 3;
    justify-self: end;
  }

  /* Mes centrado */
  .crc-cal__title{
    grid-column: 2;
    justify-self: center;
    text-align: center;
    font-weight: 900;
  }
}
/* Paso 2.6: optimizacion movil tactil (target grande + claridad) */
@media (max-width: 520px){
  /* Dias: mas grandes y con mejor contraste */
  .crc-cal__day{
    min-height: 48px;          /* target tactil */
    padding: 14px 0;
    font-size: 16px;
  }

  /* Disponibles: un toque de "acento" corporativo sin fondo fuerte */
  .crc-cal__day.is-available{
    border-color: rgba(157,34,53,0.55);
    box-shadow: 0 2px 0 rgba(157,34,53,0.10);
  }

  /* No disponibles: aun mas claros visualmente */
  .crc-cal__day.is-unavailable{
    background: #d6dade;
    color: #6f7780;
  }

  /* Seleccionado: un pelin mas legible (en pantallas pequeñas) */
  .crc-cal__day.is-selected{
    box-shadow: 0 10px 22px rgba(157,34,53,0.28);
  }

  /* Horas: que parezcan chips grandes */
  .crc-hours__slot{
    min-height: 44px;
    padding: 12px 16px;
    font-size: 16px;
  }

  /* Mensaje: mas visible y respirado */
  .crc-hours__message{
    font-size: 15px;
    line-height: 1.3;
  }

  /* Selector de tipo: botones mas "premium" y tactiles */
  .crc-step__btn{
    min-height: 50px;
    font-size: 16px;
  }
}
/* Paso 2.7: panel confirmacion */

.crc-confirm{
  margin-top: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.10);
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.crc-confirm__title{
  font-weight: 900;
  margin-bottom: 10px;
  color: var(--crc-text);
}

.crc-confirm__detail{
  font-weight: 700;
  color: var(--crc-gray);
  line-height: 1.5;
  margin-bottom: 10px;
}

.crc-confirm__note{
  font-weight: 700;
  color: var(--crc-muted);
  margin-bottom: 12px;
}

.crc-confirm__actions{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

.crc-confirm__btn{
  border: 1px solid rgba(157,34,53,0.25);
  border-radius: 14px;
  padding: 12px 14px;
  background: #ffffff;
  cursor: pointer;
  font-weight: 900;
  color: var(--crc-primary);
  width: 100%;
}

.crc-confirm__btn--secondary{
  border-color: rgba(84,88,90,0.25);
  color: var(--crc-gray);
}
/* Info certificados */
.crc-info{
  margin-bottom: 14px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(84,88,90,0.25);
  background: #ffffff;
}

.crc-info__title{
  font-weight: 900;
  margin-bottom: 8px;
  color: var(--crc-text);
}

.crc-info__list{
  margin: 0 0 8px 18px;
  padding: 0;
  color: var(--crc-gray);
  font-weight: 600;
}

.crc-info__list li{
  margin-bottom: 6px;
}

.crc-info__note{
  font-weight: 700;
  color: var(--crc-primary);
}
/* Intro inicial cita previa */
.crc-intro{
  margin-top: 14px;
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f7f7f8);
  border: 1px solid rgba(0,0,0,0.08);
}

.crc-intro__title{
  font-weight: 900;
  margin-bottom: 8px;
  color: var(--crc-text);
}

.crc-intro__text{
  font-weight: 600;
  color: var(--crc-gray);
  line-height: 1.5;
  margin-bottom: 8px;
}

.crc-intro__note{
  font-weight: 700;
  color: var(--crc-primary);
}
/* ===== CRC Forms: Información adicional (estilo corporativo) ===== */

.crc-form__more {
  margin-top: 10px;
}

/* Botón desplegable */
.crc-form__more-btn {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #cfd8dc;
  background: #f5f7f8;
  color: #1e2d3b;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

/* Flecha */
.crc-form__more-btn::after {
  content: "▾";
  float: right;
  color: #607d8b;
}

/* Estado abierto */
.crc-form__more-btn[aria-expanded="true"] {
  background: #eef3f6;
  border-color: #b0c4d4;
}

.crc-form__more-btn[aria-expanded="true"]::after {
  content: "▴";
}

/* Panel interior */
.crc-form__more-panel {
  margin-top: 8px;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #d7e0e7;
  background: #ffffff;
}

/* Filas internas */
.crc-form__more-panel .crc-form__row {
  margin-top: 8px;
}

/* Ajuste móvil */
@media (max-width: 480px) {
  .crc-form__more-btn {
    font-size: 14px;
    padding: 12px;
  }
}
/* ============================
   UX móvil – Botones grandes
   ============================ */
@media (max-width: 520px) {

  /* Botones principales de formularios */
  .crc-form__btn,
  .crc-confirm__btn {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    padding: 14px 16px;
    border-radius: 8px;
    margin-bottom: 10px;
  }

  /* Botón secundario */
  .crc-form__btn--secondary,
  .crc-confirm__btn--secondary {
    opacity: 0.9;
  }

  /* Contenedor de acciones: que no queden en fila */
  .crc-form__actions,
  .crc-confirm__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Botones dentro del modal (baja laboral, etc.) */
  .crc-modal__actions button {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    padding: 14px 16px;
    border-radius: 8px;
  }
}
/* --- CRC Calendar: sombreado y bloqueo real (gana al tema Enfold) --- */
body .crc-citas-v2 .crc-cal .crc-cal__day.is-unavailable,
body .crc-citas-v2 .crc-cal .crc-cal__day[disabled],
body .crc-citas-v2 .crc-cal .crc-cal__day.is-out {
  opacity: 0.30 !important;
  filter: grayscale(1) !important;
  background: #f2f4f7 !important;
  border: 1px solid #e3e8ef !important;
  color: #6b7280 !important;
  cursor: not-allowed !important;
  pointer-events: none !important; /* esto es clave: no se puede clicar */
  box-shadow: none !important;
}

body .crc-citas-v2 .crc-cal .crc-cal__day.is-available {
  opacity: 1 !important;
  filter: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

body .crc-citas-v2 .crc-cal .crc-cal__day.is-selected {
  outline: 2px solid #111827 !important;
  outline-offset: 0 !important;
}