/* =========================================================
   Deturnos - Mobile full-bleed + mobile tables
   Se carga al final: style.css -> global.css -> dt_mobile_tables.css
   ========================================================= */

/* --------
   MOBILE: layout full width (todas las pantallas)
   -------- */
@media (max-width: 768px){

  /* Elimina el “margen/padding” lateral que achica todo */
  .main-wrapper{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Asegura 100% ancho y sin gutters laterales */
  .main-wrapper .widget-list,
  .main-wrapper .widget-holder,
  .main-wrapper .widget-body,
  .main-wrapper .widget-body .row,
  .main-wrapper .widget-body [class*="col-"]{
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Card a “full bleed”: sin borde redondeado (tipo app nativa) */
  .dt-card{
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* Header/body sin padding extra, lo controlás acá */
  .dt-card__head{
    padding: 14px 14px !important;
  }
  .dt-card__body{
    padding: 14px 14px !important;
  }

  /* Requerimiento puntual: titulo sin margen superior */
  .dt-card__title{
    margin-top: 0 !important;
  }
}

/* --------
   MOBILE TABLES: tabla apilada (si la tabla usa td[data-label])
   Aplica a todas las pantallas con .dt-table
   -------- */
@media (max-width: 768px){

  .dt-table-wrap{
    overflow: visible !important; /* evita scroll horizontal en modo stacked */
  }

  .dt-table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  .dt-table thead{
    display: none !important;
  }

  .dt-table tbody,
  .dt-table tr{
    display: block;
    width: 100%;
  }

  .dt-table tr{
    background: #fff;
    border: 1px solid rgba(15,23,42,.10);
    border-radius: 14px;
    margin: 0 14px 12px; /* margen lateral “controlado” */
    overflow: hidden;
  }

  .dt-table td{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 0 !important;
    width: 100% !important;
    text-align: right;
  }

  .dt-table td::before{
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 52%;
    text-align: left;
    font-weight: 700;
    color: #475569;
  }

  /* separadores internos */
  .dt-table td + td{
    border-top: 1px solid rgba(15,23,42,.06) !important;
  }

  /* Acciones: botones más “app-like” */
  .dt-table td[data-label="Acciones"],
  .dt-table td.dt-actions-cell{
    justify-content: flex-end;
    gap: 10px;
  }

  .dt-table td[data-label="Acciones"] .btn,
  .dt-table td.dt-actions-cell .btn{
    min-height: 40px;
    border-radius: 999px;
    padding: 0 14px;
  }
}


@media (max-width: 768px){
  .dt-main-content{
    padding: 0 !important;
  }
}

@media (max-width: 768px){

  /* Quitar espacio superior del bloque principal */
  .dt-main-content{
    padding-top: 0 !important;
  }

  .main-wrapper{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .widget-list{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Asegurar que el título no tenga espacio extra */
  .dt-card__head{
    padding-top: 12px !important;
  }

}
@media (max-width: 768px){

  /* Evita overflow por 100vw + scrollbar / márgenes */
  html, body{
    max-width: 100%;
    overflow-x: hidden !important;
  }

  /* Asegura que nada “crezca” por padding/border */
  *, *::before, *::after{
    box-sizing: border-box;
  }

  /* No uses 100vw en wrappers: fuerza 100% real */
  .dt-main-content,
  .main-wrapper,
  .widget-list,
  .widget-holder,
  .widget-body{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Si tenés algún row/col tipo bootstrap que empuja */
  .row{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  [class*="col-"]{
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  /* Cards: sin margen lateral que pueda generar overflow */
  .dt-card{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
@media (max-width: 768px){

  /* El contenedor de la tabla debe quedar centrado dentro del full width */
  .dt-table-wrap{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Si tu tabla “stacked” está armada por <tr> como cards, que no quede corrido */
  .dt-table tbody,
  .dt-table{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* En stacked, cada bloque debe quedar centrado con el mismo margen a ambos lados */
  .dt-table tr{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 768px){

  /* 1) El layout mobile no debe aportar padding lateral */
  .dt-main-content{
    padding: 0 !important;
  }
  .main-wrapper{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2) La card es la que define el gutter lateral consistente */
  .dt-card{
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .dt-card__head,
  .dt-card__body{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* 3) Evitar “doble padding” dentro de tablas */
  .dt-table-wrap{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 4) Corta cualquier overflow horizontal residual */
  html, body{
    overflow-x: hidden !important;
  }
}







@media (max-width: 768px){

  .pacientes-mobile-fix .dt-card__head{
    padding-top: 0 !important;
  }

  .pacientes-mobile-fix .dt-card__title{
    margin-top: 0 !important;
  }

  .pacientes-mobile-fix{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

}

@media (max-width: 768px){

  /* Solo pacientes: subir el título (el “aire” de arriba) */
  body.dt-page-pacientes .dt-main-content{
    padding-top: 0 !important;
  }

  body.dt-page-pacientes .main-wrapper,
  body.dt-page-pacientes .widget-list{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Header de la card: sin espacio superior extra */
  body.dt-page-pacientes .dt-card__head{
    padding-top: 12px !important;
  }

  body.dt-page-pacientes .dt-card__title{
    margin-top: 0 !important;
  }
}

@media (max-width: 768px){

  .dt-table td[data-label="Acciones"],
  .dt-table td.dt-actions-cell{
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 12px !important;
  }

  .dt-table td[data-label="Acciones"]::before,
  .dt-table td.dt-actions-cell::before{
    display: none !important;
  }

  /* Botones compactos y consistentes */
  .dt-table td[data-label="Acciones"] .btn,
  .dt-table td.dt-actions-cell .btn{
    flex: 0 0 auto !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
    line-height: 40px !important;
    box-shadow: none !important;
  }

  /* Jerarquía por color — todos en estilo "soft" consistente */
  .dt-table td[data-label="Acciones"] .btn-primary,
  .dt-table td[data-label="Acciones"] .btn-outline-primary,
  .dt-table td.dt-actions-cell .btn-primary,
  .dt-table td.dt-actions-cell .btn-outline-primary{
    background: rgba(37, 99, 235, .10) !important;
    border: 1px solid rgba(37, 99, 235, .28) !important;
    color: #2563eb !important;
  }

  .dt-table td[data-label="Acciones"] .btn-warning,
  .dt-table td[data-label="Acciones"] .btn-outline-warning,
  .dt-table td.dt-actions-cell .btn-warning,
  .dt-table td.dt-actions-cell .btn-outline-warning{
    background: rgba(245, 158, 11, .10) !important;
    border: 1px solid rgba(245, 158, 11, .28) !important;
    color: #b45309 !important;
  }

  .dt-table td[data-label="Acciones"] .btn-danger,
  .dt-table td[data-label="Acciones"] .btn-outline-danger,
  .dt-table td.dt-actions-cell .btn-danger,
  .dt-table td.dt-actions-cell .btn-outline-danger{
    background: rgba(239, 68, 68, .10) !important;
    border: 1px solid rgba(239, 68, 68, .28) !important;
    color: #dc2626 !important;
  }
}

/* ===============================
   PACIENTES - MOBILE CARD STYLE
   =============================== */

@media (max-width: 768px){

  table.dt-table{
    border:0;
  }

  table.dt-table thead{
    display:none;
  }

  table.dt-table tbody tr.dt-paciente-row{
    display:block;
    background:#fff;
    border:1px solid #e6e9ef;
    border-radius:16px;
    padding:14px;
    margin-bottom:14px;
    box-shadow:0 2px 6px rgba(0,0,0,0.04);
  }

  table.dt-table tbody td{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    padding:6px 0;
    border:0;
    font-size:14px;
  }

  table.dt-table tbody td::before{
    content:attr(data-label);
    font-weight:600;
    color:#64748b;
    font-size:12px;
    margin-right:12px;
    min-width:95px;
  }

  /* paciente nombre */
  .dt-cell-paciente strong{
    font-size:15px;
    color:#1e293b;
  }

  .dt-cell-paciente .muted{
    display:block;
    font-size:13px;
    color:#64748b;
  }

  /* identificación */
  .dt-cell-id{
    flex-direction:column;
    align-items:flex-end;
  }

  .dt-id-label{
    font-size:11px;
    color:#64748b;
  }

  .dt-id-value{
    font-weight:600;
    font-size:14px;
  }

  /* teléfono */
  .dt-phone{
    display:flex;
    align-items:center;
    gap:6px;
  }

  .dt-phone span{
    font-size:14px;
  }

  /* email */
  .dt-email{
    font-size:13px;
    word-break:break-all;
  }

  /* acciones */
  .dt-actions-cell-pac{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    padding-top:10px;
  }

  .dt-actions-cell-pac::before{
    display:none;
  }

  .dt-actions-cell-pac .btn{
    flex:1;
    border-radius:10px;
    font-size:13px;
    padding:6px 10px;
    font-weight: 700 !important;
    box-shadow: none !important;
  }

  /* Colores soft consistentes */
  .dt-actions-cell-pac .btn-outline-primary,
  .dt-actions-cell-pac .btn-primary{
    background: rgba(37, 99, 235, .10) !important;
    border: 1px solid rgba(37, 99, 235, .28) !important;
    color: #2563eb !important;
  }

  .dt-actions-cell-pac .btn-outline-info,
  .dt-actions-cell-pac .btn-info{
    background: rgba(37, 99, 235, .10) !important;
    border: 1px solid rgba(37, 99, 235, .28) !important;
    color: #2563eb !important;
  }

  .dt-actions-cell-pac .btn-outline-warning,
  .dt-actions-cell-pac .btn-warning{
    background: rgba(245, 158, 11, .10) !important;
    border: 1px solid rgba(245, 158, 11, .28) !important;
    color: #b45309 !important;
  }

  .dt-actions-cell-pac .btn-outline-danger,
  .dt-actions-cell-pac .btn-danger{
    background: rgba(239, 68, 68, .10) !important;
    border: 1px solid rgba(239, 68, 68, .28) !important;
    color: #dc2626 !important;
  }

  .dt-actions-cell-pac .btn-outline-secondary,
  .dt-actions-cell-pac .btn-secondary{
    background: rgba(15, 23, 42, .05) !important;
    border: 1px solid rgba(15, 23, 42, .15) !important;
    color: #475569 !important;
  }

}

/* =========================================================
   Banner excedidos: el margin lo maneja JS via setProperty
   ========================================================= */