/* Oportunidades — hoja de estilos (tema kawaii) */

:root {
  --fondo:            #fff0f6;
  --superficie:       #ffffff;
  --superficie-alt:   #fff5f9;
  --borde:            #ffdce9;
  --borde-fuerte:     #ffb8d4;
  --texto:            #3d2430;
  --texto-suave:      #7a5566;
  --texto-tenue:      #ab8494;

  --acento:           #e6357f;
  --acento-claro:     #ff69a8;
  --acento-suave:     #ffe3ef;

  --ideal:            #d6006e;
  --ideal-fondo:      #ffe0f0;
  --bueno:            #9147c4;
  --bueno-fondo:      #f4e8fb;
  --revisar:          #d97528;
  --revisar-fondo:    #fff0e2;
  --bajo:             #9b8891;
  --bajo-fondo:       #f6eef2;
  --peligro:          #d32f4f;
  --peligro-fondo:    #ffe8ec;

  --radio:            18px;
  --radio-s:          12px;
  --sombra:           0 2px 4px rgba(214, 51, 132, .07), 0 1px 2px rgba(214, 51, 132, .05);
  --sombra-alta:      0 6px 20px rgba(214, 51, 132, .14), 0 2px 6px rgba(214, 51, 132, .08);
  --fuente: "Segoe UI Variable", -apple-system, BlinkMacSystemFont, "Segoe UI",
            "Trebuchet MS", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo:          #1a1016;
    --superficie:     #251820;
    --superficie-alt: #2f1f29;
    --borde:          #3d2a35;
    --borde-fuerte:   #573b49;
    --texto:          #f7e8ef;
    --texto-suave:    #cdaaba;
    --texto-tenue:    #a07f8f;

    --acento:         #ff7eb6;
    --acento-claro:   #ffa5cd;
    --acento-suave:   #3a2029;

    --ideal:          #ff8ac4;
    --ideal-fondo:    #3f1f2f;
    --bueno:          #cca0ff;
    --bueno-fondo:    #2f2342;
    --revisar:        #ffbb7f;
    --revisar-fondo:  #3b2b1d;
    --bajo:           #ab929c;
    --bajo-fondo:     #2c2026;
    --peligro:        #ff8fa0;
    --peligro-fondo:  #3c2026;

    --sombra:         0 2px 4px rgba(0,0,0,.3);
    --sombra-alta:    0 6px 20px rgba(0,0,0,.45);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Lunares muy suaves de fondo, el guiño kawaii. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,138,190,.13) 1.5px, transparent 1.6px),
    radial-gradient(circle, rgba(255,138,190,.09) 1.5px, transparent 1.6px);
  background-size: 34px 34px, 34px 34px;
  background-position: 0 0, 17px 17px;
}

.oculto { display: none !important; }

/* --- Cabecera ---------------------------------------------------------- */

.cabecera {
  background: linear-gradient(135deg, var(--superficie) 0%, var(--acento-suave) 100%);
  border-bottom: 2px solid var(--borde);
  position: sticky; top: 0; z-index: 40;
}
.cabecera-inner {
  max-width: 1120px; margin: 0 auto;
  padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.marca { display: flex; align-items: center; gap: 14px; }
.marca-icono { font-size: 32px; line-height: 1; }
.marca h1 {
  margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em;
  color: var(--acento);
}
.marca-sub {
  margin: 1px 0 0; font-size: 12.5px; color: var(--texto-tenue);
}
.cabecera-acciones { display: flex; align-items: center; gap: 14px; }
.estado-ejecucion { font-size: 12.5px; color: var(--texto-tenue); text-align: right; }

/* --- Botones ----------------------------------------------------------- */

.btn {
  font: inherit; font-size: 13px; font-weight: 550;
  border: 1.5px solid var(--borde-fuerte);
  background: var(--superficie);
  color: var(--texto);
  padding: 7px 14px; border-radius: 999px;
  cursor: pointer; white-space: nowrap;
  transition: background .14s, border-color .14s, color .14s, transform .1s;
}
.btn:hover  { background: var(--acento-suave); border-color: var(--acento-claro); }
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-primario {
  background: linear-gradient(135deg, var(--acento-claro), var(--acento));
  border-color: var(--acento); color: #fff;
  padding: 9px 22px; font-weight: 650;
  box-shadow: 0 2px 8px rgba(230, 53, 127, .28);
}
.btn-primario:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--acento), var(--acento-claro));
  border-color: var(--acento); color: #fff;
}
.btn-primario.cargando { position: relative; color: transparent; }
.btn-primario.cargando::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.btn-enlace {
  text-decoration: none; color: var(--acento);
  border-color: var(--acento-claro); font-weight: 650;
  background: var(--acento-suave);
}
.btn-enlace:hover { background: var(--acento-claro); color: #fff; border-color: var(--acento); }

.btn-secundario { background: var(--superficie-alt); }

.btn-icono {
  padding: 7px 11px; min-width: 36px; color: var(--texto-suave);
  font-size: 14px; line-height: 1;
}
.btn-icono.activo { background: var(--acento-suave); border-color: var(--acento); color: var(--acento); }

.btn-aplicar.activo {
  background: var(--ideal-fondo); border-color: var(--ideal); color: var(--ideal); font-weight: 700;
}

/* --- Métricas ---------------------------------------------------------- */

.metricas {
  max-width: 1120px; margin: 20px auto 0; padding: 0 24px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px;
}
.metrica {
  background: var(--superficie); border: 1.5px solid var(--borde);
  border-radius: var(--radio); padding: 14px 16px; box-shadow: var(--sombra);
  transition: transform .14s, box-shadow .14s;
}
.metrica:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.metrica-valor { font-size: 23px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.metrica-nombre {
  font-size: 11.5px; color: var(--texto-tenue); text-transform: uppercase;
  letter-spacing: .05em; margin-top: 2px; font-weight: 600;
}
.metrica.destacada { border-color: var(--acento-claro); background: var(--acento-suave); }
.metrica.destacada .metrica-valor { color: var(--ideal); }

/* --- Filtros ----------------------------------------------------------- */

.filtros { max-width: 1120px; margin: 22px auto 0; padding: 0 24px; }
.filtros-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  border-bottom: 2px solid var(--borde); padding-bottom: 12px;
}
.pestanas { display: flex; gap: 4px; flex-wrap: wrap; }
.pestana {
  font: inherit; font-size: 13px; font-weight: 550;
  background: none; border: none; color: var(--texto-suave);
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background .14s, color .14s;
}
.pestana:hover { background: var(--superficie-alt); color: var(--acento); }
.pestana.activa {
  background: linear-gradient(135deg, var(--acento-claro), var(--acento));
  color: #fff; font-weight: 650;
  box-shadow: 0 2px 8px rgba(230, 53, 127, .25);
}
.pestana-cuenta {
  font-size: 11px; font-weight: 700; background: var(--superficie-alt);
  color: var(--texto-suave); padding: 1px 8px; border-radius: 999px;
}
.pestana.activa .pestana-cuenta { background: rgba(255,255,255,.3); color: #fff; }

.controles { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.buscador { position: relative; display: flex; align-items: center; }
.buscador svg {
  position: absolute; left: 12px; width: 15px; height: 15px;
  fill: none; stroke: var(--acento-claro); stroke-width: 2.2; stroke-linecap: round;
  pointer-events: none;
}
.buscador input {
  font: inherit; font-size: 13px;
  padding: 8px 13px 8px 33px; width: 210px;
  border: 1.5px solid var(--borde-fuerte); border-radius: 999px;
  background: var(--superficie); color: var(--texto);
}
.buscador input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--acento-claro); outline-offset: 1px;
  border-color: var(--acento-claro);
}
select {
  font: inherit; font-size: 13px; padding: 8px 12px;
  border: 1.5px solid var(--borde-fuerte); border-radius: 999px;
  background: var(--superficie); color: var(--texto); cursor: pointer;
}

/* --- Lista ------------------------------------------------------------- */

.lista {
  max-width: 1120px; margin: 0 auto; padding: 18px 24px 60px;
  display: flex; flex-direction: column; gap: 12px;
}

.oferta {
  background: var(--superficie); border: 1.5px solid var(--borde);
  border-radius: var(--radio); padding: 17px 19px;
  box-shadow: var(--sombra); transition: box-shadow .16s, border-color .16s, transform .16s;
}
.oferta:hover {
  box-shadow: var(--sombra-alta); border-color: var(--acento-claro);
  transform: translateY(-2px);
}
.oferta.aplicada  { border-left: 5px solid var(--ideal); }
.oferta.descartada, .oferta.caducada { opacity: .58; }
.oferta.caducada .oferta-titulo { text-decoration: line-through; text-decoration-thickness: 1px; }

.oferta-encabezado { display: flex; gap: 14px; align-items: flex-start; }

.oferta-puntuacion {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 56px; padding-top: 1px;
}
.puntos {
  font-size: 20px; font-weight: 800; letter-spacing: -.03em; line-height: 1;
}
.etiqueta-categoria {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.cat-ideal   .puntos { color: var(--ideal); }
.cat-ideal   .etiqueta-categoria { background: var(--ideal-fondo); color: var(--ideal); }
.cat-bueno   .puntos { color: var(--bueno); }
.cat-bueno   .etiqueta-categoria { background: var(--bueno-fondo); color: var(--bueno); }
.cat-revisar .puntos { color: var(--revisar); }
.cat-revisar .etiqueta-categoria { background: var(--revisar-fondo); color: var(--revisar); }
.cat-bajo    .puntos { color: var(--bajo); }
.cat-bajo    .etiqueta-categoria { background: var(--bajo-fondo); color: var(--bajo); }

.oferta-titulo-bloque { flex: 1; min-width: 0; }
.oferta-titulo { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.oferta-meta { margin: 3px 0 0; font-size: 13px; color: var(--texto-suave); }
.oferta-meta .hotel { font-weight: 650; color: var(--acento); }
.oferta-meta .sep { color: var(--texto-tenue); margin: 0 6px; }

.oferta-insignias { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.insignia {
  font-size: 11px; font-weight: 650; padding: 3px 10px; border-radius: 999px;
  background: var(--superficie-alt); color: var(--texto-suave); white-space: nowrap;
}
.insignia.estrellas { background: var(--revisar-fondo); color: var(--revisar); }
.insignia.fuente    { background: var(--acento-suave); color: var(--acento); }
.insignia.salario   { background: var(--ideal-fondo); color: var(--ideal); }
.insignia.caducada  { background: var(--peligro-fondo); color: var(--peligro); }
.insignia.urgente   { background: var(--peligro-fondo); color: var(--peligro); }

.oferta-extracto {
  margin: 11px 0 0; font-size: 13px; color: var(--texto-suave);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

.oferta-razones { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; }
.razon {
  font-size: 11px; padding: 3px 10px; border-radius: 999px;
  background: var(--superficie-alt); color: var(--texto-tenue);
}
.razon.negativa { background: var(--peligro-fondo); color: var(--peligro); }

.oferta-pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 13px; padding-top: 12px;
  border-top: 1.5px dashed var(--borde); flex-wrap: wrap;
}
.oferta-fechas { font-size: 12px; color: var(--texto-tenue); }
.oferta-fechas .urgente { color: var(--peligro); font-weight: 650; }
.oferta-botones { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.oferta-notas { margin-top: 12px; }
.oferta-notas textarea {
  width: 100%; min-height: 70px; resize: vertical;
  font: inherit; font-size: 13px; padding: 11px 13px;
  border: 1.5px solid var(--borde-fuerte); border-radius: var(--radio-s);
  background: var(--fondo); color: var(--texto);
}
.notas-acciones {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 8px;
}
.notas-estado { font-size: 12px; color: var(--ideal); font-weight: 600; }

/* --- Vacío y avisos ---------------------------------------------------- */

.vacio { text-align: center; padding: 70px 24px; color: var(--texto-tenue); }
.vacio-icono { font-size: 44px; margin: 0 0 10px; }
.vacio-titulo { font-size: 16px; font-weight: 650; color: var(--texto-suave); margin: 0 0 5px; }
.vacio-texto { margin: 0; font-size: 13.5px; }

.aviso {
  position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 90px);
  background: linear-gradient(135deg, var(--acento-claro), var(--acento));
  color: #fff;
  padding: 12px 22px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  box-shadow: var(--sombra-alta); z-index: 100; max-width: 90vw;
  transition: transform .28s cubic-bezier(.34,1.4,.64,1); pointer-events: none;
}
.aviso.visible { transform: translate(-50%, 0); }
.aviso.error { background: var(--peligro); color: #fff; }

@media (max-width: 760px) {
  .cabecera-inner { flex-direction: column; align-items: stretch; }
  .cabecera-acciones { justify-content: space-between; }
  .filtros-inner { flex-direction: column; align-items: stretch; }
  .controles { justify-content: space-between; }
  .buscador input { width: 100%; }
  .buscador { flex: 1; }
  .oferta-insignias { justify-content: flex-start; }
  .oferta-encabezado { flex-wrap: wrap; }
}