:root{
  --bg:#0f172a;        /* slate-900 */
  --card:#111827;      /* gray-900 */
  --muted:#94a3b8;     /* slate-400 */
  --primary:#22d3ee;   /* cyan-400 */
  --primary-2:#06b6d4; /* cyan-500 */
  --ring:#334155;      /* slate-700 */
  --ok:#16a34a;        /* green-600 */
  --err:#ef4444;       /* red-500 */
  --table-bg:#0b1224;
}

* {
  box-sizing: border-box;
}

/* Animación del fondo degradado */
@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

body{
  margin:0;
  background: linear-gradient(-45deg, #0b1224, #1a1f3a);
  background-size: 400% 400%;
  animation: gradientAnimation 8s ease infinite;
  color:#e5e7eb;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  min-height:100dvh;
  display:flex;
  flex-direction: column;
  align-items:center;
  padding:0;
  padding-bottom: 40px;
}

/* Header principal */
.main-header{
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 30px 20px 30px 20px;
}

.main-title{
  margin: 0;
  padding: 0;
  font-size: 48px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary), #67e8f9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 1px;
  text-shadow: 0 0 40px rgba(34,211,238,.3);
  display: block;
}

/* Contenedor del botón añadir */
.add-button-container{
  width: 100%;
  padding: 20px;
  border: 2px solid rgba(34, 211, 238, 0.3);
  border-radius: 20px;
  background: rgba(15, 23, 42, 0.4);
  margin-bottom: 20px;
}

.wrap{
  width: 100%;
  max-width: 1100px;
  display:grid;
  gap:20px;
  grid-template-columns: 1fr;
  padding: 0 20px;
}

.card{
  background: rgba(17,24,39,0.75);
  backdrop-filter: blur(8px);
  /*border:1px solid var(--ring);*/
  border-radius:18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  overflow: hidden;
}

.card-header{
  padding:16px 18px;
  border-bottom:1px solid var(--ring);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.form-header-centered{
  justify-content: center;
  cursor: pointer;
  padding: 12px 18px;
}

.title{
  font-size:18px;
  font-weight:700;
  letter-spacing:.3px;
  display:flex;
  gap:10px;
  align-items:center;
}

.title .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 12px var(--primary);
  flex-shrink: 0;
}

.count-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 50%;
  background: #ffffff !important;
  color: #000000 !important;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  flex-shrink: 0;
}

.card-content{
  padding:18px;
  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

/* Botón toggle del formulario */
.btn-toggle{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #07111a;
  font-size: 28px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 12px rgba(34,211,238,.3);
  line-height: 0;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  text-align: center;
}

.btn-toggle:hover{
  box-shadow: 0 6px 16px rgba(34,211,238,.4);
  transform: scale(1.1);
}

.btn-toggle.rotated{
  transform: rotate(45deg);
}

.btn-toggle.rotated:hover{
  transform: rotate(45deg) scale(1.1);
}

/* Form */
form{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

label{
  font-size:12px;
  color:var(--muted);
  font-weight: 500;
}

input{
  background:#0b1224;
  color:#e5e7eb;
  border:1px solid var(--ring);
  border-radius:12px;
  padding:12px 14px;
  outline:none;
  transition: border .15s ease, box-shadow .15s ease;
  font-size: 14px;
  width: 100%;
  max-width: 100%;
}

input:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(34,211,238,.15);
}

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

.actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap: wrap;
}

button{
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  border:none;
  color:#07111a;
  font-weight:700;
  padding:12px 20px;
  border-radius:12px;
  cursor:pointer;
  transition: transform .05s ease, box-shadow .2s ease;
  box-shadow: 0 10px 24px rgba(6,182,212,.25);
  font-size: 14px;
  white-space: nowrap;
}

button:hover{
  box-shadow: 0 12px 28px rgba(6,182,212,.35);
}

button:active{
  transform: translateY(1px);
}

.msg{
  font-size:14px;
  line-height: 1.4;
}

.msg.ok{ color: var(--ok); }
.msg.err{ color: var(--err); }

/* Controles de ordenamiento */
.sort-controls{
  display: flex;
  gap: 8px;
}

.btn-sort{
  padding: 8px 14px;
  font-size: 12px;
  background: rgba(51,65,85,0.5);
  color: var(--muted);
  box-shadow: none;
}

.btn-sort:hover{
  background: rgba(51,65,85,0.8);
  box-shadow: none;
}

.btn-sort.active{
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #07111a;
  box-shadow: 0 4px 12px rgba(6,182,212,.25);
}

/* Grid de tarjetas de pisos */
.pisos-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 16px;
}

/* Tarjeta individual de piso */
.piso-card{
  background: var(--table-bg);
  border: 1px solid var(--ring);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.piso-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(34,211,238,.15);
  border-color: var(--primary);
}

/* Header de la tarjeta */
.piso-card-header{
  background: rgba(2,6,23,.6);
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--ring);
}

.precio-badge{
  display: inline-block;
  padding: 8px 16px;
  border-radius: 10px;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(34,211,238,0.2), rgba(6,182,212,0.2));
  color: #67e8f9;
  border: 1px solid rgba(34,211,238,0.4);
  font-size: 18px;
  box-shadow: 0 4px 12px rgba(34,211,238,.2);
}

.piso-acciones{
  display: flex;
  gap: 8px;
}

/* Cuerpo de la tarjeta */
.piso-card-body{
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.piso-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.piso-label{
  font-size: 11px;
  color: #a5b4fc;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.piso-link{
  color: var(--primary);
  text-decoration: none;
  word-break: break-all;
  transition: color .15s ease;
  font-size: 14px;
  line-height: 1.5;
}

.piso-link:hover{
  color: #67e8f9;
  text-decoration: underline;
}

.piso-comentarios{
  margin: 0;
  color: #e5e7eb;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.piso-telefono{
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  transition: color .15s ease;
}

.piso-telefono:hover{
  color: #67e8f9;
  text-decoration: underline;
}

.piso-fecha{
  color: var(--muted);
  font-size: 13px;
}

/* Estado vacío (sin pisos) */
.empty-state-container{
  width: 100%;
  padding: 40px 20px;
}

.empty-message{
  font-size: 20px;
  color: #e5e7eb;
  margin: 0;
  font-weight: 400;
  text-align: left;
}

/* Acciones (botones editar/eliminar) */
.acciones{
  display: flex;
  gap: 8px;
  white-space: nowrap;
}

.btn-editar,
.btn-eliminar{
  padding: 6px 10px;
  font-size: 14px;
  border-radius: 8px;
  cursor: pointer;
  border: none;
  transition: all .15s ease;
  background: rgba(51,65,85,0.5);
  box-shadow: none;
}

.btn-editar:hover{
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  box-shadow: 0 4px 12px rgba(251,191,36,.3);
  transform: translateY(-1px);
}

.btn-eliminar:hover{
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 4px 12px rgba(239,68,68,.3);
  transform: translateY(-1px);
}

/* Responsive Tablets */
@media (max-width: 900px){
  .title{
    font-size: 16px;
  }

  .count-badge{
    min-width: 26px;
    height: 26px;
    font-size: 13px;
  }

  .btn-sort{
    padding: 6px 10px;
    font-size: 11px;
  }

  .pisos-grid{
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }

  .precio-badge{
    font-size: 16px;
    padding: 6px 12px;
  }
}

/* Responsive Mobile */
@media (max-width: 700px){
  body{
    padding: 20px 0;
  }

  .main-header{
    margin-bottom: 20px;
    padding: 0 16px;
  }

  .main-title{
    font-size: 32px;
  }

  .wrap{
    gap: 16px;
    padding: 0 16px;
  }

  .card{
    border-radius: 14px;
  }

  .card-header{
    padding: 14px 16px;
    flex-direction: column;
    align-items: flex-start;
  }

  .sort-controls{
    width: 100%;
    justify-content: flex-start;
  }

  .card-content{
    padding: 16px;
  }

  form{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .span-2{
    grid-column: auto;
  }

  .title{
    font-size: 16px;
  }

  .count-badge{
    min-width: 24px;
    height: 24px;
    font-size: 12px;
    padding: 0 6px;
  }

  input{
    padding: 11px 13px;
    font-size: 16px; /* Evita zoom en iOS */
    width: 100%;
    max-width: 100%;
  }

  button{
    width: 100%;
    padding: 13px 20px;
  }

  #btnCancelar{
    width: 100%;
  }

  .actions{
    flex-direction: column;
    align-items: stretch;
  }

  .msg{
    text-align: center;
    width: 100%;
  }

  .pisos-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .piso-card-header{
    padding: 12px 14px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .precio-badge{
    font-size: 16px;
    padding: 6px 12px;
  }

  .piso-card-body{
    padding: 14px;
  }

  .btn-editar,
  .btn-eliminar{
    padding: 5px 8px;
    font-size: 13px;
  }

  .btn-toggle{
    width: 32px;
    height: 32px;
    font-size: 20px;
  }
}

/* Responsive Small Mobile */
@media (max-width: 400px){
  body{
    padding: 16px 0;
  }

  .main-header{
    margin-bottom: 16px;
    padding: 0 12px;
  }

  .main-title{
    font-size: 28px;
  }

  .wrap{
    padding: 0 12px;
  }

  .card{
    border-radius: 12px;
  }

  .card-header{
    padding: 12px 14px;
  }

  .card-content{
    padding: 14px;
  }

  .title{
    font-size: 15px;
  }

  .title .dot{
    width: 8px;
    height: 8px;
  }

  .count-badge{
    min-width: 22px;
    height: 22px;
    font-size: 11px;
    padding: 0 5px;
    background-color: white !important;
    color: black !important;
  }

  input{
    padding: 10px 12px;
  }

  button{
    padding: 12px 18px;
    font-size: 13px;
  }

  .pisos-grid{
    gap: 12px;
  }

  .piso-card{
    border-radius: 12px;
  }

  .piso-card-header{
    padding: 10px 12px;
  }

  .piso-card-body{
    padding: 12px;
  }

  .precio-badge{
    font-size: 15px;
    padding: 5px 10px;
  }
}