/* ============================================
   OPTIMIZACIÓN MOBILE PARA SIG - CASR
   Club Atlético Santa Rosa - Chajarí, Entre Ríos
   ============================================ */

/* Colores institucionales CASR */
:root {
  --rojo-casr: #E30613;
  --verde-casr: #00843D;
  --rojo-oscuro: #B80510;
  --verde-oscuro: #006830;
}

/* ============================================
   MEDIA QUERIES PARA MOBILE
   ============================================ */

@media (max-width: 768px) {

  /* ========== ESTRUCTURA GENERAL ========== */
  body {
    font-size: 14px !important;
  }

  .content-wrapper {
    padding: 10px 5px !important;
    min-height: calc(100vh - 100px) !important;
  }

  .content-header {
    padding: 10px 5px !important;
  }

  .content-header > h1 {
    font-size: 20px !important;
    margin: 5px 0 !important;
  }

  .content-header > .breadcrumb {
    display: none !important; /* Ocultar breadcrumb en mobile */
  }

  /* ========== HEADER / NAVBAR ========== */
  .main-header .logo {
    width: 180px !important;
  }

  .main-header .logo-mini {
    width: 50px !important;
  }

  .main-header .navbar {
    margin: 0 !important;
  }

  .navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
  }

  /* ========== SIDEBAR / MENU LATERAL ========== */
  .main-sidebar {
    padding-top: 0 !important;
  }

  .sidebar-menu > li {
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .sidebar-menu > li > a {
    padding: 12px 15px !important;
    font-size: 14px !important;
  }

  .sidebar-menu .treeview-menu > li > a {
    padding: 8px 15px 8px 30px !important;
    font-size: 13px !important;
  }

  /* Hacer que el menú se cierre automáticamente después de seleccionar */
  .sidebar-collapse .main-sidebar {
    transform: translate(-230px, 0) !important;
  }

  /* ========== BOXES Y CONTENEDORES ========== */
  .box {
    margin-bottom: 15px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  }

  .box-header {
    padding: 10px !important;
  }

  .box-header .box-title {
    font-size: 16px !important;
    font-weight: bold !important;
  }

  .box-body {
    padding: 10px !important;
  }

  .box-footer {
    padding: 10px !important;
  }

  /* ========== FORMULARIOS ========== */
  .form-group {
    margin-bottom: 15px !important;
  }

  label {
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
    display: block !important;
  }

  .form-control {
    height: 42px !important;
    font-size: 16px !important; /* 16px previene el zoom en iOS */
    padding: 10px 12px !important;
    border-radius: 6px !important;
    border: 2px solid #ddd !important;
  }

  .form-control:focus {
    border-color: var(--verde-casr) !important;
    box-shadow: 0 0 0 3px rgba(0, 132, 61, 0.1) !important;
  }

  select.form-control {
    height: 42px !important;
    -webkit-appearance: menulist !important;
    appearance: menulist !important;
  }

  textarea.form-control {
    height: auto !important;
    min-height: 80px !important;
  }

  input[type="date"],
  input[type="time"],
  input[type="datetime-local"] {
    height: 42px !important;
    font-size: 16px !important;
  }

  /* ========== BOTONES ========== */
  .btn {
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    min-height: 42px !important;
    white-space: nowrap !important;
  }

  .btn-lg {
    padding: 12px 20px !important;
    font-size: 16px !important;
    min-height: 48px !important;
  }

  .btn-sm {
    padding: 6px 12px !important;
    font-size: 12px !important;
    min-height: 36px !important;
  }

  .btn-block {
    width: 100% !important;
    margin-bottom: 10px !important;
  }

  /* Botones lado a lado en mobile */
  .btn-group-mobile {
    display: flex !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
  }

  .btn-group-mobile .btn {
    flex: 1 1 auto !important;
    min-width: 100px !important;
  }

  /* ========== TABLAS ========== */
  .table-responsive {
    border: none !important;
    margin-bottom: 15px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .table {
    font-size: 13px !important;
    margin-bottom: 0 !important;
  }

  .table > thead > tr > th,
  .table > tbody > tr > th,
  .table > tfoot > tr > th,
  .table > thead > tr > td,
  .table > tbody > tr > td,
  .table > tfoot > tr > td {
    padding: 10px 8px !important;
    white-space: nowrap !important;
  }

  .table > thead > tr > th {
    font-size: 12px !important;
    font-weight: bold !important;
    background: linear-gradient(135deg, var(--verde-casr) 0%, var(--verde-oscuro) 100%) !important;
    color: white !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
  }

  /* Tabla estilo cards en mobile */
  .table-card-mobile {
    display: block !important;
  }

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

  .table-card-mobile tbody {
    display: block !important;
  }

  .table-card-mobile tr {
    display: block !important;
    margin-bottom: 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    padding: 10px !important;
    background: white !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
  }

  .table-card-mobile td {
    display: block !important;
    text-align: right !important;
    padding: 8px 10px !important;
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }

  .table-card-mobile td:last-child {
    border-bottom: none !important;
  }

  .table-card-mobile td:before {
    content: attr(data-label) !important;
    float: left !important;
    font-weight: bold !important;
    color: var(--verde-casr) !important;
  }

  /* ========== MODALES ========== */
  .modal-dialog {
    width: 95% !important;
    margin: 10px auto !important;
  }

  .modal-header {
    padding: 15px !important;
  }

  .modal-title {
    font-size: 18px !important;
  }

  .modal-body {
    padding: 15px !important;
    max-height: calc(100vh - 200px) !important;
    overflow-y: auto !important;
  }

  .modal-footer {
    padding: 10px !important;
    text-align: center !important;
  }

  .modal-footer .btn {
    margin: 5px !important;
  }

  /* ========== GRIDS Y COLUMNAS ========== */
  .row {
    margin-left: -5px !important;
    margin-right: -5px !important;
  }

  .row > [class*='col-'] {
    padding-left: 5px !important;
    padding-right: 5px !important;
    margin-bottom: 10px !important;
  }

  /* Forzar columnas al 100% en mobile */
  .col-xs-12,
  .col-sm-12,
  .col-md-12,
  .col-lg-12,
  .col-xs-6,
  .col-sm-6,
  .col-md-6,
  .col-lg-6,
  .col-xs-4,
  .col-sm-4,
  .col-md-4,
  .col-lg-4,
  .col-xs-3,
  .col-sm-3,
  .col-md-3,
  .col-lg-3 {
    width: 100% !important;
  }

  /* ========== ALERTS Y NOTIFICACIONES ========== */
  .alert {
    padding: 12px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    margin-bottom: 15px !important;
  }

  .alert-dismissible .close {
    padding: 12px !important;
    font-size: 24px !important;
  }

  /* ========== INFO BOXES ========== */
  .info-box {
    margin-bottom: 15px !important;
    min-height: 80px !important;
  }

  .info-box-icon {
    width: 80px !important;
    font-size: 36px !important;
  }

  .info-box-content {
    padding: 10px !important;
  }

  .info-box-text {
    font-size: 13px !important;
  }

  .info-box-number {
    font-size: 20px !important;
  }

  /* ========== PAGINACIÓN ========== */
  .pagination {
    font-size: 14px !important;
  }

  .pagination > li > a,
  .pagination > li > span {
    padding: 8px 12px !important;
  }

  /* ========== TABS / PESTAÑAS ========== */
  .nav-tabs {
    border-bottom: 2px solid var(--verde-casr) !important;
  }

  .nav-tabs > li {
    margin-bottom: 0 !important;
  }

  .nav-tabs > li > a {
    padding: 10px 12px !important;
    font-size: 13px !important;
    border-radius: 6px 6px 0 0 !important;
  }

  .nav-tabs > li.active > a {
    background-color: var(--verde-casr) !important;
    color: white !important;
    border-color: var(--verde-casr) !important;
  }

  .tab-content {
    padding: 15px 10px !important;
  }

  /* ========== INPUTS DE BÚSQUEDA ========== */
  .input-group {
    margin-bottom: 15px !important;
  }

  .input-group .form-control {
    height: 42px !important;
  }

  .input-group-btn > .btn {
    height: 42px !important;
    padding: 10px 16px !important;
  }

  /* ========== FECHA Y HORA ========== */
  .datepicker,
  .timepicker {
    font-size: 16px !important;
  }

  /* ========== TOOLTIPS Y POPOVERS ========== */
  .tooltip-inner {
    font-size: 13px !important;
    padding: 8px 12px !important;
  }

  .popover {
    font-size: 13px !important;
  }

  /* ========== ICONOS ========== */
  .fa,
  .glyphicon {
    font-size: 18px !important;
    vertical-align: middle !important;
  }

  .btn .fa,
  .btn .glyphicon {
    margin-right: 6px !important;
  }

  /* ========== FOOTER ========== */
  .main-footer {
    padding: 15px !important;
    font-size: 12px !important;
  }

  /* ========== UTILIDADES MOBILE ========== */
  .hidden-mobile {
    display: none !important;
  }

  .visible-mobile {
    display: block !important;
  }

  /* Espaciado vertical */
  .mt-mobile-10 { margin-top: 10px !important; }
  .mb-mobile-10 { margin-bottom: 10px !important; }
  .mt-mobile-20 { margin-top: 20px !important; }
  .mb-mobile-20 { margin-bottom: 20px !important; }

  /* Texto centrado en mobile */
  .text-center-mobile {
    text-align: center !important;
  }

  /* ========== IMÁGENES Y MEDIA ========== */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  .img-responsive {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* ========== CARGA / LOADING ========== */
  .loading-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0,0,0,0.7) !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .loading-spinner {
    font-size: 48px !important;
    color: white !important;
  }

  /* ========== MEJORAS TÁCTILES ========== */
  a, button, .btn, input[type="submit"], input[type="button"] {
    -webkit-tap-highlight-color: rgba(0, 132, 61, 0.3) !important;
    touch-action: manipulation !important;
  }

  /* Aumentar área táctil de links pequeños */
  a.small-link {
    padding: 10px !important;
    display: inline-block !important;
  }

  /* ========== SCROLL SUAVE ========== */
  html {
    -webkit-overflow-scrolling: touch !important;
  }

  /* ========== OCULTAR ELEMENTOS INNECESARIOS EN MOBILE ========== */
  .hide-on-mobile {
    display: none !important;
  }

  /* Ocultar imagen de navidad en mobile */
  .imgnaviclas,
  #imgnavi {
    display: none !important;
  }

  /* ========== FLOATING ACTION BUTTON (FAB) ========== */
  .fab-mobile {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--rojo-casr) 0%, var(--rojo-oscuro) 100%) !important;
    color: white !important;
    font-size: 24px !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(227, 6, 19, 0.4) !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .fab-mobile:hover,
  .fab-mobile:active {
    background: linear-gradient(135deg, var(--rojo-oscuro) 0%, var(--rojo-casr) 100%) !important;
    box-shadow: 0 6px 16px rgba(227, 6, 19, 0.5) !important;
  }

  /* ========== OPTIMIZACIONES PARA COBRO DIRECTO ========== */

  /* Reducir margen superior en content-wrapper */
  .content-wrapper {
    padding-top: 5px !important;
  }

  /* Eliminar padding lateral de container-fluid */
  .container-fluid .content,
  .container-fluid,
  .content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Reducir margen superior del box */
  .box {
    margin-top: 5px !important;
  }

  /* Reducir margen superior del box-body */
  .box-primary .box-body {
    padding-top: 15px !important;
  }

  /* Forzar inputs de búsqueda a ancho completo en mobile */
  .box-body .row > .col-xs-2,
  .box-body .row > .col-xs-4 {
    width: 100% !important;
    margin-bottom: 15px !important;
  }

  /* Asegurar que los form-control ocupen todo el ancho */
  .box-body .row > div > .form-control {
    width: 100% !important;
  }

  /* Optimizar el botón en mobile */
  .box-body .row > div > .btn-block {
    margin-top: 0 !important;
  }

  /* Espaciado entre campos del formulario */
  .box-body .row > div {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Ocultar labels vacíos con nbsp */
  .box-body label:empty,
  .box-body label:blank {
    display: none !important;
  }

  /* ========== MODAL ADDCOSAS OPTIMIZADO PARA MOBILE ========== */
  #addcosas {
    position: fixed !important;
    top: 15% !important;
    left: 5% !important;
    width: 90% !important;
    height: auto !important;
    max-height: 70vh !important;
    background-color: #fff !important;
    margin-left: 0 !important;
    z-index: 9999991 !important;
    overflow-y: auto !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
    padding: 15px !important;
  }

}

/* ============================================
   MEDIA QUERIES PARA TABLETS (768px - 991px)
   ============================================ */

@media (min-width: 768px) and (max-width: 991px) {

  .content-wrapper {
    padding: 15px 10px !important;
  }

  .box-body {
    padding: 15px !important;
  }

  .form-control {
    font-size: 15px !important;
  }

  .table {
    font-size: 14px !important;
  }

}

/* ============================================
   MODO LANDSCAPE EN MOBILE
   ============================================ */

@media (max-width: 768px) and (orientation: landscape) {

  .content-wrapper {
    padding: 10px !important;
  }

  .box {
    margin-bottom: 10px !important;
  }

  .main-header .navbar {
    min-height: 50px !important;
  }

}