/* =====================================================================
 * SiRID · Estilos Globales del Sistema
 * Archivo: assets/css/sirid.css
 * ---------------------------------------------------------------------
 * Estandarización de TODOS los modales del proyecto (Dark Mode Binance).
 *
 * Reglas normativas de estructura:
 *   .modal-dialog   → contenedor principal. Nunca supera el 85% del alto
 *                     de la pantalla y organiza su contenido en columna.
 *   .modal-header   → encabezado FIJO en la parte superior (flex-shrink-0).
 *   .modal-body     → ÚNICA área con desplazamiento vertical (flex-1).
 *   .modal-footer   → pie de acciones FIJO en la parte inferior (flex-shrink-0).
 *
 * Convención de marcado (aplicable a todo modal con id="modal-*"):
 *
 *   <div id="modal-x" class="fixed inset-0 z-50 hidden">
 *     <div class="absolute inset-0 bg-black/70 backdrop-blur-sm" data-cerrar-modal="x"></div>
 *     <div class="relative flex items-start justify-center min-h-screen p-4 overflow-y-auto">
 *       <div class="... modal-dialog">
 *         <div class="... modal-header">  …cabecera…  </div>
 *         <form class="...">
 *           <div class="... modal-body">  …contenido desplazable…  </div>
 *           <div class="... modal-footer"> …botones de acción…  </div>
 *         </form>
 *       </div>
 *     </div>
 *   </div>
 * ===================================================================== */

/* 1. Ajuste global de escala (Efecto zoom 90%) */
html {
  font-size: 87.5% !important; /* Reduce la base de 16px a 14px */
}

/* 2. Tablas compactas y densas */
table th,
table td {
  padding: 0.35rem 0.55rem !important; /* Reduce espacio vertical y horizontal */
  white-space: nowrap; /* Evita que los textos se partan en 2 líneas */
}

/* 3. Inputs y selectores más compactos */
/* input,
select,
button {
  font-size: 0.875rem !important;
} */

/* ---------------------------------------------------------------------
 * 1. Contenedor principal del diálogo (máx. 85vh)
 *    El prefijo [id^="modal-"] eleva la especificidad por encima de las
 *    utilidades de Tailwind, garantizando el tema y el límite de alto.
 * ------------------------------------------------------------------- */
[id^="modal-"] .modal-dialog {
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  overflow: hidden;
  /*background-color: #1e2329;*/ /* Fondo del modal */
  border: 1px solid #3e4553; /* Borde divisorio */
}

/* Variante explícita de compatibilidad con el patrón "scrollable". */
[id^="modal-"] .modal-dialog-scrollable {
  max-height: 85vh;
  overflow: hidden;
}

/* El formulario interno (cuando existe) se comporta como contenedor
   flexible, permitiendo que el cuerpo (modal-body) sea el que desplaza. */
[id^="modal-"] .modal-dialog > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* ---------------------------------------------------------------------
 * 2. Cabecera fija (flex-shrink-0)
 * ------------------------------------------------------------------- */
[id^="modal-"] .modal-header {
  flex-shrink: 0;
  background-color: #1e2329;
  border-bottom: 1px solid #3e4553;
}

/* ---------------------------------------------------------------------
 * 3. Cuerpo: única área con scroll vertical (flex-1 overflow-y-auto)
 * ------------------------------------------------------------------- */
[id^="modal-"] .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #474d57 #181a20; /* Firefox: thumb / track */
}

/* ---------------------------------------------------------------------
 * 4. Pie de acciones fijo (flex-shrink-0)
 * ------------------------------------------------------------------- */
[id^="modal-"] .modal-footer {
  flex-shrink: 0;
  background-color: #181a20;
  border-top: 1px solid #3e4553;
}

/* ---------------------------------------------------------------------
 * 5. Barra de scroll temática del cuerpo (6px, estilo Binance)
 * ------------------------------------------------------------------- */
[id^="modal-"] .modal-body::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

[id^="modal-"] .modal-body::-webkit-scrollbar-track {
  background: #181a20;
  border-radius: 3px;
}

[id^="modal-"] .modal-body::-webkit-scrollbar-thumb {
  background: #474d57;
  border-radius: 3px;
}

[id^="modal-"] .modal-body::-webkit-scrollbar-thumb:hover {
  background: #f0b90b;
}

/* ---------------------------------------------------------------------
 * 6. Placeholders aligerados (reducción de carga visual)
 *    Unifica el texto guía de TODOS los campos de entrada del sistema:
 *    gris medio apagado (#707a8a), cursiva y peso ligero (300).
 *
 *    NOTA DE COMPATIBILIDAD (crítica):
 *    Cada variante con prefijo de proveedor se declara en su PROPIA regla.
 *    Si se agrupan en una misma lista de selectores junto a un selector que
 *    el navegador NO reconoce (p. ej. `:-ms-input-placeholder` es una
 *    pseudo-CLASE desconocida en Chrome/Firefox), la especificación invalida
 *    la lista completa y el navegador DESCARTA toda la regla: ese era el
 *    motivo por el que el estilo no llegaba a aplicarse. Separadas, el
 *    navegador solo descarta la variante que no entiende y aplica las demás.
 *    El pseudo-elemento estándar `::placeholder` cubre todos los navegadores
 *    modernos (Chrome 57+, Firefox 51+, Safari 10.1+, Edge 79+).
 *    El `!important` prevalece sobre la utilidad de Tailwind
 *    `.placeholder-binance-muted::placeholder`.
 * ------------------------------------------------------------------- */
input::placeholder,
textarea::placeholder,
select::placeholder {
  color: #707a8a !important;
  font-style: italic !important;
  font-weight: 300 !important;
  opacity: 1;
}

::placeholder {
  color: #707a8a !important;
  font-style: italic !important;
  font-weight: 300 !important;
  opacity: 1;
}

::-webkit-input-placeholder {
  color: #707a8a !important;
  font-style: italic !important;
  font-weight: 300 !important;
  opacity: 1;
}

::-moz-placeholder {
  color: #707a8a !important;
  font-style: italic !important;
  font-weight: 300 !important;
  opacity: 1;
}