/* ============================= */
/* 🚀 Estilos Globales DataTables */
/* ============================= */

/* 🎯 Evitar saltos de línea y mantener el ancho fijo en la columna "Descripción" */
table.dataTable td.dt-nowrap {
    max-width: 400px !important; /* Define el ancho máximo */
    width: 200px !important; /* Define un ancho fijo */
    min-width: 200px !important; /* Evita que la celda se encoja demasiado */
    white-space: nowrap !important; /* No permite saltos de línea */
    overflow: hidden !important; /* Oculta el exceso de texto */
    text-overflow: ellipsis !important; /* Agrega "..." cuando el texto es largo */
    display: table-cell !important; /* Evita que la celda tenga un contorno cuadrado */
    vertical-align: middle !important; /* Asegura alineación correcta */
}


/* 🎯 Espaciado entre los botones dentro de contenedores flexibles */
.d-flex {
    gap: 10px !important; /* Espacio entre botones */
}

/* 🎯 Estilos para la cabecera de la tabla (thead) */
table.dataTable thead th {
    background-color: #007bff !important; /* Fondo azul */
    color: white !important; /* Texto blanco */
    font-weight: 500 !important; /* Texto en negrita */
    text-align: center !important; /* Centrado */
}

/* 🎯 Estilos para mejorar la presentación de la tabla */
div.dataTables_wrapper {
    padding: 20px !important;
    margin-top: 20px !important;
}

/* 🎯 Mantener el campo "Código" con ancho fijo */
table.dataTable th.dt-codigo {
    max-width: 120px !important; /* Define el ancho máximo */
    width: 120px !important; /* Define un ancho fijo */
    min-width: 120px !important; /* Evita que se reduzca demasiado */
    white-space: nowrap !important; /* Evita que el texto haga saltos de línea */
    overflow: hidden !important; /* Oculta el texto que se desborde */
    text-overflow: ellipsis !important; /* Muestra "..." si el texto es muy largo */
    text-align: center !important; /* Centra el texto dentro de la celda */
}

.rotate-icon {
    transition: transform 0.3s ease;
}
.rotate-icon.rotated {
    transform: rotate(180deg);
}

/* Estilos de panel */
/* ====== Cumpleaños del mes ====== */

/* Contenedor con scroll */
.scrollable-list {
  max-height: 360px;       /* Ajusta según necesidad */
  overflow-y: auto;
}

/* Cumpleaños de HOY */
.list-group-item.today {
  background: #fff7f7;
  border-left: 4px solid #dc3545; /* rojo */
}

/* Badge en el header */
#contadorCumples { font-weight: 600; }

/* Estado "sin resultados" */
#sinResultados { font-style: italic; text-align: center; }

/* Input buscador */
#filtroCumples { border-radius: 0.25rem; }

/* Hover sutil */
.list-group-item:hover {
  background-color: #f8f9fa;
  transition: background-color 0.2s ease;
}
/* Estilos de panel */

/* Estilos de index */
/* Fondo y tipografía */
body.login-page{
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(14,165,233,.15), transparent 60%),
    radial-gradient(1200px 600px at 110% 110%, rgba(14,165,233,.18), transparent 60%),
    linear-gradient(135deg,#0f172a 0%, #111827 50%, #0b1220 100%);
  color:#e5e7eb;
}

/* Tarjeta tipo glassmorphism */
.card.login-card{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(17,24,39,.65);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 20px 35px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  border-radius:16px;
  overflow:hidden;
}

/* Inputs */
.input-group .form-control{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#e5e7eb;
}
.input-group-text{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#cbd5e1;
}
.form-control::placeholder{ color:#94a3b8; }

/* Botón principal */
.btn-brand{
  background:#0ea5e9;
  border-color:#0ea5e9;
  box-shadow:0 10px 18px rgba(14,165,233,.25);
  transition:transform .04s ease, box-shadow .2s ease;
}
.btn-brand:hover{
  background:#0284c7;
  border-color:#0284c7;
}
.btn-brand:active{ transform: translateY(1px); }

/* Badge de marca opcional */
.brand-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .75rem; border-radius:9999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  font-size:.825rem; backdrop-filter:blur(6px);
}

/* Modo claro si el SO lo solicita */
@media (prefers-color-scheme: light){
  body.login-page{
    background:
      radial-gradient(1200px 600px at 10% -10%, rgba(14,165,233,.18), transparent 60%),
      radial-gradient(1200px 600px at 110% 110%, rgba(14,165,233,.22), transparent 60%),
      linear-gradient(135deg,#e5f2ff 0%, #f5faff 60%, #eef6ff 100%);
    color:#0f172a;
  }
  .card.login-card{
    background:rgba(255,255,255,.9);
    border:1px solid rgba(2,132,199,.10);
  }
  .input-group .form-control,
  .input-group-text{
    background:rgba(255,255,255,.92);
    border-color:rgba(2,132,199,.18);
    color:#0f172a;
  }
  .form-control::placeholder{ color:#64748b; }
}
/* Fin Estilos de index */

/* Ajustes táctiles y tipografía en móviles */
@media (max-width: 576px) {
  #posadaTable td, #posadaTable th {
    padding: 0.5rem;
    font-size: 0.85rem;
    vertical-align: middle;
  }

  /* Botones más compactos en general */
  .btn.btn-sm {
    padding: 0.25rem 0.45rem;
    font-size: 0.8rem;
    line-height: 1.1;
  }

  /* Contenedor DataTables no desborde */
  .dataTables_wrapper {
    overflow-x: auto;
  }
}

/* Espaciado ordenado para la botonera en desktop */
.acciones {
  gap: 4px;
}




/* ============================= */
/* 🔹 Fin de los Estilos Globales */
/* ============================= */