/* ═══════════════════════════════════════════════════════════════════════
   V3 · "A la medida" — Design system del constructor de itinerarios.
   TODO está scopeado a .v3med para no filtrar al resto de la app (V1/V2).
   Tokens de marca Mazzocco: negro/dorado/crema; amarillo SOLO en "Publicar".
   Poppins ya viene cargada por el shell V2.
   ═══════════════════════════════════════════════════════════════════════ */

.v3med {
  /* Paleta */
  --v3-negro:   #151515;
  --v3-dorado:  #AE941F;
  --v3-amarillo:#FFD400;   /* exclusivo del botón primario Publicar */
  --v3-crema:   #FFF8DE;
  --v3-gris:    #F5F5F3;
  --v3-blanco:  #FFFFFF;
  --v3-linea:   #E7E6E1;   /* borde gris claro discreto */
  --v3-linea-2: #EFEEE9;
  --v3-tinta-2: #6B6B66;   /* texto secundario */
  --v3-tinta-3: #9A9A93;   /* texto terciario / placeholder */
  --v3-error:   #C0392B;
  --v3-ok:      #1A7F37;

  /* Radios */
  --v3-r-sm: 10px;
  --v3-r:    12px;
  --v3-r-lg: 16px;

  /* Sombras MUY suaves */
  --v3-sh-1: 0 1px 2px rgba(21,21,21,.04), 0 1px 3px rgba(21,21,21,.05);
  --v3-sh-2: 0 4px 12px rgba(21,21,21,.06), 0 2px 4px rgba(21,21,21,.04);
  --v3-sh-3: 0 10px 30px rgba(21,21,21,.10);

  /* Focus ring dorado sutil */
  --v3-ring: 0 0 0 3px rgba(174,148,31,.22);

  /* Spacing (múltiplos de 8) */
  --v3-s1: 8px;  --v3-s2: 16px; --v3-s3: 24px; --v3-s4: 32px;

  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--v3-negro);
  background: var(--v3-gris);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.v3med *, .v3med *::before, .v3med *::after { box-sizing: border-box; }

/* ── Iconos ── */
.v3med .v3-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.v3med .v3-icon.sm { width: 15px; height: 15px; }
.v3med .v3-icon.lg { width: 22px; height: 22px; }
/* Rotaciones de la chevron (no hay chev izq/der en el sprite) */
.v3med .v3-icon.rot-l { transform: rotate(90deg); }
.v3med .v3-icon.rot-r { transform: rotate(-90deg); }

/* ═══ Botones ═══ */
.v3med .v3-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px;
  border-radius: var(--v3-r); border: 1px solid transparent;
  font-family: inherit; font-size: .92rem; font-weight: 600; line-height: 1;
  color: var(--v3-negro); background: var(--v3-blanco);
  cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .05s, color .15s;
}
.v3med .v3-btn:active { transform: translateY(1px); }
.v3med .v3-btn:focus-visible { outline: none; box-shadow: var(--v3-ring); }
.v3med .v3-btn:disabled { opacity: .55; cursor: not-allowed; }

/* Primary = amarillo (SOLO Publicar) */
.v3med .v3-btn.primary { background: var(--v3-amarillo); border-color: var(--v3-amarillo); color: var(--v3-negro); font-weight: 700; box-shadow: var(--v3-sh-1); }
.v3med .v3-btn.primary:hover { background: #f2c900; border-color: #f2c900; box-shadow: var(--v3-sh-2); }

/* Secondary = outline */
.v3med .v3-btn.secondary { background: var(--v3-blanco); border-color: var(--v3-linea); color: var(--v3-negro); }
.v3med .v3-btn.secondary:hover { border-color: var(--v3-dorado); background: var(--v3-crema); }

/* Ghost */
.v3med .v3-btn.ghost { background: transparent; border-color: transparent; color: var(--v3-tinta-2); padding: 0 12px; }
.v3med .v3-btn.ghost:hover { background: var(--v3-gris); color: var(--v3-negro); }

/* Botón solo-icono */
.v3med .v3-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--v3-r-sm);
  border: 1px solid var(--v3-linea); background: var(--v3-blanco); color: var(--v3-tinta-2);
  cursor: pointer; transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.v3med .v3-iconbtn:hover { border-color: var(--v3-dorado); color: var(--v3-negro); background: var(--v3-crema); }
.v3med .v3-iconbtn:focus-visible { outline: none; box-shadow: var(--v3-ring); }
.v3med .v3-iconbtn.sm { width: 32px; height: 32px; border-radius: 8px; }
.v3med .v3-iconbtn.danger:hover { border-color: var(--v3-error); color: var(--v3-error); background: #fdf0ee; }

.v3med .v3-btn.sm, .v3med .v3-btn-sm { height: 32px; padding: 0 12px; font-size: .84rem; }

/* Botón de estado (saving/saved/etc.) */
.v3med .v3-btn.is-saving,
.v3med .v3-btn.is-publishing,
.v3med .v3-btn.is-generating { pointer-events: none; opacity: .85; }
.v3med .v3-btn.is-saved { border-color: var(--v3-ok); color: var(--v3-ok); }

/* ═══ Campos de formulario ═══ */
.v3med .v3-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.v3med .v3-label { font-size: .8rem; font-weight: 600; color: var(--v3-tinta-2); letter-spacing: .01em; }
.v3med .v3-input,
.v3med .v3-select,
.v3med .v3-textarea {
  width: 100%; font-family: inherit; font-size: .92rem; color: var(--v3-negro);
  background: var(--v3-blanco); border: 1px solid var(--v3-linea);
  border-radius: var(--v3-r-sm); padding: 0 12px; height: 42px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.v3med .v3-textarea { height: auto; min-height: 72px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.v3med .v3-input::placeholder,
.v3med .v3-textarea::placeholder { color: var(--v3-tinta-3); }
.v3med .v3-input:hover,
.v3med .v3-select:hover,
.v3med .v3-textarea:hover { border-color: #d8d7d0; }
.v3med .v3-input:focus,
.v3med .v3-select:focus,
.v3med .v3-textarea:focus { outline: none; border-color: var(--v3-dorado); box-shadow: var(--v3-ring); }
.v3med .v3-select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 34px; }
.v3med .v3-input.sm, .v3med .v3-select.sm { height: 40px; font-size: .88rem; }

.v3med .v3-field.has-error .v3-input,
.v3med .v3-field.has-error .v3-select,
.v3med .v3-field.has-error .v3-textarea { border-color: var(--v3-error); }
.v3med .v3-err { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; font-weight: 600; color: var(--v3-error); }
.v3med .v3-err .v3-icon { color: var(--v3-error); }

/* ═══ Tarjetas ═══ */
.v3med .v3-card {
  background: var(--v3-blanco); border: 1px solid var(--v3-linea);
  border-radius: var(--v3-r-lg); box-shadow: var(--v3-sh-1);
}

/* ═══ Layout raíz ═══ */
.v3med { padding: var(--v3-s3); max-width: 1440px; margin: 0 auto; }

/* Encabezado */
.v3med .v3-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--v3-s2); flex-wrap: wrap; margin-bottom: var(--v3-s3);
}
.v3med .v3-head .h-titles { min-width: 0; }
.v3med .v3-head h1 { margin: 0; font-size: 1.55rem; font-weight: 700; letter-spacing: -.01em; }
.v3med .v3-head .h-sub { margin: 4px 0 0; color: var(--v3-tinta-2); font-size: .9rem; }
.v3med .v3-head .h-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Info general */
.v3med .v3-general { padding: var(--v3-s2) var(--v3-s3); margin-bottom: var(--v3-s3); }
.v3med .v3-general-grid { display: grid; grid-template-columns: 2fr .8fr .8fr 2fr; gap: var(--v3-s2); align-items: end; }
.v3med .v3-savestate { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--v3-tinta-2); }
.v3med .v3-savestate .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--v3-tinta-3); }
.v3med .v3-savestate.is-saved { color: var(--v3-ok); }
.v3med .v3-savestate.is-saved .dot { background: var(--v3-ok); }
.v3med .v3-savestate.is-saving .dot { background: var(--v3-dorado); animation: v3pulse 1s infinite; }

/* ═══ Constructor 2 columnas ═══ */
.v3med .v3-build { display: grid; grid-template-columns: 260px 1fr; gap: var(--v3-s3); align-items: start; }

/* Sidebar / paleta */
.v3med .v3-palette { position: sticky; top: 16px; padding: var(--v3-s2); }
.v3med .v3-palette h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 700; }
.v3med .v3-palette .p-hint { margin: 0 0 var(--v3-s2); font-size: .78rem; color: var(--v3-tinta-3); }
.v3med .v3-palette-list { display: flex; flex-direction: column; gap: 8px; }
.v3med .v3-ptype {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: var(--v3-r); border: 1px solid var(--v3-linea);
  background: var(--v3-blanco); color: var(--v3-negro); font-family: inherit;
  font-size: .9rem; font-weight: 500; cursor: grab;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .05s;
}
.v3med .v3-ptype:hover { border-color: var(--v3-dorado); background: var(--v3-crema); box-shadow: var(--v3-sh-1); }
.v3med .v3-ptype:focus-visible { outline: none; box-shadow: var(--v3-ring); }
.v3med .v3-ptype .p-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
  background: var(--v3-crema); color: var(--v3-dorado);
}
.v3med .v3-ptype .p-add { margin-left: auto; color: var(--v3-tinta-3); }
.v3med .v3-ptype:hover .p-add { color: var(--v3-dorado); }
.v3med .v3-ptype.is-dragging { opacity: .5; }
.v3med .v3-palette .p-clon { border-style: dashed; }

/* Columna principal: días */
.v3med .v3-days { display: flex; flex-direction: column; gap: var(--v3-s2); min-width: 0; }

/* Pestañas por día: navegación de un día a la vez (menos scroll) */
.v3med .v3-daytabs {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px;
  border-bottom: 1px solid var(--v3-borde); scrollbar-width: thin;
}
.v3med .v3-daytab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; min-height: 40px; border: 1px solid var(--v3-borde);
  border-bottom: none; border-radius: 10px 10px 0 0; background: var(--v3-gris);
  color: #5b5647; cursor: pointer; font: inherit; white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.v3med .v3-daytab b { font-weight: 600; }
.v3med .v3-daytab span { color: #8a8472; font-size: .86em; }
.v3med .v3-daytab:hover { background: #efeadb; }
.v3med .v3-daytab.is-active {
  background: var(--v3-blanco); color: var(--v3-negro);
  border-color: var(--v3-dorado); box-shadow: 0 -2px 0 var(--v3-dorado) inset;
  position: relative; z-index: 1;
}
.v3med .v3-daytab.is-active span { color: var(--v3-dorado); }
.v3med .v3-daytab:focus-visible { outline: 2px solid var(--v3-ring); outline-offset: 1px; }
.v3med .v3-daytab-add { color: var(--v3-dorado); border-style: dashed; background: transparent; }

/* Box de IA por día (arriba de imágenes/descriptivo): agregar servicios con texto libre */
.v3med .v3-iabox {
  margin: var(--v3-s2) 0; padding: 12px; border: 1px solid #e7dcb8;
  border-radius: 12px; background: var(--v3-crema);
}
.v3med .v3-iabox-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: #6b5d1f; font-size: .92em; }
.v3med .v3-iabox-head b { font-weight: 600; }
.v3med .v3-iabox-tag {
  margin-left: 4px; font-size: .72em; font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
  color: var(--v3-dorado); background: #fff; border: 1px solid #e7dcb8; border-radius: 999px; padding: 1px 8px;
}
.v3med .v3-iabox textarea { background: #fff; }
.v3med .v3-iabox-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.v3med .v3-iabox-note { color: #8a7c4a; font-size: .8em; flex: 1 1 200px; }

/* Panel: servicios que la IA no pudo ubicar en un día */
.v3med .v3-sindia { margin: var(--v3-s2) 0; padding: 12px; border: 1px solid #e7c98a; border-radius: 12px; background: #fffaf0; }
.v3med .v3-sindia-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; color: #96690f; font-size: .92em; }
.v3med .v3-sindia-head b { font-weight: 600; }
.v3med .v3-sindia-head span { color: #b08a3a; font-size: .86em; }
.v3med .v3-sindia-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid #f0e2c0; flex-wrap: wrap; }
.v3med .v3-sindia-ic { color: var(--v3-dorado); display: inline-flex; }
.v3med .v3-sindia-tit { flex: 1 1 160px; min-width: 0; font-size: .92em; }
.v3med .v3-sindia-row .v3-select { flex: 0 0 auto; max-width: 220px; }

.v3med .v3-daycard { padding: var(--v3-s2); transition: border-color .15s, box-shadow .15s; }
.v3med .v3-daycard.is-selected { border-color: var(--v3-dorado); box-shadow: var(--v3-sh-2); }
.v3med .v3-daycard-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--v3-s2); }
.v3med .v3-daybadge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px;
  background: var(--v3-negro); color: var(--v3-crema); font-size: .8rem; font-weight: 700; flex: 0 0 auto;
}
.v3med .v3-daycard-head .v3-input { font-weight: 600; }
.v3med .v3-day-sub { margin-left: auto; font-size: .82rem; color: var(--v3-tinta-2); white-space: nowrap; }

/* Bloques dentro del día */
.v3med .v3-block { margin-bottom: var(--v3-s2); }
.v3med .v3-block-lbl { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--v3-tinta-2); margin-bottom: 6px; }
.v3med .v3-block-lbl .grow { flex: 1 1 auto; }

/* Carrusel de imágenes del día */
.v3med .v3-carousel { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.v3med .v3-thumb { position: relative; flex: 0 0 auto; width: 92px; }
.v3med .v3-thumb img { width: 92px; height: 66px; object-fit: cover; border-radius: var(--v3-r-sm); border: 2px solid var(--v3-linea); display: block; }
.v3med .v3-thumb.is-cover img { border-color: var(--v3-dorado); }
.v3med .v3-thumb .t-acts { position: absolute; top: 3px; right: 3px; display: flex; gap: 2px; }
.v3med .v3-thumb .t-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: none; border-radius: 6px; background: rgba(21,21,21,.65); color: #fff; cursor: pointer; font-size: 11px; line-height: 1; }
.v3med .v3-thumb .t-btn:hover { background: rgba(21,21,21,.85); }
.v3med .v3-thumb .t-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--v3-amarillo); }
.v3med .v3-thumb .t-btn .v3-icon { width: 12px; height: 12px; stroke: #fff; }
.v3med .v3-carousel-empty { font-size: .8rem; color: var(--v3-tinta-3); padding: 10px 0; }
.v3med .v3-addimg { display: flex; gap: 8px; margin-top: 8px; }

/* Zona de drop de servicios */
.v3med .v3-drop { display: flex; flex-direction: column; gap: 10px; min-height: 56px; border-radius: var(--v3-r); transition: background .15s, box-shadow .15s; }
.v3med .v3-drop.v3-drop-empty {
  border: 1.5px dashed var(--v3-linea); padding: 18px; text-align: center;
  color: var(--v3-tinta-3); font-size: .85rem; align-items: center; justify-content: center;
}
.v3med .v3-drop.is-over { background: var(--v3-crema); box-shadow: inset 0 0 0 2px rgba(174,148,31,.35); }

/* Placeholder de inserción DnD (Sortable ghostClass) */
.v3med .v3-ghost {
  position: relative; opacity: 1;
  min-height: 46px; border: 1.5px dashed var(--v3-dorado); border-radius: var(--v3-r);
  background: var(--v3-crema); box-shadow: none;
}
.v3med .v3-ghost > * { visibility: hidden; }
.v3med .v3-ghost::after {
  content: 'Soltar aquí'; visibility: visible;
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 600; color: var(--v3-dorado); letter-spacing: .02em;
}
/* Ítem tomado (chosenClass) */
.v3med .v3-chosen { box-shadow: var(--v3-sh-2); border-color: var(--v3-dorado); }
/* Clon que sigue al cursor (dragClass) */
.v3-drag, .v3med .v3-drag { opacity: .95; box-shadow: 0 12px 30px rgba(21,21,21,.18); border-radius: var(--v3-r); }

/* Tarjeta de servicio (pieza) */
.v3med .v3-svccard {
  border: 1px solid var(--v3-linea); border-radius: var(--v3-r); background: var(--v3-blanco);
  padding: 12px; box-shadow: var(--v3-sh-1); transition: box-shadow .15s, border-color .15s;
}
.v3med .v3-svccard:hover { box-shadow: var(--v3-sh-2); }
.v3med .v3-svccard.is-selected { border-color: var(--v3-dorado); box-shadow: var(--v3-ring); }
.v3med .v3-svccard.is-dragging { opacity: .5; }
.v3med .v3-svc-top { display: flex; align-items: center; gap: 8px; }
.v3med .v3-grip { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 30px; color: var(--v3-tinta-3); cursor: grab; border-radius: 6px; transition: color .15s, background .15s; flex: 0 0 auto; }
.v3med .v3-grip:hover { color: var(--v3-dorado); background: var(--v3-gris); }
.v3med .v3-grip:active { cursor: grabbing; }
.v3med .v3-svc-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
  background: var(--v3-crema); color: var(--v3-dorado);
}
.v3med .v3-svc-type { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--v3-tinta-3); flex: 0 0 auto; }
.v3med .v3-svc-top .v3-input { flex: 1 1 auto; min-width: 0; }
.v3med .v3-svc-del { color: var(--v3-tinta-3); }
.v3med .v3-svc-del:hover { color: var(--v3-error); border-color: var(--v3-error); background: #fdf0ee; }
.v3med .v3-svc-body { margin-top: 10px; }

/* ── Fila de precio (cuadrícula) ── */
.v3med .v3-price {
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--v3-linea-2);
}
.v3med .v3-price-row {
  display: grid; align-items: end; gap: 10px;
  grid-template-columns: minmax(130px, 1fr) minmax(110px, 1fr) auto;
}
.v3med .v3-price-row.is-unit {
  grid-template-columns: minmax(130px, 1fr) minmax(90px, 1fr) auto minmax(80px, 1fr) auto;
}
.v3med .v3-price .p-cell { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.v3med .v3-price .p-cap { font-size: .7rem; font-weight: 600; color: var(--v3-tinta-3); letter-spacing: .01em; }
.v3med .v3-price .v3-input.num,
.v3med .v3-price .v3-select.sm { height: 40px; width: 100%; }
.v3med .v3-price .p-x { align-self: center; margin-bottom: 10px; color: var(--v3-tinta-3); font-weight: 600; }
.v3med .v3-price .p-total { margin-left: auto; text-align: right; }
.v3med .v3-price .p-total .p-cap { text-align: right; }
.v3med .v3-price .p-total .g-monto { font-weight: 700; font-size: 1.05rem; white-space: nowrap; }

/* Fila del switch informativo + etiqueta sin costo */
.v3med .v3-price-toggle { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--v3-linea-2); }
.v3med .v3-price-toggle .p-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; background: var(--v3-gris);
  color: var(--v3-tinta-2); font-size: .74rem; font-weight: 600; border: 1px solid var(--v3-linea);
}
.v3med .v3-price-toggle .p-tag .v3-icon { color: var(--v3-tinta-3); }

/* Switch (informativa) */
.v3med .v3-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: .84rem; font-weight: 600; color: var(--v3-tinta-2); user-select: none; }
.v3med .v3-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.v3med .v3-switch .track { position: relative; width: 38px; height: 22px; border-radius: 11px; background: #dedcd4; transition: background .15s; flex: 0 0 auto; }
.v3med .v3-switch .track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.v3med .v3-switch input:checked + .track { background: var(--v3-dorado); }
.v3med .v3-switch input:checked + .track::after { transform: translateX(16px); }
.v3med .v3-switch input:focus-visible + .track { box-shadow: var(--v3-ring); }

/* Bloque hotel (búsqueda Google) */
.v3med .v3-hotel { margin-top: 10px; border-top: 1px dashed var(--v3-linea-2); padding-top: 10px; }
.v3med .v3-hotel .h-cover { width: 100%; height: 92px; object-fit: cover; border-radius: var(--v3-r-sm); margin-bottom: 8px; display: block; }
.v3med .v3-hotel-search { display: flex; gap: 8px; }
.v3med .v3-hotel-res { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.v3med .v3-hotel-card { display: block; width: 100%; text-align: left; font-family: inherit; color: var(--v3-negro); border: 1px solid var(--v3-linea); border-radius: var(--v3-r-sm); padding: 8px 10px; background: var(--v3-blanco); cursor: pointer; font-size: .84rem; transition: border-color .15s, background .15s, box-shadow .15s; }
.v3med .v3-hotel-card:hover { border-color: var(--v3-dorado); background: var(--v3-crema); }
.v3med .v3-hotel-card:focus-visible { outline: none; border-color: var(--v3-dorado); box-shadow: var(--v3-ring); }
.v3med .v3-hotel-card .hc-name { font-weight: 600; }
.v3med .v3-hotel-card .hc-star { color: var(--v3-dorado); }
.v3med .v3-hotel-card .hc-addr { color: var(--v3-tinta-2); font-size: .78rem; margin-top: 2px; }
.v3med .v3-hotel-imgs { margin-top: 8px; }
.v3med .v3-hotel-img { position: relative; flex: 0 0 auto; }
.v3med .v3-hotel-imgbtn { display: block; padding: 0; border: none; background: none; cursor: pointer; border-radius: 8px; }
.v3med .v3-hotel-imgbtn:focus-visible { outline: none; box-shadow: var(--v3-ring); }
.v3med .v3-hotel-img img { width: 78px; height: 58px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid transparent; display: block; }
.v3med .v3-hotel-img img.is-sel { border-color: var(--v3-dorado); }
.v3med .v3-hotel-img .star { position: absolute; top: 3px; left: 3px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: none; border-radius: 6px; background: rgba(21,21,21,.6); color: #fff; cursor: pointer; }
.v3med .v3-hotel-img .star:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--v3-amarillo); }
.v3med .v3-hotel-img .star .v3-icon { width: 12px; height: 12px; }
.v3med .v3-hotel-img .star.on .v3-icon { stroke: var(--v3-amarillo); fill: var(--v3-amarillo); }

/* Pie del día */
.v3med .v3-day-foot { margin-top: var(--v3-s2); }

/* Total general */
.v3med .v3-total { margin-top: var(--v3-s3); padding: var(--v3-s2) var(--v3-s3); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.v3med .v3-total .t-lbl { font-size: .9rem; color: var(--v3-tinta-2); font-weight: 600; }
.v3med .v3-total .t-val { font-size: 1.35rem; font-weight: 700; }
.v3med .v3-total .t-pp { font-size: .9rem; color: var(--v3-tinta-2); font-weight: 600; }

/* Chip */
.v3med .v3-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--v3-crema); color: var(--v3-dorado); font-size: .76rem; font-weight: 600; border: 1px solid #eadfb8; }

/* Utilidades de layout (para evitar estilos inline en el JS) */
.v3med .v3-mt2 { margin-top: 12px; }
.v3med .v3-row { display: flex; gap: 8px; margin-top: 8px; }
.v3med .v3-menu-btn { width: 100%; justify-content: flex-start; margin: 4px 0; }
.v3med .v3-modal-h { margin: 0 0 12px; }
.v3med .v3-modal-foot { margin-top: 12px; text-align: right; }

/* Animaciones */
@keyframes v3pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes v3spin { to { transform: rotate(360deg); } }
.v3med .v3-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(21,21,21,.2); border-top-color: var(--v3-negro); border-radius: 50%; animation: v3spin .7s linear infinite; }
.v3med .v3-btn.primary .v3-spin { border-color: rgba(21,21,21,.25); border-top-color: var(--v3-negro); }

/* ═══ Responsive ═══
   Escritorio (>1080): 2 columnas (paleta sticky + días).
   Tablet/laptop chico (≤1080): la paleta pasa a barra HORIZONTAL sticky
   con scroll horizontal SOLO dentro de la barra (nunca en la página).
   Chico (≤720): campos generales apilados, acciones envuelven.
   En NINGÚN breakpoint debe haber scroll horizontal de PÁGINA:
   todo grid con minmax fijo colapsa a 1fr en anchos angostos.        */

/* Blindaje anti-overflow de página (imágenes, palabras largas, media) */
.v3med { overflow-wrap: anywhere; }
.v3med img { max-width: 100%; }

@media (max-width: 1366px) {
  .v3med .v3-general-grid { grid-template-columns: 1.6fr .9fr .9fr 1.6fr; }
}

/* Laptop chico / tablet grande: la barra lateral se vuelve barra horizontal */
@media (max-width: 1080px) {
  .v3med .v3-build { grid-template-columns: 1fr; }
  /* Paleta = barra horizontal sticky arriba de los días */
  .v3med .v3-palette {
    position: sticky; top: 8px; z-index: 5;
    padding: var(--v3-s1) var(--v3-s2);
  }
  .v3med .v3-palette h3 { display: inline; margin: 0; font-size: .95rem; }
  .v3med .v3-palette .p-hint { display: none; }
  /* Chips en fila con scroll horizontal SOLO dentro de la barra */
  .v3med .v3-palette-list {
    flex-direction: row; flex-wrap: nowrap;
    gap: 8px; margin-top: 8px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 6px; scrollbar-width: thin;
  }
  .v3med .v3-ptype { flex: 0 0 auto; width: auto; }
  .v3med .v3-ptype .p-add { display: none; }
}

/* Tablet: campos generales en 2 columnas */
@media (max-width: 900px) {
  .v3med .v3-general-grid { grid-template-columns: 1fr 1fr; }
  /* Fila de precio colapsa a bloques (evita overflow por minmax fijos) */
  .v3med .v3-price-row,
  .v3med .v3-price-row.is-unit { grid-template-columns: 1fr 1fr; }
  .v3med .v3-price-row .p-x { display: none; }
  .v3med .v3-price-row .p-total { grid-column: 1 / -1; text-align: left; margin-left: 0; }
  .v3med .v3-price-row .p-total .p-cap { text-align: left; }
}

/* Móvil / tablet chico: todo apilado, sin recortes */
@media (max-width: 720px) {
  .v3med { padding: var(--v3-s2); }
  .v3med .v3-general-grid { grid-template-columns: 1fr; }
  .v3med .v3-head .h-actions { width: 100%; }
  .v3med .v3-price-row,
  .v3med .v3-price-row.is-unit { grid-template-columns: 1fr; }
  .v3med .v3-daycard-head { flex-wrap: wrap; }
  .v3med .v3-daycard-head .v3-input { flex: 1 1 100%; order: 2; }
  .v3med .v3-day-sub { margin-left: 0; order: 3; }
  .v3med .v3-daycard-head .v3-iconbtn { order: 3; }
}

/* Táctil: en dispositivos sin puntero fino, agranda controles pequeños
   a ≥40px para cumplir el mínimo de área táctil. */
@media (pointer: coarse) {
  .v3med .v3-iconbtn.sm { width: 40px; height: 40px; }
  .v3med .v3-btn.sm, .v3med .v3-btn-sm { height: 40px; }
  .v3med .v3-thumb .t-btn,
  .v3med .v3-hotel-img .star { width: 28px; height: 28px; }
}

/* Reduce motion: respeta la preferencia del usuario */
@media (prefers-reduced-motion: reduce) {
  .v3med *, .v3med *::before, .v3med *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}