/* ===========================
   ui-guard.css
   "Airbag" visual para estabilizar UI entre Admin/User
   - No reemplaza CSS de vistas
   - Reduce pisadas de CSS global
   =========================== */

   :root {
    --ui-radius-card: 0.95rem;
    --ui-radius-input: 0.65rem;
    --ui-border: rgba(0, 0, 0, 0.08);
    --ui-border-soft: rgba(0, 0, 0, 0.06);
    --ui-shadow: 0 0.125rem 0.55rem rgba(0, 0, 0, 0.06);
    --ui-pad: 1rem;
    --ui-pad-sm: 0.85rem;
    --ui-gap: 0.9rem;
  }
  
  /* ---------
     MAIN CONTENT GUARD
     --------- */
  .main-content {
    /* Evita que algún CSS global te meta padding/margen raro */
    padding: 0.75rem 0;
  }
  
  /* Evita que títulos queden con márgenes locos por estilos heredados */
  .main-content h1,
  .main-content h2,
  .main-content h3 {
    line-height: 1.15;
  }
  
  /* ---------
     CARD GUARD
     - Si alguna vista usa .card Bootstrap, que no se “ensucie” por CSS externo
     --------- */
  .main-content .card {
    border-radius: var(--ui-radius-card);
  }
  
  /* ---------
     VIEW CARD PATTERN (nuestros formularios/listados)
     - Soporta clases tipo aprest-card, mprest-card, lp-card, etc.
     --------- */
  .main-content [class$="-card"] {
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-card);
    box-shadow: var(--ui-shadow);
    overflow: hidden; /* evita bordes feos con headers/footers */
  }
  
  /* Body/Footer típicos en nuestros componentes */
  .main-content [class$="-body"] {
    padding: var(--ui-pad);
  }
  
  .main-content [class$="-footer"] {
    padding: var(--ui-pad-sm) var(--ui-pad);
    border-top: 1px solid var(--ui-border);
    background: #fff; /* neutraliza colores heredados */
  }
  
  /* Si un CSS global te pone fondos raros en headers, no lo tocamos acá a propósito
     porque algunos headers sí tienen bg-primary. */
  
  /* ---------
     FORM CONTROLS GUARD
     - Normaliza radios, inputs, selects, etc.
     --------- */
  .main-content .form-control,
  .main-content .form-select {
    border-radius: var(--ui-radius-input);
  }
  
  .main-content .form-control:focus,
  .main-content .form-select:focus {
    /* que no quede un foco exagerado por reglas globales */
    box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.15); /* Bootstrap-ish suave */
  }
  
  /* Labels un poco más consistentes */
  .main-content .form-label {
    font-weight: 700;
  }
  
  /* ---------
     FIELDSET GUARD
     - Tus fieldsets "dashed" y prolijos
     --------- */
  .main-content fieldset {
    border-radius: 0.85rem;
  }
  
  /* ---------
     TABULATOR GUARD
     - Wrapper estable (evita loops de resize)
     - Neutraliza algunos bordes
     --------- */
/*   .tabulator-wrap {
    width: 100%;
    overflow-x: auto;
  }
 */
  
  /* Tabulator: evita que algún CSS global cambie tipografías/bordes inesperados */
  .tabulator {
    border: 1px solid var(--ui-border-soft);
    border-radius: 0.85rem;
  }
  
  .tabulator .tabulator-header {
    border-bottom: 1px solid var(--ui-border-soft);
  }
  
  .tabulator .tabulator-row .tabulator-cell {
    vertical-align: middle;
  }
  
  /* ---------
     RESPONSIVE GUARD
     - Evita layouts quebrados en mobile por padding/margins heredados
     --------- */
  @media (max-width: 768px) {
    .main-content {
      padding: 0.5rem 0;
    }
  
    .main-content [class$="-body"] {
      padding: 0.85rem;
    }
  
    .main-content [class$="-footer"] {
      padding: 0.75rem 0.85rem;
    }
  }
  
  .app-main-scroll{
    height: calc(100vh - 56px); /* 56px = navbar (ajustá si cambia) */
    overflow-y: auto;
    overflow-x: hidden;
  }

  .tabulator-wrap{
    width: 100%;
    overflow: hidden;        /* Tabulator maneja el scroll */
  }
  

  .tabulator-wrap{
    width: 100%;
    overflow: hidden;        /* Tabulator maneja el scroll */
  }
  
  #tabla-turnos{
    width: 100%;
  }
  #tabla-pacientes{
    width: 100%;
  }
  #tabla-profesionales{
    width: 100%;
  }
  #tablaEspecialidades{
    width: 100%;
  }
  #tablaPrestaciones{
    width: 100%;
  }  
  #tablaTurnos{
    /* Cancelar turnos */
    width: 100%;  
  }
  #tablaUsuarios{
    width: 100%;
  }
  #tablaABMHorarios{
    width: 100%;
  }