:root {
  --bg-color: #000000;
  --card-bg: #1a1a1a;
  --input-bg: #242424;
  --text-main: #ffffff;
  --text-dim: #757575;
  --monster-stroke: #000000;
  --corp-blue: #035498;
  --corp-green: #1AA068;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--bg-color);
  color: var(--text-main);
  font-family: 'Inter', system-ui, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow-x: hidden;
  padding: 20px;
}

/* Alertas de Feedback */
.alert {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  margin-top: 20px;
  font-size: 0.85rem;
  line-height: 1.4;
  border: 1px solid transparent;
  animation: fadeIn 0.3s ease-out;
  text-align: center;
}

.alert-error {
  background-color: rgba(255, 77, 77, 0.1);
  border-color: rgba(255, 77, 77, 0.2);
  color: #ff6666;
}

.alert-success {
  background-color: rgba(26, 160, 104, 0.1);
  border-color: rgba(26, 160, 104, 0.2);
  color: #24d18b;
}

.alert ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Validaciones y Estados */
.error-mensaje {
  color: #ff4d4d;
  font-size: 0.75rem;
  margin-top: 4px;
  display: block;
  text-align: left;
}

.disponibilidad-mensaje {
  color: #1AA068;
  font-size: 0.75rem;
  margin-top: 4px;
  display: block;
  text-align: left;
}

.btn-login-desabilitado {
  opacity: 0.5;
  cursor: not-allowed !important;
  filter: grayscale(1);
}

.background-city {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 300" preserveAspectRatio="none"><path d="M0,300 L0,200 L30,200 L30,150 L60,150 L60,230 L100,230 L100,100 L140,100 L140,180 L180,180 L180,50 L220,50 L220,200 L260,200 L260,120 L300,120 L300,250 L340,250 L340,100 L380,100 L380,180 L420,180 L420,30 L460,30 L460,200 L500,200 L500,120 L540,120 L540,250 L580,250 L580,100 L620,100 L620,180 L660,180 L660,50 L700,50 L700,200 L740,200 L740,120 L780,120 L780,250 L820,250 L820,100 L860,100 L860,180 L900,180 L900,30 L940,30 L940,200 L1000,200 L1000,300 Z" fill="%231a1a1a"/></svg>');
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
  opacity: 0.5;
}

.login-card {
  width: 100%;
  max-width: 700px;
  position: relative;
}

.yeti-wrapper {
  width: 170px;
  margin: 0 auto -12px;
  position: relative;
  z-index: 2;
}

#yeti-svg {
  width: 100%;
  height: auto;
  display: block;
}

.yeti-part {
  fill: #fff;
  stroke: var(--monster-stroke);
  stroke-width: 3.5;
  stroke-linecap: round;
}

.suit-jacket {
  fill: var(--corp-blue);
  stroke: var(--monster-stroke);
  stroke-width: 3.5;
}

.suit-shirt {
  fill: #fff;
  stroke: var(--monster-stroke);
  stroke-width: 2.5;
}

.suit-tie {
  fill: var(--corp-green);
  stroke: var(--monster-stroke);
  stroke-width: 2.5;
}

#face-group {
  transition: transform 0.2s ease-out;
}

.hand {
  fill: #fff;
  stroke: var(--monster-stroke);
  stroke-width: 3.5;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Animaciones Yeti */
.hiding-pass .hand-l {
  transform: translate(35px, -72px);
}

.hiding-pass .hand-r {
  transform: translate(-35px, -72px);
}

.peek-active .hand-r {
  transform: translate(0, 0) !important;
}

.form-content {
  background: var(--card-bg);
  padding: 30px 25px 25px;
  border-radius: 24px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8);
  border: 1px solid #252525;
  text-align: center;
}

.logo-text {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 5px;
  display: block;
}

.subtitle {
  color: var(--text-dim);
  font-size: 0.7rem;
  margin-bottom: 15px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  text-align: left;
}

.input-wrapper {
  position: relative;
}

.full-width {
  grid-column: span 2;
}

input {
  width: 100%;
  padding: 10px 14px;
  background: var(--input-bg);
  border: 2px solid #2a2a2a;
  border-radius: 10px;
  color: white;
  font-size: 0.9rem;
  outline: none;
  box-sizing: border-box;
  transition: border 0.3s;
}

input:focus {
  border-color: var(--corp-blue);
}

.toggle-pass {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #555;
  display: flex;
}

.btn-submit {
  width: 100%;
  padding: 16px;
  background: white;
  color: black;
  border: none;
  border-radius: 14px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 10px;
  font-size: 1rem;
}

.nav-link {
  display: inline-block;
  margin-top: 20px;
  color: var(--text-dim);
  font-size: 0.85rem;
  text-decoration: none;
}

.error-mensaje {
  color: #ff4d4d;
  font-size: 0.75rem;
  margin-top: 4px;
  display: block;
  text-align: left;
}

.disponibilidad-mensaje {
  color: #1AA068;
  font-size: 0.75rem;
  margin-top: 4px;
  display: block;
  text-align: left;
}

.btn-login-desabilitado {
  opacity: 0.5;
  cursor: not-allowed !important;
  filter: grayscale(1);
}

.nav-link b {
  color: var(--corp-blue);
}

/* Eliminado para centralizar en la media query del final */

/* --- NUEVOS ESTILOS PARA REGISTRO DINÁMICO --- */

label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dim);
}

select {
  width: 100%;
  padding: 10px 14px;
  background: var(--input-bg);
  border: 2px solid #2a2a2a;
  border-radius: 10px;
  color: #757575;
  font-size: 0.9rem;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 95%;
  background-position-y: 50%;
  transition: border 0.3s;
}

select:focus {
  border-color: var(--corp-blue);
}

.seccion-dinamica {
  margin-bottom: 10px;
  animation: slideDown 0.4s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.grid-planes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.card-plan {
  display: block;
  border: 2px solid #2a2a2a;
  padding: 12px 15px;
  border-radius: 12px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
}

.card-plan:hover {
  border-color: #444;
  background: rgba(255, 255, 255, 0.05);
}

.card-plan b {
  font-size: 1.1rem;
  display: block;
  margin-bottom: 5px;
}

.card-plan .precio {
  color: var(--corp-blue);
  font-weight: 800;
  font-size: 1.3rem;
}

.card-plan p {
  font-size: 0.8rem;
  margin-top: 10px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* Estado seleccionado (se maneja con JS o checkbox:checked) */
input[name="plan_id"]:checked+.card-plan {
  border-color: var(--corp-blue);
  background: rgba(3, 84, 152, 0.1);
  box-shadow: 0 0 20px rgba(3, 84, 152, 0.2);
}

.grid-arrendador {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  padding: 0;
}

@media (max-width: 600px) {
  .grid-container, .grid-arrendador, .grid-planes {
    grid-template-columns: 1fr;
  }

  .full-width {
    grid-column: span 1;
  }
  
  .form-content {
    padding: 24px 16px 16px;
  }
  
  body {
    padding: 10px;
  }
}