*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;background:#0f172a;color:#e2e8f0}
.container{max-width:980px;margin:24px auto;padding:0 16px}.card{background:#0b1220;border:1px solid #1f2937;border-radius:16px;padding:16px 18px;box-shadow:0 6px 18px rgba(0,0,0,.25);margin-bottom:16px}
h1{margin:0 0 10px 0;font-size:28px}h2{margin:8px 0 8px;font-size:18px}.badge{display:inline-block;background:#111827;border:1px solid #374151;color:#9ca3af;padding:4px 8px;border-radius:999px;font-size:12px;margin-right:6px}
.grid{display:grid;grid-gap:10px;grid-template-columns:repeat(12,1fr)}.col-12{grid-column:span 12}.col-6{grid-column:span 6}.col-3{grid-column:span 3}.col-2{grid-column:span 2}
label{display:block;font-size:13px;color:#94a3b8;margin-bottom:4px}.alert{background:#3b0d0d;border:1px solid #7f1d1d;color:#fecaca;padding:10px;border-radius:12px}
input{width:100%;padding:10px 12px;border-radius:12px;border:1px solid #334155;background:#0a0f1e;color:#e5e7eb}
.btn{display:inline-block;padding:10px 14px;border-radius:12px;background:#22c55e;border:1px solid #16a34a;color:#08131b;text-decoration:none;cursor:pointer;font-weight:600}
.btn:hover{filter:brightness(1.08)}.btn-outline{background:transparent;border:1px solid #334155;color:#e5e7eb}
.rate-row{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #1f2937;border-radius:12px;margin-bottom:8px;background:#0a0f1e}
img{max-width:100%;}


/* Rate row layout improvements */
.rate-row{display:block;padding:8px 10px;border:1px solid #1f2937;border-radius:12px;margin-bottom:10px;background:#0a0f1e}
.rate-option{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}
.rate-option input[type=radio]{margin:0;width:16px;height:16px}
.rate-main{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rate-title{min-width:220px}
.rate-sub{color:#94a3b8;font-size:13px}
.rate-price{white-space:nowrap}


/* Make rows clickable, hide radios, add initials logo */
.rate-option{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px}
.rate-option input[type=radio]{display:none}
.rate-logo-initials{width:40px;height:40px;border:1px solid #334155;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#0b1220;color:#e2e8f0;font-weight:700}
.rate-row{cursor:pointer}
.rate-row.selected{border-color:#16a34a;box-shadow:0 0 0 3px rgba(34,197,94,.35) inset}

/* Contenedor de cada opción */
.rate-row {
  margin-bottom: 10px;
}

/* La tarjeta clickeable (ya es label.rate-option en tu HTML) */
.rate-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 2px solid #e5e7eb;          /* gris claro */
  border-radius: 12px;
  background: #12192C;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

/* Quitar la “bolita” del radio */
.rate-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Al pasar el mouse */
.rate-option:hover {
  border-color: #9ca3af;              /* gris medio */
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

/* Logo/Iniciales */
.rate-logo-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  font-weight: 700;
  text-transform: uppercase;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
}

/* Columna central */
.rate-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.rate-title {
  font-size: 15px;
}
.rate-sub {
  font-size: 12px;
  color: #6b7280;
}

/* Precio a la derecha */
.rate-price {
  font-size: 18px;
  font-weight: 800;
}

/* Badge de días (ya usas .badge, lo afinamos aquí un poco) */
.badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 9999px;
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #e0e7ff;
}

/* Estado seleccionado: sin radio visible, resaltamos la tarjeta */
.rate-row.selected .rate-option {
  background: rgba(34,197,94,0.08);          /* verde suave */
  border-color: rgba(34,197,94,0.6);
  box-shadow: 0 0 0 2px rgba(34,197,94,0.25) inset;
}

/* Indicador de seleccionado (check) en la esquina derecha) */
.rate-row.selected .rate-option::after {
  content: "✓";
  font-weight: 900;
  border-radius: 9999px;
  border: 2px solid rgba(34,197,94,0.8);
  background: #fff;
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center; justify-content: center;
  margin-left: 8px;
}

/* Accesibilidad: resalte al navegar con teclado */
.rate-option:focus-within {
  outline: none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(59,130,246,.25);
}

.rate-logo,
.rate-logo-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  overflow: hidden;
}

/* Logo como imagen */
.rate-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Iniciales (fallback) */
.rate-logo-initials {
  font-weight: 700;
  text-transform: uppercase;
  background: #f3f4f6;
}