/* ===============================
   MotelControl – Identidad visual
   =============================== */

:root {
  --mm-primary: #1F2A44;       /* Azul MotelControl */
  --mm-primary-dark: #162034;
  --mm-success: #1FA67A;       /* Disponible */
  --mm-danger: #C44536;        /* Ocupada */
  --mm-warning: #E6A700;       /* Limpieza */
  --mm-muted: #6c757d;

  --mm-bg: #F5F6FA;
  --mm-card: #FFFFFF;
  --mm-border: #E0E3EB;
}

/* Fondo general */
body {
  background-color: var(--mm-bg);
}

/* ===============================
   NAVBAR
   =============================== */

.navbar-mimotel {
  background-color: var(--mm-primary);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.navbar-mimotel .navbar-brand,
.navbar-mimotel .nav-link,
.navbar-mimotel .btn-link {
  color: #ffffff;
}

.navbar-mimotel .nav-link:hover {
  color: #dbe2ff;
}

.navbar-mimotel .badge {
  background-color: rgba(255,255,255,0.15);
  color: #fff;
}
.navbar-mimotel .btn-mimotel-outline {
  border-color: rgba(255,255,255,.65) !important;
  color: #fff !important;
}
.navbar-mimotel .btn-mimotel-outline:hover {
  background: rgba(255,255,255,.12);
}



/* ===============================
   BOTONES
   =============================== */

.btn-mimotel {
  background-color: var(--mm-primary);
  color: #fff;
  border: none;
}

.btn-mimotel:hover {
  background-color: var(--mm-primary-dark);
  color: #fff;
}

.btn-mimotel-outline {
  background: transparent;
  color: var(--mm-primary);
  border: 1px solid var(--mm-primary);
}

.btn-mimotel-outline:hover {
  background-color: var(--mm-primary);
  color: #fff;
}

/* Estados */
.btn-success,
.btn-mm-success {
  background-color: var(--mm-success);
  border: none;
}
.btn-success:hover {
  background-color: #168d67;
}

.btn-danger,
.btn-mm-danger {
  background-color: var(--mm-danger);
  border: none;
}
.btn-danger:hover {
  background-color: #a8372c;
}

.btn-warning,
.btn-mm-warning {
  background-color: var(--mm-warning);
  border: none;
  color: #000;
}

/* ===============================
   CARDS
   =============================== */

.card {
  border-radius: 10px;
  border: 1px solid var(--mm-border);
}

.card.shadow-sm {
  box-shadow: 0 6px 16px rgba(31,42,68,0.08);
}

/* ===============================
   BADGES (estados)
   =============================== */

.badge-mm-disponible {
  background-color: var(--mm-success);
}

.badge-mm-ocupada {
  background-color: var(--mm-danger);
}

.badge-mm-limpieza {
  background-color: var(--mm-warning);
  color: #000;
}

.badge-mm-bloqueada {
  background-color: #9aa0a6;
}

/* ===============================
   TABLAS
   =============================== */

.table th {
  color: var(--mm-muted);
  font-weight: 600;
  font-size: 0.85rem;
}

.table td {
  vertical-align: middle;
}

/* ===============================
   MODALES
   =============================== */

.modal-header {
  background-color: var(--mm-primary);
  color: #fff;
}

.modal-header .btn-close {
  filter: invert(1);
}

/* ===============================
   Tablero Recepción (Tiles)
   =============================== */

.mm-board{
  display: grid;
  gap: 12px;

  /* Máx 5 por fila, pero responsive real */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* límite: no más de 5 columnas */
@media (min-width: 1200px){
  .mm-board{
    grid-template-columns: repeat(5, minmax(220px, 1fr));
  }
}

/* tablets */
@media (max-width: 992px){
  .mm-board{
    grid-template-columns: repeat(3, minmax(200px, 1fr));
  }
}

/* móvil */
@media (max-width: 768px){
  .mm-board{
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}
@media (max-width: 480px){
  .mm-board{
    grid-template-columns: 1fr;
  }
}

.mm-tile{
  border-radius: 14px;
  background: var(--mm-card);
  border: 1px solid var(--mm-border);
  box-shadow: 0 6px 18px rgba(31,42,68,.10);
  transition: transform .15s ease, box-shadow .15s ease;
}

.mm-tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(31,42,68,.18);
}

.mm-tile__top {
  padding: 12px 12px 8px 12px;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.mm-tile__clave {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.mm-tile__tipo {
  font-size: 12px;
  color: var(--mm-muted);
  margin-top: 2px;
}

.mm-tile__estado {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* estado -> color */
.mm-estado-disponible { background: rgba(31,166,122,.15); color: var(--mm-success); border: 1px solid rgba(31,166,122,.35); }
.mm-estado-ocupada    { background: rgba(196,69,54,.12);  color: var(--mm-danger);  border: 1px solid rgba(196,69,54,.30); }
.mm-estado-limpieza   { background: rgba(230,167,0,.18);  color: #7a5600;          border: 1px solid rgba(230,167,0,.35); }
.mm-estado-bloqueada  { background: rgba(154,160,166,.18); color: #4b5563;          border: 1px solid rgba(154,160,166,.35); }

.mm-tile__mid {
  padding: 0 12px 10px 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.mm-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--mm-border);
  background: #fff;
  color: #111827;
}

.mm-tile__actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mm-tile__actions .btn{
  width: 100%;
}

/* Separadores por estado dentro del grid */
.mm-sep{
  grid-column: 1 / -1;         /* ocupa toda la fila */
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 2px;
  padding-top: 6px;
   margin-top: 16px;
}

.mm-sep__title{
  font-weight: 800;
  font-size: 12px;
  color: var(--mm-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mm-sep__line{
  flex: 
}

/* Hover card */
.mm-tile{
  transition: transform .12s ease, box-shadow .12s ease;
}
.mm-tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(31,42,68,0.14);
}

/* Fade-in al render */
.mm-fade-in{
  animation: mmFade .18s ease-out both;
}
@keyframes mmFade{
  from{ opacity: 0; transform: translateY(3px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Urgente (por vencer) */
.mm-urgent{
  border-color: rgba(196,69,54,.45);
}
.mm-pill--urgent{
  border-color: rgba(196,69,54,.35);
  background: rgba(196,69,54,.08);
}