/* reservas.css — UI limpia para listado de reservas (Bootstrap 5) */

/* ----- Variables rápidas (opcionales) ----- */
:root{
  --res-radius: 14px;
  --res-radius-sm: 10px;
  --res-muted: #6c757d;
  --res-border: rgba(0,0,0,.08);
  --res-shadow: 0 .25rem .75rem rgba(0,0,0,.06);

  /* badge soft (estado) */
  --res-badge-bg: rgba(13,110,253,.10);
  --res-badge-fg: #0d6efd;
  --res-badge-border: rgba(13,110,253,.18);
}

/* ----- Contenedor del listado (opcional) ----- */
.res-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ----- Card base ----- */
.res-card{
  border-radius: var(--res-radius);
  border: 1px solid var(--res-border);
  box-shadow: var(--res-shadow);
  overflow: hidden;
  background: #fff;
}

.res-card .card-body{
  padding: 16px;
}

@media (max-width: 576px){
  .res-card .card-body{
    padding: 14px;
  }
}

/* ----- Encabezado: título + monto/estado ----- */
.res-card .res-title{
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.15;
}

.res-card .res-id{
  color: var(--res-muted);
  font-weight: 700;
}

.res-card .res-meta{
  font-size: .90rem;
  color: var(--res-muted);
  line-height: 1.25;
  margin-top: 4px;
}

.res-card .res-amount{
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: .2px;
  white-space: nowrap;
}

@media (max-width: 576px){
  .res-card .res-amount{
    font-size: 1.08rem;
  }
}

/* ----- Divider suave ----- */
.res-card hr{
  margin: 12px 0;
  opacity: .10;
}

/* ----- Cliente (nombre + teléfono) ----- */
.res-card .res-client-name{
  font-weight: 800;
  line-height: 1.15;
}

.res-card .res-client-phone{
  color: var(--res-muted);
  font-size: .90rem;
  margin-top: 2px;
}

/* ----- Badges más legibles (cards móvil) ----- */
.res-card .badge{
  font-weight: 800;
  font-size: .72rem;
  padding: .42em .58em;
  border-radius: 999px;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* ----- Botones / acciones ----- */
.res-card .btn{
  border-radius: var(--res-radius-sm);
}

.res-card .btn.btn-sm{
  padding: .40rem .60rem;
  font-weight: 700;
}

/* Mantener acciones alineadas y sin “saltos” */
.res-card .res-actions{
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 576px){
  .res-card .res-actions{
    justify-content: flex-start;
  }
}

/* Dropdown */
.res-card .dropdown-menu{
  border-radius: 12px;
  border: 1px solid var(--res-border);
  box-shadow: var(--res-shadow);
  padding: 6px;
}

.res-card .dropdown-item{
  border-radius: 10px;
  padding: .55rem .65rem;
  font-weight: 700;
}

.res-card .dropdown-item:active{
  filter: brightness(.96);
}

.res-card .dropdown-divider{
  opacity: .10;
}

/* ----- Detalles (colapsable) ----- */
.res-card .res-details{
  margin-top: 12px;
}

.res-card .kv{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
}

.res-card .kv .kv-item{
  grid-column: span 6;
}

@media (min-width: 768px){
  .res-card .kv .kv-item{
    grid-column: span 3;
  }
  .res-card .kv .kv-item.kv-wide{
    grid-column: span 6;
  }
}

.res-card .kv .k{
  font-size: .78rem;
  color: var(--res-muted);
  line-height: 1.1;
}

.res-card .kv .v{
  font-weight: 800;
  line-height: 1.2;
  margin-top: 2px;
}

/* ----- Micro-mejoras de alineación ----- */
.res-card .res-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.res-card .res-header-left{
  min-width: 0;
  flex: 1 1 auto;
}

.res-card .res-header-right{
  text-align: right;
  flex: 0 0 auto;
}

.res-card .res-title-row{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Evitar overflow en nombres largos */
.res-card .res-title,
.res-card .res-client-name{
  word-break: break-word;
}

/* =============================================================================
   TABLA DESKTOP (lg+)
   ============================================================================= */

/* Tabla desktop (lg+): sin scroll horizontal por exceso de columnas */
.res-table{
  width: 100%;
  table-layout: fixed;
}

.res-table th, .res-table td{
  vertical-align: middle;
}

/* Anchos por header (tu HTML ya usa estas clases en <th>) */
.res-table th.w-hab{ width: 140px; }
.res-table th.w-cli{ width: 170px; }
.res-table th.w-fecha{ width: 105px; }
.res-table th.w-ocup{ width: 80px; }
.res-table th.w-info{ width: 180px; }
.res-table th.w-monto{ width: 120px; }
.res-table th.w-estado{ width: 110px; }
.res-table th.w-acc{ width: 120px; }

/* Truncate */
.res-table .text-truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dropdown más compacto (botón Acciones) */
.res-table .dropdown-toggle.btn-sm{
  padding: .35rem .55rem;
  font-weight: 800;
  border-radius: 10px;
}

.res-table .dropdown-menu{
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.06);
  padding: 6px;
}

.res-table .dropdown-item{
  border-radius: 10px;
  padding: .55rem .65rem;
  font-weight: 800;
}

/* =============================================================================
   FIX REAL: Alineación Monto + Estado visible + separación clara
   (Tu tabla tiene: 6=Info, 7=Monto, 8=Estado, 9=Acciones)
   ============================================================================= */
@media (min-width: 992px){

  /* Padding consistente para TH y TD (esto alinea visualmente encabezado/contenido) */
  .res-table > :not(caption) > * > *{
    padding-top: .60rem !important;
    padding-bottom: .60rem !important;
    padding-left: .85rem !important;
    padding-right: .85rem !important;
  }

  /* INFO (col 6) */
  .res-table thead th:nth-child(6),
  .res-table tbody td:nth-child(6){
    text-align: left !important;
    padding-left: 1rem !important;
  }

  /* MONTO (col 7): header y valores al mismo borde derecho */
  .res-table thead th:nth-child(7),
  .res-table tbody td:nth-child(7){
    text-align: right !important;
    padding-right: 1.1rem !important;
    white-space: nowrap !important;
  }

  /* ESTADO (col 8): que NO quede pegado a monto + centrado */
  .res-table thead th:nth-child(8),
  .res-table tbody td:nth-child(8){
    text-align: center !important;
    padding-left: 1.2rem !important;   /* crea separación real desde Monto */
    white-space: nowrap !important;
  }

  /* ACCIONES (col 9): alineado a la derecha */
  .res-table thead th:nth-child(9),
  .res-table tbody td:nth-child(9){
    text-align: right !important;
    padding-right: 1rem !important;
    white-space: nowrap !important;
  }

  /* ====== BADGE "soft" (porque en tabla no tenías estilo visible) ====== */
  .res-table .badge-soft{
    display: inline-block;
    font-weight: 900;
    font-size: .72rem;
    padding: .42em .62em;
    border-radius: 999px;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1;
    background: var(--res-badge-bg);
    color: var(--res-badge-fg);
    border: 1px solid var(--res-badge-border);
  }

  /* Si por Bootstrap te quedara muy “finito”, esto lo estabiliza */
  .res-table .badge{
    vertical-align: middle;
  }
}