*{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;
  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; 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 */
.badge { display: inline-block; padding: 2px 8px; font-size: 12px; border-radius: 9999px; background: #eef2ff; color: #3730a3; border: 1px solid #e0e7ff; }

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

/* Indicador de seleccionado */
.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 */
.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;
}

.rate-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rate-logo-initials { font-weight: 700; text-transform: uppercase; background: #f3f4f6; }