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

/* =========================
   BODY
========================= */
body{
  font-family:Arial, Helvetica, sans-serif;
  color:#111827;
}

/* =========================
   NAVBAR
========================= */
.navbar{
  width:100%;
  background:#1e3a8a;
  padding:15px 30px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:1000;
}

.nav-left,
 .nav-right{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}
  
.usuario{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 22px !important;
  margin-bottom: 20px;
  
}
.navbar a{
  color:#fff;
  text-decoration:none;
  font-weight:bold;
  transition:0.3s;
}

.navbar a:hover{
  color:#93c5fd;
}

/* =========================
   LOGOUT BUTTON
========================= */
.logout-btn{
  background:#dc2626;
  color:#fff;
  border:none;
  padding:10px 15px;
  border-radius:6px;
  cursor:pointer;
  font-weight:bold;
  transition:0.3s;
}

.logout-btn:hover{
  background:#b91c1c;
}

/* =========================
   MAIN CONTAINER
========================= */
.container{
  width:95%;
  max-width:1400px;
  margin:30px auto;
}

/* =========================
   TITLES
========================= */


h2{
  margin-bottom:15px;
}

/* =========================
   CARDS
========================= */
.card{
  background:#fff;
  padding:20px;
  border-radius:10px;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
  margin-bottom:20px;
}

/* =========================
   DASHBOARD GRID
========================= */
.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  margin-bottom:30px;
}

/* =========================
   STATS
========================= */
.stat-card{
  background:#fff;
  padding:25px;
  border-radius:10px;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
  text-align:center;
}

.stat-card h3{
  font-size:18px;
  margin-bottom:10px;
}

.stat-card p{
  font-size:30px;
  font-weight:bold;
  color:#1e3a8a;
}

/* =========================
   TABLES
========================= */
table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
}

table th{
  background:#1e3a8a;
  color:#fff;
  padding:12px;
  text-align:left;
}

table td{
  padding:12px;
  border-bottom:1px solid #e5e7eb;
}

table tr:hover{
  background:#f9fafb;
}

/* =========================
   BUTTONS
========================= */
button{
  padding:10px 15px;
  border:none;
  border-radius:6px;
  cursor:pointer;
  font-weight:bold;
  transition:0.3s;
}

button:hover{
  opacity:0.9;
}

/* PRIMARY */
.btn-primary{
  background:#2563eb;
  color:#fff;
}

/* SUCCESS */
.btn-success{
  background:#16a34a;
  color:#fff;
}

/* DANGER */
.btn-danger{
  background:#dc2626;
  color:#fff;
}

/* WARNING */
.btn-warning{
  background:#f59e0b;
  color:#fff;
}

/* =========================
   FORMS
========================= */
form{
  background:#fff;
  padding:20px;
  border-radius:10px;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
}

form label{
  font-weight:bold;
}

form input,
form select,
form textarea{
  width:100%;
  padding:10px;
  margin-top:5px;
  margin-bottom:15px;

  border:1px solid #d1d5db;
  border-radius:6px;
}

form textarea{
  resize:vertical;
}

/* =========================
   MODAL
========================= */
.modal{
   display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    justify-content:center;
    align-items:flex-start;
    overflow-y:auto;
    padding:30px 0;
    z-index:9999;
}

.modal-content{
  background:#fff;
    width:90%;
    max-width:650px;
    border-radius:10px;
    padding:20px;
    margin:auto;
    max-height:90vh;
    overflow-y:auto;
}

/* =========================
   KANBAN
========================= */
.kanban-board{
  display:flex;
  gap:20px;
  overflow-x:auto;
}

.kanban-column{
  background:#e5e7eb;
  min-width:280px;
  padding:15px;
  border-radius:10px;
}

.tarjeta{
  background:#fff;
  padding:15px;
  border-radius:8px;
  margin-bottom:15px;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:768px){

  .navbar{
    flex-direction:column;
    gap:15px;
  }

  .dashboard-grid{
    grid-template-columns:1fr;
  }

  table{
    font-size:14px;
  }

}

/*card inmuebles*/
/* CARD BASE */
.propiedad-card {
  width: 100%;
  max-width: 350px; /* tamaño máximo para desktop */
  margin: 10px auto;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  transition: all 0.25s ease;
}

.propiedad-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

/* IMAGEN */
.img-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.img-wrapper img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.img-wrapper img:hover {
  transform: scale(1.05);
}

/* BADGE */
.badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  color: white;
  text-transform: uppercase;
}

.badge.venta {
  background: #2ecc71;
}

.badge.alquiler {
  background: #333;
}

/* INFO */
.propiedad-info {
  padding: 15px;
}

.propiedad-info h3 {
  margin: 0 0 5px 0;
}

.zona {
  font-size: 14px;
  color: #777;
}

/* CHIPS */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.chip {
  background: #f4f6f8;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* PRECIO */
.precio-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.precio {
  font-size: 16px;
  font-weight: bold;
}

/* BOTÓN */
.btn-ver {
  background: #111;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.2s;
}

.btn-ver:hover {
  background: #333;
}

/* ===================== */
/* GRID PRINCIPAL */
.propiedades-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 10px;
}

/* ===================== */
/* MEDIA QUERIES */
@media (max-width: 768px) {
  .propiedad-card {
    max-width: 100%;
  }

  .img-wrapper img {
    height: 450px;
  }

  .precio {
    font-size: 14px;
  }

  .chip {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .img-wrapper img {
    height: 330px;
  }

  .chip {
    font-size: 11px;
    padding: 5px 8px;
  }

  .precio-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
}
/*css tabla pepiline*/
#pipeline {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding: 10px;
}

.columna {
  flex: 1;
  min-width: 260px;
  background: #f8f9fa;
  border-radius: 10px;
  padding: 10px;
}
@media (max-width: 768px) {
  #pipeline {
    flex-direction: column;
  }

  .columna {
    min-width: 100%;
  }
}
@media (max-width: 768px) {
  .pipeline-card {
    font-size: 14px;
  }

  .acciones button {
    width: 48%;
  }
}
.tarjeta {
  background: white;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.tarjeta,
.pipeline-card {
  width: 100%;
  box-sizing: border-box;
}
/*nuevo pipeline targe 05 06*/
.card-crm {
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: 0.2s;
}

.card-crm:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.crm-header h4 {
  margin: 0;
  font-size: 15px;
}

.crm-body p {
  margin: 6px 0;
  font-size: 13px;
}

.crm-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.crm-actions button {
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}

.crm-actions .editar {
  background: #3498db;
  color: white;
}

.crm-actions .eliminar {
  background: #e74c3c;
  color: white;
}
/*animaciones card*/
.pipeline-card {
  transition: all 0.2s ease;
}

.pipeline-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.12);
}
.pipeline-card {
  transition: all 0.2s ease;
}

.pipeline-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.12);
}
.tarjeta[draggable="true"]:active {
  opacity: 0.6;
  transform: scale(0.98);
}
.columna {
  transition: background 0.2s ease;
}

.columna.drag-over {
  background: rgba(52, 152, 219, 0.08);
  border-radius: 10px;
}
/*css contador por columna*/

.contador{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#3498db;
  color:white;
  font-size:15px;
  font-weight:bold;
  padding:4px 10px;
  border-radius:20px;
  margin-left:8px;
}

.contador-alta{
  color:#fff;
  font-weight:bold;
}
/*css kpi dashboard*/
.kpi-value {
  font-size: 32px;
  font-weight: 800;
  color: #1abc9c;
  transition: all 0.3s ease;
}

.kpi-value:hover {
  transform: scale(1.1);
}
/*css modal*/
.modal-lead {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-content {
  background: white;
  padding: 25px;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
}

.modal-content input,
.modal-content textarea {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
}

#cerrarLead {
  float: right;
  cursor: pointer;
  font-size: 24px;
}
#cancelarLead {
  background: #ccc;
  margin-top: 10px;
  width: 100%;
  padding: 10px;
  border: none;
  cursor: pointer;
}

#cancelarLead:hover {
  background: #bbb;
}
/*css whatsapp*/
.btn-whatsapp {
  background: #25D366;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  cursor: pointer;

  font-size: 16px;
  font-weight: 600;

 

  transition: all 0.3s ease;

  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.btn-whatsapp:hover {
  background: #1ebe5d;

  transform: translateY(-2px);

  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
}

.btn-whatsapp:active {
  transform: scale(0.97);
}

.detalle-botones {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.detalle-botones button {
  flex: 1;
  max-width: 180px;
}


/* ===========================
   RESPONSIVE TARJETAS
=========================== */

@media (max-width:768px){

    .propiedades-grid{
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }

    .propiedad-card{
        max-width:100%;
    }

    .img-wrapper{
        height:420px;
    }

}

@media (max-width:480px){

    .propiedades-grid{
        grid-template-columns:1fr;
    }

    .img-wrapper{
        height:260px;
    }

}