/* ================================================
   SMILESERVITECH - ESTILOS RESPONSIVE GLOBALES
   ================================================ */

/* ------------------------------------------------
   FIX iOS SAFARI - MENÚ HAMBURGUESA
   Botón nativo <button> — siempre funciona en iOS
   ------------------------------------------------ */
.layout-menu-toggle {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------
   TABLAS MÓVIL — ocultar columnas secundarias
   y eliminar min-width forzado en iPhone (<576px)
   ------------------------------------------------ */
@media (max-width: 575.98px) {

  /* Quitar min-width de tablas inline para que no haya scroll horizontal */
  .tabla-incidencias,
  .tabla-clientes,
  .tabla-piezas,
  .tabla-presupuestos,
  .tabla-ventas,
  .tabla-impresoras {
    min-width: 100% !important;
  }

  /* ── Incidencias: mostrar solo Cliente · Título · Estado · Acciones ── */
  .tabla-incidencias th:nth-child(2),   /* Impresora */
  .tabla-incidencias td:nth-child(2),
  .tabla-incidencias th:nth-child(4),   /* Fecha apertura */
  .tabla-incidencias td:nth-child(4),
  .tabla-incidencias th:nth-child(6),   /* Pago */
  .tabla-incidencias td:nth-child(6),
  .tabla-incidencias th:nth-child(7),   /* Total */
  .tabla-incidencias td:nth-child(7) {
    display: none !important;
  }

  /* ── Clientes: mostrar solo Nombre · Teléfono · Acciones ── */
  .tabla-clientes th:nth-child(2),      /* Persona contacto */
  .tabla-clientes td:nth-child(2),
  .tabla-clientes th:nth-child(4),      /* Email */
  .tabla-clientes td:nth-child(4),
  .tabla-clientes th:nth-child(5),      /* Dirección */
  .tabla-clientes td:nth-child(5),
  .tabla-clientes th:nth-child(6),      /* CP */
  .tabla-clientes td:nth-child(6),
  .tabla-clientes th:nth-child(7) {     /* Inc */
    display: none !important;
  }
  .tabla-clientes td:nth-child(7) {
    display: none !important;
  }

  /* ── Texto en celdas más compacto ── */
  .tabla-incidencias td,
  .tabla-clientes td {
    font-size: 0.8rem;
    padding: 0.4rem 0.3rem !important;
  }
}

/* ------------------------------------------------
   BOTONES DE ACCIÓN — tap targets más grandes en móvil
   Mínimo 44×44px recomendado por Apple HIG
   ------------------------------------------------ */
@media (max-width: 767.98px) {
  .actions-cell .btn {
    min-width: 36px;
    min-height: 36px;
    padding: 0.4rem 0.5rem;
    font-size: 0.8rem;
    margin: 2px;
  }

  .actions-cell .btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ------------------------------------------------
   FILTRO LETRAS CLIENTES — botones más grandes en móvil
   ------------------------------------------------ */
@media (max-width: 575.98px) {
  .btn-xs {
    padding: 0.3rem 0.5rem !important;
    font-size: 0.75rem !important;
    min-width: 30px;
    min-height: 30px;
  }

  /* Ocultar tira de letras en móvil (ocupa demasiado espacio) */
  .card-footer .d-flex.flex-wrap.gap-1 {
    display: none !important;
  }
}

/* ------------------------------------------------
   TABLAS RESPONSIVE
   ------------------------------------------------ */

/* Truncar texto en celdas */
.text-truncate-cell {
  max-width: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Columnas ocultables según breakpoint */
@media (max-width: 991.98px) {
  .d-lg-none-down { display: none !important; }
  .hide-on-tablet { display: none !important; }
}

@media (max-width: 767.98px) {
  .d-md-none-down { display: none !important; }
  .hide-on-mobile { display: none !important; }

  /* Tablas: eliminar anchos fijos */
  .table th[style*="width"],
  .table td[style*="width"] {
    width: auto !important;
  }

  /* Inputs en tablas más pequeños */
  .table input[type="number"],
  .table input[type="text"] {
    min-width: 60px;
    max-width: 100%;
  }

  /* Cards de KPI más compactas */
  .card-body h2 {
    font-size: 1.5rem;
  }
}

@media (max-width: 575.98px) {
  .d-sm-none-down { display: none !important; }
  .hide-on-xs { display: none !important; }

  /* Hacer tablas horizontalmente scrolleables */
  .table-responsive {
    border: 0;
  }

  /* Celdas de tabla más compactas */
  .table > :not(caption) > * > * {
    padding: 0.4rem 0.35rem;
    font-size: 0.85rem;
  }

  /* Botones de acción más pequeños */
  .btn-sm {
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
  }

  /* Headers de página */
  h4.py-3 {
    font-size: 1.1rem;
  }
}

/* ------------------------------------------------
   BOTONES DE ACCIÓN EN TABLAS
   ------------------------------------------------ */

/* Grupo de acciones compacto */
.actions-cell {
  white-space: nowrap;
}

.actions-cell .btn {
  margin: 1px;
}

/* En móvil, botones más pequeños */
@media (max-width: 767.98px) {
  .actions-cell .btn {
    padding: 0.25rem 0.4rem;
    font-size: 0.7rem;
  }

  .actions-cell .btn-icon {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Ocultar texto en botones, mostrar solo iconos */
  .actions-cell .btn .btn-text {
    display: none;
  }
}

/* ------------------------------------------------
   FORMULARIOS RESPONSIVE
   ------------------------------------------------ */

@media (max-width: 767.98px) {
  /* Campos de formulario full width en móvil */
  .form-control, .form-select {
    font-size: 16px; /* Evita zoom en iOS */
  }

  /* Botones de formulario stack en móvil */
  .d-flex.justify-content-between {
    flex-direction: column;
    gap: 0.5rem;
  }

  .d-flex.justify-content-between > .btn,
  .d-flex.justify-content-between > a {
    width: 100%;
    text-align: center;
  }
}

/* ------------------------------------------------
   CARDS Y PANELES
   ------------------------------------------------ */

@media (max-width: 767.98px) {
  .card {
    margin-bottom: 1rem;
  }

  .card-header {
    padding: 0.75rem;
  }

  .card-body {
    padding: 0.75rem;
  }

  /* Headers de card más compactos */
  .card-header h5 {
    font-size: 1rem;
  }

  .card-header small {
    display: block;
    margin-top: 0.25rem;
  }
}

/* ------------------------------------------------
   FILTROS Y BARRA DE HERRAMIENTAS
   ------------------------------------------------ */

@media (max-width: 767.98px) {
  /* Filtros en columna */
  .filters-row {
    flex-direction: column;
  }

  .filters-row > * {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  /* Barra de acciones wrap */
  .toolbar-actions {
    flex-wrap: wrap;
    gap: 0.25rem;
  }
}

/* ------------------------------------------------
   BADGES Y CHIPS
   ------------------------------------------------ */

@media (max-width: 575.98px) {
  .badge {
    font-size: 0.65rem;
    padding: 0.2em 0.5em;
  }
}

/* ------------------------------------------------
   LISTADOS - HEADER RESPONSIVE
   ------------------------------------------------ */

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (max-width: 767.98px) {
  .list-header {
    flex-direction: column;
    align-items: stretch;
  }

  .list-header h4 {
    text-align: center;
    margin-bottom: 0.5rem;
  }

  .list-header .btn-group,
  .list-header .actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
  }
}

/* ------------------------------------------------
   INCIDENCIAS LIST - ESPECÍFICO
   ------------------------------------------------ */

@media (max-width: 991.98px) {
  /* Ocultar columnas menos importantes */
  .incidencias-table .col-tecnico,
  .incidencias-table .col-fechas {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .incidencias-table .col-impresora {
    display: none;
  }
}

/* ------------------------------------------------
   PIEZAS LIST - ESPECÍFICO
   ------------------------------------------------ */

@media (max-width: 991.98px) {
  /* Ocultar columnas de costes */
  .piezas-table .col-coste,
  .piezas-table .col-pvp,
  .piezas-table .col-margen {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .piezas-table .col-ubicacion,
  .piezas-table .col-min {
    display: none;
  }

  /* Input de stock más compacto */
  .piezas-table .stock-input {
    width: 55px !important;
    padding: 0.2rem 0.3rem;
  }
}

/* ------------------------------------------------
   CLIENTES LIST - ESPECÍFICO
   ------------------------------------------------ */

@media (max-width: 991.98px) {
  .clientes-table .col-email,
  .clientes-table .col-direccion {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .clientes-table .col-contacto,
  .clientes-table .col-nif {
    display: none;
  }
}

/* ------------------------------------------------
   PRESUPUESTOS/VENTAS LIST - ESPECÍFICO
   ------------------------------------------------ */

@media (max-width: 991.98px) {
  .presupuestos-table .col-impresora,
  .ventas-table .col-impresora {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .presupuestos-table .col-referencia,
  .ventas-table .col-referencia,
  .presupuestos-table .col-descripcion,
  .ventas-table .col-descripcion {
    display: none;
  }
}

/* ------------------------------------------------
   IMPRESORAS LIST - ESPECÍFICO
   ------------------------------------------------ */

@media (max-width: 991.98px) {
  .impresoras-table .col-garantia-fecha {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .impresoras-table .col-serie {
    display: none;
  }
}

/* ------------------------------------------------
   FORMULARIO INCIDENCIA - ESPECÍFICO
   ------------------------------------------------ */

@media (max-width: 767.98px) {
  /* Pieza row más compacta */
  .pieza-row {
    padding: 0.5rem 0;
  }

  .pieza-row .col-md-2,
  .pieza-row .col-md-3 {
    margin-bottom: 0.5rem;
  }

  /* Labels más pequeños */
  .pieza-row label {
    font-size: 0.75rem;
    margin-bottom: 0.15rem;
  }
}

/* ------------------------------------------------
   DASHBOARD - ESPECÍFICO
   ------------------------------------------------ */

@media (max-width: 575.98px) {
  /* KPI cards 2 por fila en móvil */
  .dashboard-kpi .col-md-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .dashboard-kpi .card-body {
    padding: 0.5rem;
  }

  .dashboard-kpi h2 {
    font-size: 1.25rem;
  }

  .dashboard-kpi small {
    font-size: 0.7rem;
  }
}

/* ------------------------------------------------
   RESUMEN DE COSTES
   ------------------------------------------------ */

@media (max-width: 575.98px) {
  #total_con_iva {
    font-size: 1.1rem;
  }

  .table-sm td {
    padding: 0.3rem;
    font-size: 0.85rem;
  }
}

/* ------------------------------------------------
   UTILIDADES ADICIONALES
   ------------------------------------------------ */

/* Forzar nowrap */
.nowrap {
  white-space: nowrap;
}

/* Texto responsive */
.text-truncate-responsive {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Scroll horizontal suave */
.table-responsive {
  -webkit-overflow-scrolling: touch;
}

/* Indicador de scroll en tablas */
.table-responsive::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 20px;
  background: linear-gradient(to right, transparent, rgba(0,0,0,0.05));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.table-responsive.has-scroll::after {
  opacity: 1;
}