/* ============================================================
   EYUB' - ecosistema.css
   Tickets · agenda · cotizador · portal del cliente · insights
   ============================================================ */


/* ============================================================
   1. FORMULARIOS DEL SITIO
   ============================================================ */

.formulario {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra);
  padding: clamp(1.4rem, 3.5vw, 2.6rem);
}
.formulario--ancho { max-width: 860px; margin-inline: auto; }

.campo__ayuda {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .5rem;
  font-size: .79rem;
  line-height: 1.5;
  color: var(--texto-ter);
}
.campo__ayuda .ico { flex-shrink: 0; color: var(--acento); }

.campo input[type="file"] {
  width: 100%;
  padding: .8rem;
  font-size: .86rem;
  color: var(--texto-sec);
  background: var(--fondo-alt);
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-sm);
}
.campo input[type="file"]::file-selector-button {
  margin-right: .8rem;
  padding: .5rem .9rem;
  font-size: .82rem;
  font-weight: 650;
  color: var(--acento);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-full);
  cursor: pointer;
}

.formulario__enviar {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.8rem;
}

.formulario__aviso {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-top: 1.3rem;
  font-size: .79rem;
  line-height: 1.55;
  color: var(--texto-ter);
}
.formulario__aviso .ico { flex-shrink: 0; margin-top: .15rem; color: var(--acento); }

/* Numerito de paso dentro de una leyenda */
.paso-num {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  margin-right: .55rem;
  font-family: var(--fuente-titulo);
  font-size: .8rem;
  font-weight: 800;
  color: #fff;
  background: var(--azul-corporativo);
  border-radius: 50%;
}

.campo--opciones { border: 0; padding: 0; margin-bottom: 1.9rem; }
.campo--opciones legend {
  display: flex;
  align-items: center;
  margin-bottom: .9rem;
  padding: 0;
  font-family: var(--fuente-titulo);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--texto);
}
.campo--opciones legend small {
  margin-left: .4rem;
  font-family: var(--fuente-texto);
  font-size: .8rem;
  font-weight: 500;
  color: var(--texto-ter);
}


/* ---------- Tarjetas seleccionables ---------- */

.opciones-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: .65rem;
}
.opciones-tarjetas--4 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.opcion-tarjeta { position: relative; display: block; cursor: pointer; }
.opcion-tarjeta input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.opcion-tarjeta > span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .45rem;
  height: 100%;
  padding: .95rem 1rem;
  font-size: .89rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--texto-sec);
  background: var(--superficie);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-sm);
  transition: all var(--rapido) var(--ease);
}
.opcion-tarjeta > span .ico { color: var(--acento); }
.opcion-tarjeta:hover > span { border-color: var(--borde-fuerte); transform: translateY(-2px); }

.opcion-tarjeta input:checked + span {
  color: var(--azul-800);
  background: var(--azul-050);
  border-color: var(--azul-interactivo);
  box-shadow: 0 0 0 3px rgba(1, 28, 89, .14);
}
.opcion-tarjeta input:focus-visible + span {
  outline: 2px solid var(--azul-interactivo);
  outline-offset: 2px;
}

.opcion-tarjeta__monto {
  font-size: .76rem;
  font-weight: 700;
  color: var(--texto-ter);
}
.opcion-tarjeta input:checked + span .opcion-tarjeta__monto { color: var(--azul-600); }


/* ---------- Caja de ayuda lateral ---------- */

.ayuda-caja {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.8rem;
  padding: 1.2rem 1.4rem;
  background: var(--fondo-alt);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.ayuda-caja > .ico { flex-shrink: 0; color: var(--acento); }
.ayuda-caja > div { flex: 1; min-width: 200px; }
.ayuda-caja strong { display: block; font-size: .95rem; font-weight: 700; }
.ayuda-caja p { font-size: .85rem; color: var(--texto-sec); }


/* ============================================================
   2. TICKETS
   ============================================================ */

/* ---- Tira de estados en la pagina de soporte ---- */
.ticket-estados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: .8rem;
  margin-bottom: 2.6rem;
}
.ticket-estados__paso {
  position: relative;
  padding: 1.1rem 1.1rem 1.1rem 1.2rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  border-top: 3px solid var(--azul-200);
}
.ticket-estados__paso:last-child { border-top-color: var(--whatsapp); }
.ticket-estados__ico {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  margin-bottom: .5rem;
  color: var(--acento);
  background: var(--azul-050);
  border-radius: 10px;
}
.ticket-estados__paso strong { display: block; font-size: .92rem; font-weight: 700; }
.ticket-estados__paso small  { font-size: .78rem; line-height: 1.45; color: var(--texto-ter); }


/* ---- Confirmacion de algo recien creado ---- */
.ticket-nuevo {
  text-align: center;
  padding: clamp(1.8rem, 4vw, 3rem);
  background: var(--superficie);
  border: 1px solid rgba(37, 211, 102, .34);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra);
}
.ticket-nuevo__ico {
  display: inline-grid;
  place-items: center;
  width: 62px; height: 62px;
  margin-bottom: 1rem;
  color: #fff;
  background: linear-gradient(135deg, #25D366, #12A54B);
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(37, 211, 102, .34);
}
.ticket-nuevo h2 { margin-bottom: .5rem; }

.ticket-nuevo__codigos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
  margin: 1.6rem 0 1rem;
}
.ticket-nuevo__codigos > div {
  flex: 1;
  min-width: 180px;
  padding: 1rem 1.2rem;
  background: var(--fondo-alt);
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-sm);
}
.ticket-nuevo__codigos small {
  display: block;
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--texto-ter);
}
.ticket-nuevo__codigos strong {
  display: block;
  margin-top: .2rem;
  font-family: var(--fuente-titulo);
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--azul-800);
}
.ticket-nuevo__nota {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .84rem;
  color: var(--texto-sec);
}
.ticket-nuevo__nota .ico { color: var(--acento); }


/* ---- Ficha del ticket ---- */
.ticket-ficha {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.ticket-ficha__cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: clamp(1.3rem, 3vw, 2rem);
  background: var(--fondo-alt);
  border-bottom: 1px solid var(--borde);
}
.ticket-ficha__codigo {
  display: inline-block;
  margin-bottom: .35rem;
  font-family: var(--fuente-titulo);
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--acento);
}
.ticket-ficha__cabeza h2 { font-size: clamp(1.3rem, 2.6vw, 1.75rem); }
.ticket-ficha__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .5rem;
  font-size: .82rem;
  color: var(--texto-ter);
}
.ticket-ficha__meta .ico { color: var(--acento); }

/* Chip de estado */
.ticket-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .85rem;
  font-size: .79rem;
  font-weight: 700;
  white-space: nowrap;
  border-radius: var(--radio-full);
  border: 1px solid transparent;
}
.ticket-chip--recibido   { background: rgba(18,107,255,.10);  color: var(--azul-800); border-color: rgba(18,107,255,.26); }
.ticket-chip--asignado   { background: rgba(18,107,255,.14);  color: var(--azul-800); border-color: rgba(18,107,255,.34); }
.ticket-chip--proceso    { background: rgba(245,158,11,.14);  color: #92620A;         border-color: rgba(245,158,11,.34); }
.ticket-chip--revision   { background: rgba(139,92,246,.14);  color: #6A3BD6;         border-color: rgba(139,92,246,.32); }
.ticket-chip--finalizado { background: rgba(37,211,102,.14);  color: #0C6B33;         border-color: rgba(37,211,102,.34); }
.ticket-chip--cerrado    { background: var(--superficie-2);   color: var(--texto-ter);border-color: var(--borde); }

/* Barra de avance */
.ticket-avance { padding: clamp(1.3rem, 3vw, 2rem); border-bottom: 1px solid var(--borde); }

.ticket-avance__barra {
  height: 7px;
  background: var(--superficie-2);
  border-radius: var(--radio-full);
  overflow: hidden;
}
.ticket-avance__barra span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--azul-corporativo), var(--azul-interactivo));
  border-radius: var(--radio-full);
  transition: width var(--lento) var(--ease-out);
}

.ticket-avance__pasos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .3rem;
  margin-top: 1.1rem;
}
.ticket-avance__pasos li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  text-align: center;
}
.ticket-avance__punto {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  color: var(--texto-ter);
  background: var(--superficie-2);
  border: 1.5px solid var(--borde);
  border-radius: 50%;
  transition: all var(--normal) var(--ease);
}
.ticket-avance__pasos li.hecho .ticket-avance__punto {
  color: #fff;
  background: var(--azul-interactivo);
  border-color: var(--azul-interactivo);
}
.ticket-avance__pasos li.actual .ticket-avance__punto {
  box-shadow: 0 0 0 4px rgba(1, 28, 89, .18);
}
.ticket-avance__texto { font-size: .72rem; font-weight: 600; color: var(--texto-ter); line-height: 1.3; }
.ticket-avance__pasos li.hecho .ticket-avance__texto { color: var(--texto-sec); }
.ticket-avance__pasos li.actual .ticket-avance__texto { color: var(--azul-800); font-weight: 750; }

.ticket-avance__nota {
  margin-top: 1rem;
  font-size: .87rem;
  color: var(--texto-sec);
  text-align: center;
}

/* Bloques de contenido */
.ticket-bloque { padding: clamp(1.3rem, 3vw, 2rem); border-bottom: 1px solid var(--borde); }
.ticket-bloque h4 {
  margin-bottom: .8rem;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--texto-ter);
}
.ticket-bloque p { color: var(--texto-sec); font-size: .94rem; }

.ticket-dato {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  margin-top: .7rem;
  font-size: .88rem;
}
.ticket-dato .ico { color: var(--acento); flex-shrink: 0; transform: translateY(2px); }
.ticket-dato strong { color: var(--texto); font-weight: 650; }

/* Adjuntos */
.ticket-adjuntos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .7rem;
}
.ticket-adjunto {
  display: block;
  overflow: hidden;
  background: var(--fondo-alt);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  transition: all var(--rapido) var(--ease);
}
.ticket-adjunto:hover { border-color: var(--borde-fuerte); transform: translateY(-2px); }
.ticket-adjunto img { width: 100%; height: 84px; object-fit: cover; }
.ticket-adjunto__ico {
  display: grid;
  place-items: center;
  height: 84px;
  color: var(--acento);
}
.ticket-adjunto small {
  display: block;
  padding: .45rem .55rem;
  font-size: .72rem;
  color: var(--texto-ter);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Historial */
.ticket-historial { position: relative; padding-left: 1.4rem; }
.ticket-historial::before {
  content: '';
  position: absolute;
  left: 5px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--borde);
}
.ticket-historial__item { position: relative; padding-bottom: 1.2rem; }
.ticket-historial__item:last-child { padding-bottom: 0; }
.ticket-historial__punto {
  position: absolute;
  left: -1.4rem; top: 6px;
  width: 12px; height: 12px;
  background: var(--azul-interactivo);
  border: 2px solid var(--fondo);
  border-radius: 50%;
}
.ticket-historial__item--cliente  .ticket-historial__punto { background: var(--texto-ter); }
.ticket-historial__item--estado   .ticket-historial__punto { background: var(--azul-corporativo); }
.ticket-historial__item p     { font-size: .92rem; color: var(--texto-sec); }
.ticket-historial__item small { font-size: .76rem; color: var(--texto-ter); }

.ticket-ficha__pie {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  padding: clamp(1.3rem, 3vw, 2rem);
  background: var(--fondo-alt);
}


/* ============================================================
   3. AGENDA
   ============================================================ */

.agenda-dias {
  display: flex;
  gap: .55rem;
  overflow-x: auto;
  padding-bottom: .6rem;
  margin-bottom: 1.2rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.agenda-dia { flex: 0 0 auto; cursor: pointer; scroll-snap-align: start; }
.agenda-dia input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.agenda-dia > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  min-width: 66px;
  padding: .7rem .6rem;
  background: var(--superficie);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-sm);
  transition: all var(--rapido) var(--ease);
}
.agenda-dia small  { font-size: .7rem; font-weight: 600; color: var(--texto-ter); text-transform: capitalize; }
.agenda-dia strong { font-family: var(--fuente-titulo); font-size: 1.25rem; font-weight: 800; color: var(--texto); }
.agenda-dia:hover > span { border-color: var(--borde-fuerte); }
.agenda-dia input:checked + span {
  background: var(--azul-corporativo);
  border-color: var(--azul-corporativo);
  box-shadow: 0 8px 20px rgba(11, 61, 145, .26);
}
.agenda-dia input:checked + span small,
.agenda-dia input:checked + span strong { color: #fff; }
.agenda-dia input:focus-visible + span { outline: 2px solid var(--azul-interactivo); outline-offset: 2px; }

.agenda-horas { display: flex; flex-wrap: wrap; gap: .5rem; }
.agenda-hora { cursor: pointer; }
.agenda-hora input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.agenda-hora > span {
  display: inline-block;
  padding: .55rem 1.05rem;
  font-size: .88rem;
  font-weight: 650;
  color: var(--texto-sec);
  background: var(--superficie);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-full);
  transition: all var(--rapido) var(--ease);
}
.agenda-hora:hover > span { border-color: var(--borde-fuerte); }
.agenda-hora input:checked + span {
  color: #fff;
  background: var(--azul-interactivo);
  border-color: var(--azul-interactivo);
}
.agenda-hora input:focus-visible + span { outline: 2px solid var(--azul-interactivo); outline-offset: 2px; }


/* ============================================================
   4. COTIZADOR
   ============================================================ */

.cotiza-opcion {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.3rem 1.5rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
  transition: all var(--normal) var(--ease);
}
.cotiza-opcion:hover {
  border-color: var(--borde-fuerte);
  transform: translateY(-3px);
  box-shadow: var(--sombra);
}
.cotiza-opcion__ico {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  flex-shrink: 0;
  color: var(--acento);
  background: var(--azul-050);
  border-radius: 16px;
}
.cotiza-opcion > span:nth-child(2) { flex: 1; min-width: 0; }
.cotiza-opcion strong { display: block; font-family: var(--fuente-titulo); font-size: 1.05rem; font-weight: 700; }
.cotiza-opcion small  { display: block; font-size: .85rem; color: var(--texto-sec); line-height: 1.5; }
.cotiza-opcion__flecha { color: var(--texto-ter); flex-shrink: 0; transition: transform var(--normal) var(--ease); }
.cotiza-opcion:hover .cotiza-opcion__flecha { transform: translateX(4px); color: var(--acento); }

.cotizador {
  display: grid;
  grid-template-columns: 1fr 320px;
  align-items: start;
  gap: clamp(1.4rem, 3vw, 2.6rem);
}
.cotizador > *:not(.cotizador__pasos):not(.cotizador__resumen) { grid-column: 1; }
.cotizador__pasos  { grid-column: 1; }
.cotizador__resumen {
  grid-column: 2;
  grid-row: 1 / span 30;
  position: sticky;
  top: calc(var(--nav-alto) + 1.2rem);
  padding: 1.5rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.cotizador__total { text-align: center; padding-bottom: 1rem; border-bottom: 1px solid var(--borde); }
.cotizador__total small {
  display: block;
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--texto-ter);
}
.cotizador__total strong {
  display: block;
  margin: .3rem 0 .2rem;
  font-family: var(--fuente-titulo);
  font-size: 2rem;
  font-weight: 800;
  color: var(--azul-800);
}
.cotizador__total span { font-size: .76rem; color: var(--texto-ter); }

.cotizador__lineas { margin-top: 1rem; display: grid; gap: .5rem; }
.cotizador__lineas li {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  font-size: .81rem;
  color: var(--texto-sec);
  line-height: 1.4;
}
.cotizador__lineas li span:last-child { font-weight: 650; white-space: nowrap; color: var(--texto); }

/*
   En celular el resumen deja de ser una columna y se convierte en
   una barra compacta pegada abajo, por encima de la barra de la
   aplicación. El desglose se lee al final del formulario, no aquí:
   en una pantalla pequeña taparía las opciones que hay que elegir.
*/
@media (max-width: 940px) {
  .cotizador { grid-template-columns: 1fr; }
  .cotizador > * { grid-column: 1 !important; }

  .cotizador__resumen {
    grid-row: auto;
    position: sticky;
    top: auto;
    bottom: calc(var(--appbar-alto, 62px) + env(safe-area-inset-bottom, 0px) + .5rem);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .8rem 1.1rem;
    border-radius: var(--radio);
    box-shadow: var(--sombra-lg);
  }

  .cotizador__total {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
    text-align: left;
    padding-bottom: 0;
    border-bottom: 0;
  }
  .cotizador__total strong { margin: 0; font-size: 1.45rem; }
  .cotizador__total span   { display: none; }

  .cotizador__lineas { display: none; }
}

@media (min-width: 941px) {
  /* En escritorio hay espacio de sobra para el desglose completo */
  .cotizador__lineas { display: grid; }
}


/* ============================================================
   5. PORTAL DEL CLIENTE
   ============================================================ */

.portal-acceso {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  padding: clamp(1.2rem, 3vw, 2rem);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra);
}
.portal-acceso__form { flex: 1; min-width: 260px; }
.portal-acceso__form .campo { margin-bottom: 0; }
.portal-acceso__fila { display: flex; gap: .6rem; flex-wrap: wrap; }
.portal-acceso__fila input { flex: 1; min-width: 200px; }
.portal-acceso__salir {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--texto-ter);
}
.portal-acceso__salir:hover { color: var(--marca); }

.portal-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .8rem;
  margin: 2rem 0;
}
.portal-resumen__item {
  text-align: center;
  padding: 1.3rem 1rem;
  background: var(--fondo-alt);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.portal-resumen__item .ico { color: var(--acento); margin-inline: auto; }
.portal-resumen__item strong {
  display: block;
  margin: .5rem 0 .1rem;
  font-family: var(--fuente-titulo);
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--texto);
}
.portal-resumen__item small { font-size: .8rem; color: var(--texto-ter); }

.portal-seccion { margin-top: 2.4rem; }
.portal-seccion h3 {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}
.portal-seccion h3 .ico { color: var(--acento); }

.portal-lista { display: grid; gap: .65rem; }
.portal-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.2rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  transition: all var(--rapido) var(--ease);
}
a.portal-item:hover { border-color: var(--borde-fuerte); transform: translateX(3px); }
.portal-item__codigo {
  font-family: var(--fuente-titulo);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .07em;
  color: var(--acento);
  white-space: nowrap;
}
.portal-item__cuerpo { flex: 1; min-width: 180px; }
.portal-item__cuerpo strong { display: block; font-size: .95rem; font-weight: 650; }
.portal-item__cuerpo small  { font-size: .79rem; color: var(--texto-ter); }


/* ============================================================
   6. INSIGHTS
   ============================================================ */

.insights-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2rem;
}
.chip--activo {
  color: #fff;
  background: var(--azul-corporativo);
  border-color: var(--azul-corporativo);
}
.chip small { opacity: .65; margin-left: .3rem; }

.insignia--suave {
  background: var(--azul-050);
  color: var(--azul-800);
  border-color: rgba(1, 28, 89, .22);
}

.articulo-tarjeta {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
  transition: all var(--normal) var(--ease);
}
.articulo-tarjeta:hover {
  border-color: var(--borde-fuerte);
  transform: translateY(-4px);
  box-shadow: var(--sombra);
}
.articulo-tarjeta__foto { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.articulo-tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; }
.articulo-tarjeta__cuerpo {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  flex: 1;
  padding: 1.3rem 1.4rem 1.1rem;
}
.articulo-tarjeta__cuerpo > strong {
  font-family: var(--fuente-titulo);
  font-size: 1.08rem;
  font-weight: 750;
  line-height: 1.35;
}
.articulo-tarjeta__cuerpo > small { font-size: .87rem; color: var(--texto-sec); line-height: 1.55; }
.articulo-tarjeta__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-top: auto;
  padding-top: .9rem;
  font-size: .76rem;
  color: var(--texto-ter);
  border-top: 1px solid var(--borde);
}
.articulo-tarjeta__pie .ico { color: var(--texto-ter); }

.articulo__meta {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  font-size: .84rem;
  color: var(--texto-ter);
}
.articulo__meta .ico { color: var(--acento); }

.articulo__cuerpo { max-width: var(--ancho-texto); }
.articulo__cuerpo p {
  margin-bottom: 1.3rem;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--texto-sec);
}

.articulo__pie {
  margin-top: 2.6rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--borde);
}
.articulo__pie p { margin-bottom: 1.1rem; color: var(--texto-sec); }


/* ============================================================
   7. VACANTES
   ============================================================ */

.vacantes { display: grid; gap: 1rem; }
.vacante {
  padding: 1.5rem 1.7rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
  transition: all var(--normal) var(--ease);
}
.vacante:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra); }
.vacante__cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .8rem;
}
.vacante__cabeza h4 { font-size: 1.15rem; }
.vacante__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1rem;
  margin-top: .4rem;
  font-size: .8rem;
  color: var(--texto-ter);
}
.vacante__meta span { display: inline-flex; align-items: center; gap: .3rem; }
.vacante__meta .ico { color: var(--acento); }
.vacante p { color: var(--texto-sec); font-size: .93rem; }
.vacante__requisitos {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  margin-top: .8rem;
  padding-top: .8rem;
  font-size: .84rem !important;
  color: var(--texto-ter) !important;
  border-top: 1px solid var(--borde);
}
.vacante__requisitos .ico { flex-shrink: 0; margin-top: .2rem; color: var(--whatsapp); }


/* ============================================================
   8. AJUSTES RESPONSIVOS
   ============================================================ */

@media (max-width: 620px) {
  .ticket-avance__pasos { grid-template-columns: repeat(5, 1fr); gap: .15rem; }
  .ticket-avance__texto { font-size: .62rem; }
  .ticket-ficha__cabeza { flex-direction: column; }
  .opciones-tarjetas { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .formulario__enviar .btn { width: 100%; justify-content: center; }
}


/* Resumen de resultados del buscador */
.buscador__resumen {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: 1.4rem;
  font-size: .89rem;
  color: var(--texto-sec);
}
.buscador__resumen .ico { color: var(--whatsapp); flex-shrink: 0; }
.buscador__resumen strong { color: var(--texto); }


/* ============================================================
   EL NAVEGADOR DE FECHAS  ·  agenda
   ------------------------------------------------------------
   Antes eran doce fichas en una fila con overflow-x y nada mas.
   A pantalla ancha entraban justas, pegadas al borde de la caja
   -parecia que se salian-; al estrecharse la ventana se cortaban
   de verdad, y lo unico que avisaba era una barra de desplazamiento
   fina que en muchos equipos ni llega a dibujarse.

   Ahora hay cabecera con el mes, dos mandos, barra de avance y un
   difuminado en los bordes. El difuminado es la pieza que hace el
   trabajo: una ficha que se desvanece dice "hay mas" mejor que
   cualquier flecha, y las flechas estan igualmente para quien
   prefiera pulsar.
   ============================================================ */
/* Los navegadores le ponen de serie min-inline-size: min-content a
   todo <fieldset>, y eso no hay forma de anularlo por herencia: el
   campo crece hasta caber los treinta dias -2281 px- en vez de
   dejar que la tira se desplace dentro. Es el fallo por el que los
   dias se salian del recuadro. Vale para cualquier fieldset del
   sitio, no solo para este. */
.campo--opciones,
fieldset.campo { min-width: 0; }

.dias { margin-bottom: 1.3rem; }

.dias__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .7rem;
}
.dias__mes {
  margin: 0;
  font-family: var(--fuente-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-ter);
}

.dias__mando { display: flex; gap: .4rem; }
.dias__flecha {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  color: var(--texto-sec);
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  cursor: pointer;
  transition: all var(--rapido) var(--ease);
}
.dias__flecha:first-child { rotate: 180deg; }
.dias__flecha:hover:not(:disabled) {
  color: var(--texto);
  border-color: var(--borde-fuerte);
}
.dias__flecha:disabled { opacity: .3; cursor: default; }
.dias__flecha:focus-visible {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(224, 27, 36, .2);
}

/* --- La pista --- */
.dias__pista {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  padding: 2px 0;
  /* La barra del sistema sobra: ya hay una propia debajo. */
  scrollbar-width: none;
  -ms-overflow-style: none;

  /* El difuminado de los bordes. Se apaga por su lado cuando ya no
     queda nada que ver, para no fingir que hay mas. */
  --velo-izq: 0px;
  --velo-der: 26px;
  mask-image: linear-gradient(to right,
    transparent 0, #000 var(--velo-izq),
    #000 calc(100% - var(--velo-der)), transparent 100%);
}
.dias__pista::-webkit-scrollbar { display: none; }

@media (hover: hover) and (pointer: fine) {
  .dias__pista { cursor: grab; }
  .dias--agarrada .dias__pista { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
  .dias--agarrada .dia { user-select: none; }
}

/* --- La ficha de cada dia --- */
.dia { flex: 0 0 auto; cursor: pointer; scroll-snap-align: start; }
.dia input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.dia__caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  min-width: 68px;
  padding: .7rem .6rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  transition: all var(--rapido) var(--ease);
}
.dia__semana,
.dia__mes {
  font-family: var(--fuente-mono);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-ter);
}
.dia__n {
  font-family: var(--fuente-titulo);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.dia:hover .dia__caja { border-color: var(--borde-fuerte); }

/* El dia elegido va del color del papel contrario: sobre azul, en
   blanco; sobre blanco, en azul. Es la marca mas clara que hay sin
   gastar el rojo, que en esta pagina ya tiene dueno. */
.dia input:checked + .dia__caja {
  background: var(--texto);
  border-color: var(--texto);
}
.dia input:checked + .dia__caja .dia__n,
.dia input:checked + .dia__caja .dia__semana,
.dia input:checked + .dia__caja .dia__mes { color: var(--fondo); }

.dia input:focus-visible + .dia__caja {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
}

/* La primera ficha de un mes nuevo lleva su filete: al recorrer
   cinco semanas se ve donde cambia el mes sin leer nada. */
.dia--abre-mes { position: relative; margin-left: .55rem; }
.dia--abre-mes::before {
  content: '';
  position: absolute;
  left: -.55rem; top: 12%; bottom: 12%;
  width: 1px;
  background: var(--borde-fuerte);
}
.dias__pista > .dia--abre-mes:first-child { margin-left: 0; }
.dias__pista > .dia--abre-mes:first-child::before { display: none; }

/* --- La barra de avance --- */
.dias__barra {
  position: relative;
  height: 2px;
  margin-top: .8rem;
  background: var(--borde);
}
.dias__barra span {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--desde, 0%);
  width: var(--ancho, 30%);
  background: var(--marca);
  transition: left .2s var(--ease), width .2s var(--ease);
}
/* Si caben todos, sobra todo el aparato */
.dias--completa .dias__barra,
.dias--completa .dias__mando { display: none; }

/* --- Sobre secciones azules --- */
.inverso .dia__caja {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
}
.inverso .dia:hover .dia__caja { border-color: rgba(255, 255, 255, .38); }
.inverso .dia input:checked + .dia__caja {
  background: #FFFFFF;
  border-color: #FFFFFF;
}
.inverso .dia input:checked + .dia__caja .dia__n,
.inverso .dia input:checked + .dia__caja .dia__semana,
.inverso .dia input:checked + .dia__caja .dia__mes { color: var(--azul-950); }
.inverso .dias__flecha { border-color: rgba(255, 255, 255, .22); }
.inverso .dias__flecha:hover:not(:disabled) { border-color: rgba(255, 255, 255, .5); }
.inverso .dias__barra { background: rgba(255, 255, 255, .16); }

@media (prefers-reduced-motion: reduce) {
  .dias__pista { scroll-behavior: auto; }
  .dias__barra span { transition: none; }
}