/**
 * Kikoto Horarios - BEM Architecture (v2.0.0)
 * Professional implementation - Zero Bootstrap dependencies
 * Namespace: kh- (Kikoto Horarios)
 * Author: Kikotoferries.com
 */

/* =============================================================================
   CSS VARIABLES - Sistema de diseño centralizado
   ============================================================================= */
:root {
  /* Colores primarios */
  --kh-primary: #288CFC;
  --kh-primary-light: rgba(40, 140, 252, 0.12);
  --kh-primary-border: rgba(40, 140, 252, 0.22);
  --kh-primary-shadow: rgba(40, 140, 252, 0.25);
  
  /* Colores de texto */
  --kh-text: #212529;
  --kh-text-muted: rgba(33, 37, 41, 0.65);
  
  /* Colores de fondo */
  --kh-bg-white: #ffffff;
  --kh-bg-light: #f8f9fa;
  --kh-bg-pill: #f6f7fb;
  
  /* Bordes */
  --kh-border: rgba(0, 0, 0, 0.08);
  --kh-border-light: rgba(0, 0, 0, 0.06);
  
  /* Espaciados */
  --kh-space-xs: 8px;
  --kh-space-sm: 12px;
  --kh-space-md: 16px;
  --kh-space-lg: 18px;
  --kh-space-xl: 24px;
  
  /* Radios de borde */
  --kh-radius-sm: 16px;
  --kh-radius-md: 20px;
  --kh-radius-lg: 24px;
  --kh-radius-xl: 26px;
  --kh-radius-full: 999px;
  
  /* Sombras */
  --kh-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  --kh-shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.06);
  --kh-shadow-button: 0 10px 22px rgba(40, 140, 252, 0.25);
  
  /* Tipografía */
  --kh-font-size-label: 13px; /* Reducido de 14px */
  --kh-font-size-value: 18px; /* Reducido de 20px */
  --kh-font-weight-normal: 400; /* Reducido de 500 para menos negrita */
  --kh-font-weight-bold: 600; /* Reducido de 700 */
  --kh-font-weight-extrabold: 700; /* Reducido de 800 */
  
  /* Transiciones */
  --kh-transition: 0.18s ease;
}

/* =============================================================================
   RESET & BASE - Aislamiento total de estilos externos
   ============================================================================= */
.kh-widget {
  /* Reset completo para evitar herencias no deseadas */
  all: initial;
  
  /* Propiedades base del widget */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--kh-text);
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%; /* Forzar ancho completo */
  margin: 0 auto; /* Centrar el widget si el contenedor es más ancho */
}

.kh-widget *,
.kh-widget *::before,
.kh-widget *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* CRÍTICO: Forzar fondo transparente en inputs date - Sobrescribe cualquier tema */
.kh-widget input[type="date"],
.kh-widget .kh-pill__input,
.kh-widget .kh-pill input[type="date"] {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
}

/* =============================================================================
   CONTAINER - Card principal del widget
   ============================================================================= */
.kh-container {
  background: var(--kh-bg-white);
  border: 1px solid var(--kh-border);
  border-radius: var(--kh-radius-xl);
  box-shadow: var(--kh-shadow);
  padding: var(--kh-space-md);
}

@media (min-width: 768px) {
  .kh-container {
    padding: var(--kh-space-lg);
  }
}

/* =============================================================================
   FILTERS - Sección de filtros (top card)
   ============================================================================= */
.kh-filters {
  background: var(--kh-bg-light);
  border: 1px solid var(--kh-border-light);
  border-radius: var(--kh-radius-lg);
  padding: var(--kh-space-sm);
}

@media (min-width: 768px) {
  .kh-filters {
    padding: var(--kh-space-md);
  }
}

/* =============================================================================
   FILTERS RAIL - Layout responsivo
   ============================================================================= */

/* Mobile: Stack vertical */
.kh-filters__rail {
  display: flex;
  flex-direction: column;
  gap: var(--kh-space-sm);
  position: relative; /* Para que el swap se posicione respecto a este contenedor */
}

/* Desktop: Horizontal rail */
@media (min-width: 768px) {
  .kh-filters__rail {
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    position: relative;
  }
}

/* =============================================================================
   PILL - Componente de selector (Origen/Destino/Fecha)
   ============================================================================= */
.kh-pill {
  background: var(--kh-bg-pill);
  border: 1px solid var(--kh-border-light);
  border-radius: var(--kh-radius-md);
  padding: 10px 14px 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0; /* Permite que flex-shrink funcione */
}

/* Desktop: Pills más largos (altura) con menos padding horizontal */
@media (min-width: 768px) {
  .kh-pill {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 10px 2px;
  }
}

/* Label dentro del pill */
.kh-pill__label {
  font-size: var(--kh-font-size-label);
  font-weight: var(--kh-font-weight-extrabold);
  color: var(--kh-primary);
  line-height: 1.1;
  margin-bottom: 0px;
  display: block;
}

/* Icon dentro del label - OCULTAR SIEMPRE (no usar emojis) */
.kh-pill__icon {
  display: none;
}

/* Select dentro del pill */
.kh-pill__select {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  width: 100%;
  font-size: var(--kh-font-size-value);
  font-weight: var(--kh-font-weight-normal);
  color: var(--kh-text);
  line-height: 1.15;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.kh-pill__select:focus {
  outline: none !important;
  box-shadow: none;
}

/* Resaltar el pill completo cuando está enfocado (más sutil) */
.kh-pill:focus-within {
  box-shadow: 0 0 0 2px rgba(40, 140, 252, 0.12);
  border-color: rgba(40, 140, 252, 0.3);
}

.kh-pill__select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Input date dentro del pill */
.kh-pill__input,
.kh-pill input[type="date"],
input[type="date"].kh-pill__input {
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 0;
  margin: 0;
  width: 100%;
  font-size: var(--kh-font-size-value);
  font-weight: var(--kh-font-weight-normal);
  color: var(--kh-text);
  line-height: 1.15;
  font-family: inherit;
  cursor: pointer;
}

.kh-pill__input:focus,
.kh-pill input[type="date"]:focus,
input[type="date"].kh-pill__input:focus {
  outline: none !important;
  box-shadow: none;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
}

/* Forzar también en estados hover y active */
.kh-pill__input:hover,
.kh-pill__input:active,
.kh-pill input[type="date"]:hover,
.kh-pill input[type="date"]:active {
  background: transparent !important;
  background-color: transparent !important;
}

/* Calendar icon (native) */
.kh-pill__input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.75;
}

/* DESKTOP: Hacer todo el campo clickeable (no solo el icono) */
@media (min-width: 768px) {
  .kh-pill__input::-webkit-calendar-picker-indicator,
  input[type="date"].kh-pill__input::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }
  
  .kh-pill:has(input[type="date"]) {
    position: relative;
    cursor: pointer;
  }
}

/* iOS Safari: Corregir comportamiento del input date */
@supports (-webkit-touch-callout: none) {
  /* Pill date: sin cambios de tamaño */
  .kh-pill:has(input[type="date"]),
  .kh-pill:has(#kikoto_date) {
    position: relative;
  }
  
  /* Input date: Base para webkit (sin transform - lo aplica JS solo en iOS) */
  .kh-widget .kh-pill .kh-pill__input,
  .kh-widget .kh-pill input[type="date"],
  .kh-widget .kh-pill #kikoto_date,
  .kh-pill input[type="date"]#kikoto_date {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    direction: ltr !important;
    padding: 0 40px 0 0 !important;
    margin: 8px 0 0 0 !important;
    background: transparent !important;
    border: none !important;
    font-size: var(--kh-font-size-value) !important;
    line-height: 1.15 !important;
    box-sizing: border-box !important;
    /* NO transform aquí - JavaScript lo aplica solo en iOS real */
  }
  
  /* Resetear pseudo-elementos */
  .kh-widget .kh-pill input[type="date"]::-webkit-date-and-time-value,
  .kh-widget .kh-pill #kikoto_date::-webkit-date-and-time-value,
  .kh-pill__input::-webkit-date-and-time-value,
  .kh-pill input[type="date"]::-webkit-date-and-time-value {
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
  }
  
  .kh-widget .kh-pill input[type="date"]::-webkit-datetime-edit,
  .kh-widget .kh-pill #kikoto_date::-webkit-datetime-edit,
  .kh-pill__input::-webkit-datetime-edit,
  .kh-pill input[type="date"]::-webkit-datetime-edit {
    text-align: left !important;
    padding: 0 !important;
    padding-left: 0 !important;
    margin: 0 !important;
    margin-left: 0 !important;
    display: inline-block !important;
  }
  
  .kh-widget .kh-pill input[type="date"]::-webkit-datetime-edit-fields-wrapper,
  .kh-widget .kh-pill #kikoto_date::-webkit-datetime-edit-fields-wrapper,
  .kh-pill__input::-webkit-datetime-edit-fields-wrapper,
  .kh-pill input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    justify-content: flex-start !important;
    padding: 0 !important;
    padding-left: 0 !important;
    margin: 0 !important;
    margin-left: 0 !important;
  }
  
  /* Campos individuales: FORZAR padding-left: 0 */
  .kh-widget .kh-pill input[type="date"]::-webkit-datetime-edit-day-field,
  .kh-widget .kh-pill input[type="date"]::-webkit-datetime-edit-month-field,
  .kh-widget .kh-pill input[type="date"]::-webkit-datetime-edit-year-field,
  .kh-widget .kh-pill #kikoto_date::-webkit-datetime-edit-day-field,
  .kh-widget .kh-pill #kikoto_date::-webkit-datetime-edit-month-field,
  .kh-widget .kh-pill #kikoto_date::-webkit-datetime-edit-year-field,
  .kh-pill__input::-webkit-datetime-edit-day-field,
  .kh-pill__input::-webkit-datetime-edit-month-field,
  .kh-pill__input::-webkit-datetime-edit-year-field,
  .kh-pill input[type="date"]::-webkit-datetime-edit-day-field,
  .kh-pill input[type="date"]::-webkit-datetime-edit-month-field,
  .kh-pill input[type="date"]::-webkit-datetime-edit-year-field {
    padding: 0 !important;
    padding-left: 0 !important;
    margin: 0 !important;
    margin-left: 0 !important;
  }
  
  /* Texto separador */
  .kh-widget .kh-pill input[type="date"]::-webkit-datetime-edit-text,
  .kh-widget .kh-pill #kikoto_date::-webkit-datetime-edit-text,
  .kh-pill__input::-webkit-datetime-edit-text,
  .kh-pill input[type="date"]::-webkit-datetime-edit-text {
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 2px !important; /* Mínimo espacio entre día/mes/año */
  }
  
  /* Ocultar icono nativo */
  .kh-widget .kh-pill input[type="date"]::-webkit-calendar-picker-indicator,
  .kh-widget .kh-pill #kikoto_date::-webkit-calendar-picker-indicator,
  .kh-pill__input::-webkit-calendar-picker-indicator,
  .kh-pill input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0 !important;
    position: absolute;
    right: 0;
    width: 40px;
    height: 100%;
    cursor: pointer;
  }
  
  /* Icono custom visible */
  .kh-pill:has(input[type="date"])::after,
  .kh-pill:has(#kikoto_date)::after {
    content: '📅';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    opacity: 0.6;
    pointer-events: none;
  }
}

/* =============================================================================
   SWAP BUTTON - Botón de intercambio
   ============================================================================= */

/* Mobile: Floating a la derecha entre Origen y Destino */
.kh-swap {
  position: absolute;
  right: 18px;
  top: 54px; /* Aumentado desde 50px para bajar más */
  z-index: 10;
  
  width: 50px;
  height: 50px;
  border-radius: var(--kh-radius-full);
  background: var(--kh-primary);
  border: none;
  color: white;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  box-shadow: var(--kh-shadow-button);
  cursor: pointer;
  transition: transform var(--kh-transition), box-shadow var(--kh-transition);
}

.kh-swap:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(40, 140, 252, 0.35);
}

.kh-swap:active {
  transform: translateY(0);
}

.kh-swap:focus {
  outline: 2px solid var(--kh-primary);
  outline-offset: 3px;
}

/* Icon dentro del swap */
.kh-swap__icon {
  width: 22px;
  height: 22px;
  stroke: white;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Desktop: Integrado en el rail */
@media (min-width: 768px) {
  .kh-swap {
    position: static; /* No absoluto, integrado en el flujo */
    flex: 0 0 60px;
    width: 54px;
    height: 54px;
    align-self: center;
    transform: none; /* Sin transform en desktop */
  }
}

/* =============================================================================
   DIVIDER - Separador
   ============================================================================= */
.kh-divider {
  border: 0;
  border-top: 1px solid var(--kh-border-light);
  margin: var(--kh-space-md) 0;
}

@media (min-width: 768px) {
  .kh-divider {
    margin: var(--kh-space-lg) 0;
  }
}

/* =============================================================================
   SECTION TITLE - Título de sección
   ============================================================================= */
.kh-section-title {
  font-size: 20px;
  font-weight: var(--kh-font-weight-bold);
  color: var(--kh-text);
  margin-bottom: var(--kh-space-md);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Desktop: título e icono más grandes + mover a la derecha */
@media (min-width: 768px) {
  .kh-section-title {
    font-size: 28px;
    margin-left: 8px;
  }
  
  .kh-section-title__icon {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 767px) {
  .kh-section-title {
    justify-content: center;
    text-align: center;
  }
}

.kh-section-title__icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.kh-section-title__icon img {
  width: 100%;
  height: 100%;
  display: block;
}

/* =============================================================================
   RESULTS - Contenedor de resultados
   ============================================================================= */
.kh-results {
  display: flex;
  flex-direction: column;
  gap: var(--kh-space-sm);
}

/* Message cuando no hay resultados */
.kh-results__message {
  color: var(--kh-text-muted);
  text-align: center;
  padding: var(--kh-space-xl);
}

/* =============================================================================
   ROW - Fila de horario (mantener estructura existente)
   ============================================================================= */
/* =============================================================================
   CARDS DE HORARIOS - Diseño exacto referencia v2.3.0
   ============================================================================= */
.kh-row {
  background: var(--kh-bg-white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 16px 18px;
  
  display: grid;
  grid-template-columns: max-content 1fr auto;
  grid-template-areas:
    "left top right"
    "dots dots right"
    "meta meta right";
  column-gap: 14px;
  row-gap: 6px;
  align-items: center;
  
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  margin-bottom: 12px;
}

.kh-row--link {
  cursor: pointer;
}

.kh-row--link:hover {
  border-color: rgba(40, 140, 252, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.kh-row--disabled {
  opacity: 0.70;
  pointer-events: none;
}

/* Row sections */
.kh-row__left {
  grid-area: left;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Icono reloj (pequeño y gris muy claro) */
.kh-row__left .kikoto-clock-ico {
  font-size: 20px;
  opacity: 0.30;
  line-height: 1;
}

/* Hora (tamaño moderado, no gigante) */
.kh-row__left .kikoto-time-text {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--kh-text);
  line-height: 1;
}

/* Columna central: logo + naviera */
.kh-row__mid {
  grid-area: top;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kikoto-mid-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap !important;
  min-width: 0;
  width: 100%;
}

.kh-row__mid .kikoto-logo {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
}

.kh-row__mid .kikoto-company-name {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--kh-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}

/* Puntos decorativos: VISIBLES (color oscuro, más grandes) */
.kh-row__dots {
  grid-area: dots;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  opacity: 0.40;
  padding: 0;
  margin-left: 28px;
}

.kh-row__dots .kikoto-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #888;
  display: inline-block;
}

.kh-row__dots .kikoto-dotline {
  width: 32px;
  height: 0;
  border-top: 2px dotted #888;
  display: inline-block;
}

/* Meta: duración + barco EN LA MISMA LÍNEA (MÁS A LA IZQUIERDA) */
.kh-row__meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(0, 0, 0, 0.55);
  min-width: 0;
  padding-left: 0;
  margin-left: 0px;
  font-size: 12px;
}

/* Duración: NUNCA se trunca */
.kh-row__meta .kikoto-meta-item:first-child {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Barco: SI se trunca si no cabe */
.kh-row__meta .kikoto-meta-item:last-child {
  flex: 1 1 auto;
  min-width: 0;
}

.kikoto-meta-ico {
  font-size: 14px;
  opacity: 0.65;
  line-height: 1;
}

.kikoto-meta-text {
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kh-row__meta .kikoto-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.kh-row__meta .kikoto-meta-ico {
  opacity: 0.65;
  font-size: 14px;
}

.kh-row__meta .kikoto-meta-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kh-row__meta .kikoto-meta-duration {
  flex: 0 0 auto;
}

.kh-row__meta .kikoto-meta-ship {
  flex: 1 1 auto;
  min-width: 0;
}

/* Botón estado (derecha) - MÁS COMPACTO */
.kh-row__right {
  grid-area: right;
  justify-self: end;
  align-self: center;
  display: flex;
  align-items: center;
}

.kh-row__right .kikoto-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  text-align: center;
  min-width: 120px;
  border: 1px solid;
}

/* Disponible: Azul claro */
.kh-row__right .kikoto-badge-available {
  background: rgba(100, 181, 246, 0.12);
  color: #1e88e5;
  border-color: rgba(100, 181, 246, 0.30);
}

/* No disponible / Completo: Gris claro */
.kh-row__right .kikoto-badge-full,
.kh-row__right .kikoto-badge-past {
  background: rgba(158, 158, 158, 0.12);
  color: #757575;
  border-color: rgba(158, 158, 158, 0.25);
}

/* ===== RESPONSIVE ===== */

/* Tablet */
@media (max-width: 768px) {
  .kh-row {
    padding: 14px 16px;
    column-gap: 12px;
    row-gap: 6px;
  }
  
  .kh-row__left .kikoto-clock-ico {
    font-size: 18px;
  }
  
  .kh-row__left .kikoto-time-text {
    font-size: 20px;
  }
  
  .kh-row__mid .kikoto-company-name {
    font-size: 18px;
  }
  
  .kh-row__meta {
    font-size: 13px;
    margin-left: 1px;
  }
  
  .kh-row__dots {
    gap: 7px;
    margin-left: 26px;
  }
  
  .kh-row__dots .kikoto-dot {
    width: 6px;
    height: 6px;
  }
  
  .kh-row__dots .kikoto-dotline {
    width: 28px;
  }
  
  .kh-row__right .kikoto-badge {
    min-width: 110px;
    font-size: 13px;
    padding: 8px 14px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .kh-row {
    padding: 12px 14px;
    column-gap: 10px;
    row-gap: 5px;
  }
  
  .kh-row__left {
    gap: 6px;
  }
  
  .kh-row__left .kikoto-clock-ico {
    font-size: 16px;
  }
  
  .kh-row__left .kikoto-time-text {
    font-size: 18px;
  }
  
  .kh-row__mid {
    gap: 6px;
  }
  
  .kh-row__mid .kikoto-logo {
    width: 20px;
    height: 20px;
  }
  
  .kh-row__mid .kikoto-company-name {
    font-size: 16px;
  }
  
  .kh-row__dots {
    gap: 6px;
    margin-left: 22px;
  }
  
  .kh-row__dots .kikoto-dot {
    width: 6px;
    height: 6px;
  }
  
  .kh-row__dots .kikoto-dotline {
    width: 26px;
  }
  
  .kh-row__meta {
    font-size: 12px;
    gap: 8px;
    margin-left: -1px;
  }
  
  .kikoto-meta-ico {
    font-size: 13px;
  }
  
  .kh-row__right .kikoto-badge {
    min-width: 100px;
    font-size: 12px;
    padding: 7px 12px;
  }
}
  
  .kh-row__mid .kikoto-company-name {
    font-size: 16px;
  }
  
  .kh-row__dots {
    gap: 6px;
    margin-left: 22px;
  }
  
  .kh-row__dots .kikoto-dot {
    width: 5px;
    height: 5px;
  }
  
  .kh-row__dots .kikoto-dotline {
    width: 20px;
  }
  
  .kh-row__meta {
    font-size: 12px;
    gap: 8px;
    margin-left: 10px;
  }
  
  .kh-row__meta .kikoto-meta-ico {
    font-size: 13px;
  }
  
  .kh-row__right .kikoto-badge {
    min-width: 100px;
    font-size: 12px;
    padding: 7px 12px;
  }
}

/* =============================================================================
   FOOTER
   ============================================================================= */
.kh-footer {
  margin-top: var(--kh-space-md);
  position: relative;
  z-index: 5;
}

.kh-footer__text {
  font-size: 14px;
  color: var(--kh-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

@media (max-width: 517px) {
  .kh-footer__text {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .kh-footer__separator {
    display: none;
  }
}

.kh-footer__link {
  color: var(--kh-primary);
  font-weight: var(--kh-font-weight-bold);
  text-decoration: none;
  transition: background var(--kh-transition);
  border-radius: 6px;
  padding: 2px 6px;
  margin: -2px -6px;
}

.kh-footer__link:hover,
.kh-footer__link:focus {
  background: rgba(40, 140, 252, 0.08);
  outline: none;
}

/* =============================================================================
   UTILITIES - Clases auxiliares
   ============================================================================= */
.kh-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =============================================================================
   MOBILE OPTIMIZATIONS - Ajustes específicos para móvil
   ============================================================================= */
@media (max-width: 767px) {
  /* Compact pills en mobile */
  .kh-pill {
    border-radius: var(--kh-radius-sm);
    padding: 8px 12px 10px;
  }
  
  .kh-pill__label {
    font-size: 13px;
    margin-bottom: 5px;
  }
  
  .kh-pill__select,
  .kh-pill__input {
    font-size: 18px;
  }
  
  /* Ajustar posición del swap según altura real de pills */
  .kh-swap {
    top: 56px; /* Aumentado desde 52px para bajar más */
  }
}

/* Extra small devices */
@media (max-width: 390px) {
  .kh-filters {
    padding: 10px;
  }
  
  .kh-pill {
    padding: 8px 12px;
  }
  
  .kh-pill__label {
    font-size: 12px;
  }
  
  .kh-pill__select,
  .kh-pill__input {
    font-size: 16px;
  }
  
  .kh-swap {
    width: 48px;
    height: 48px;
    right: 14px;
    top: 50px; /* Aumentado desde 46px */
  }
  
  .kh-swap__icon {
    width: 20px;
    height: 20px;
  }
}

/* =============================================================================
   PRINT STYLES
   ============================================================================= */
@media print {
  .kh-widget {
    box-shadow: none;
  }
  
  .kh-swap {
    display: none;
  }
  
  .kh-row--link:hover {
    transform: none;
    box-shadow: none;
  }
}


/* =============================================================================
   iOS SAFARI: Date input alignment fix (v2.0.31)
   - Ajuste diferente según ancho de pantalla
   - 390px (iPhone 13): -3px (más a la derecha)
   - 428px (iPhone 14): -9px
   ============================================================================= */
@supports (-webkit-touch-callout: none) {
  /* Base: 390px y menores (iPhone 13, 12, SE, etc) */
  .kikoto-horarios .kh-widget .kh-form .kh-pill--date input[type="date"],
  .kh-pill--date input[type="date"].form-control,
  #kikoto_date {
    padding: 0 40px 0 0 !important;
    margin: 8px 0 0 0 !important;
    transform: translateX(-3px) !important;
    -webkit-transform: translateX(-3px) !important;
    position: relative !important;
    text-align: left !important;
    direction: ltr !important;
  }
  
  /* Pantallas más anchas: 414px+ (iPhone 14, Plus, Max, etc) */
  @media (min-width: 414px) {
    .kikoto-horarios .kh-widget .kh-form .kh-pill--date input[type="date"],
    .kh-pill--date input[type="date"].form-control,
    #kikoto_date {
      transform: translateX(-9px) !important;
      -webkit-transform: translateX(-9px) !important;
    }
  }
}

/* Pills más estrechas en móvil (v2.0.29) - MÁS ESPECÍFICO */
@media (max-width: 767.98px) {
  .kikoto-horarios .kh-pill,
  .kh-widget .kh-pill {
    padding: 10px 12px !important;
    min-height: 56px !important;
  }
  
  .kikoto-horarios .kh-pill__label,
  .kh-widget .kh-pill__label {
    font-size: 0.95rem !important;
    margin-bottom: 4px !important;
  }
  
  .kikoto-horarios .kh-pill__value,
  .kh-widget .kh-pill__value {
    font-size: 1.15rem !important;
    line-height: 1.2 !important;
  }
  
  .kikoto-horarios .kh-pill select.form-select,
  .kikoto-horarios .kh-pill input[type="date"].form-control {
    font-size: 1.15rem !important;
    padding: 6px 8px !important;
  }
}