/**
 * DASHBOARD OVERRIDE CSS
 * =====================
 * Este archivo se carga AL FINAL del layout para sobrescribir
 * estilos de Martfury que bloquean nuestros estilos de dashboard.
 * 
 * PROBLEMA: globals.css se carga antes que Martfury, por lo que
 * los estilos de Martfury tienen prioridad.
 * 
 * SOLUCIÓN: Este archivo se carga después de todos los CSS de Martfury.
 */

/* ===== RESET AGRESIVO DE CONTAINERS ===== */

/* Anular el min-width de Martfury para .container y forzar 1440px */
@media (min-width: 1200px) {
  html body .container {
    min-width: unset !important;
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Dashboard Admin específico */
html body main .container,
html body [class*="dashboard"] .container,
html body div[class*="admin"] .container {
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Todos los contenedores principales */
html body main.flex-1,
html body main[class*="dashboard"],
html body div[class*="dashboard-content"] {
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ===== DASHBOARDS AL 75% DEL VIEWPORT (1440px) ===== */

/* Clases max-w de Tailwind - forzar a 1440px */
html body .max-w-7xl,
html body .max-w-6xl,
html body .max-w-5xl,
html body .max-w-4xl,
html body .max-w-3xl,
html body .max-w-2xl,
html body [class*="max-w-7xl"],
html body [class*="max-w-6xl"],
html body [class*="max-w-5xl"],
html body [class*="max-w-4xl"],
html body [class*="max-w-3xl"],
html body [class*="max-w-2xl"] {
  max-width: 1440px !important;
}

/* Para pantallas más pequeñas, usar 95% del viewport */
@media (max-width: 1536px) {
  html body .max-w-7xl,
  html body .max-w-6xl,
  html body .max-w-5xl,
  html body .max-w-4xl,
  html body .max-w-3xl,
  html body .max-w-2xl,
  html body [class*="max-w-7xl"],
  html body [class*="max-w-6xl"],
  html body [class*="max-w-5xl"],
  html body [class*="max-w-4xl"],
  html body [class*="max-w-3xl"],
  html body [class*="max-w-2xl"] {
    max-width: 95% !important;
  }
}

/* Todas las páginas de dashboard - contenido principal */
html body main.flex-1,
html body [class*="dashboard"] main,
html body main[class*="dashboard"],
html body div[class*="dashboard"] > main,
html body .dashboard-content {
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

/* Contenedores de admin y paneles específicos */
html body .admin-panel,
html body .cliente-panel,
html body .tienda-panel,
html body .repartidor-panel,
html body .dashboard-container {
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ===== TAMAÑOS DE FUENTE MEJORADOS (15-17px) ===== */

/* Base font size */
html, 
html body {
  font-size: 16px !important;
}

/* Texto en dashboards */
html body .text-xs,
html body [class*="text-xs"] {
  font-size: 13px !important;
}

html body .text-sm,
html body [class*="text-sm"] {
  font-size: 15px !important;
  line-height: 1.5 !important;
}

html body .text-base,
html body [class*="text-base"] {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

html body .text-lg,
html body [class*="text-lg"] {
  font-size: 17px !important;
  line-height: 1.5 !important;
}

html body .text-xl,
html body [class*="text-xl"] {
  font-size: 18px !important;
  line-height: 1.4 !important;
}

/* Inputs y formularios - prevenir zoom en iOS */
html body input,
html body textarea,
html body select {
  font-size: 16px !important;
}

/* Botones */
html body button {
  font-size: 16px !important;
}

/* Tablas en dashboards */
html body table,
html body [class*="dashboard"] table,
html body [class*="admin"] table {
  font-size: 15px !important;
}

html body table th,
html body [class*="dashboard"] table th,
html body [class*="admin"] table th {
  font-size: 15px !important;
  font-weight: 600 !important;
}

html body table td,
html body [class*="dashboard"] table td,
html body [class*="admin"] table td {
  font-size: 15px !important;
  padding: 12px 16px !important;
}

/* Labels */
html body label {
  font-size: 15px !important;
  font-weight: 500 !important;
}

/* Dashboard y Admin contenido */
html body .dashboard-content,
html body [class*="dashboard"],
html body [class*="admin"] {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

/* Tarjetas en dashboards */
html body .dashboard-content .card,
html body [class*="dashboard"] .card,
html body [class*="admin"] .card {
  font-size: 15px !important;
}

/* Stats y métricas */
html body .stat-value,
html body [class*="stat-value"] {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
}

html body .stat-label,
html body [class*="stat-label"] {
  font-size: 15px !important;
}

/* Descripciones y textos secundarios */
html body .description,
html body .text-gray-500,
html body .text-gray-600,
html body [class*="description"] {
  font-size: 15px !important;
}

/* ===== ICONOS DEL DASHBOARD ADMIN ===== */

/* Botones de iconos más pequeños */
html body [class*="dashboard"] button[class*="flex-col"],
html body [class*="admin"] button[class*="flex-col"] {
  font-size: 12px !important;
}

/* Texto bajo los iconos */
html body [class*="dashboard"] button span,
html body [class*="admin"] button span {
  font-size: 12px !important;
}

/* Iconos SVG más pequeños */
html body [class*="dashboard"] button svg,
html body [class*="admin"] button svg {
  width: 16px !important;
  height: 16px !important;
}

/* Específico para grid de iconos del dashboard admin */
html body main .container > div > div > button {
  font-size: 12px !important;
}

html body main .container > div > div > button span {
  font-size: 12px !important;
}

/* ===== NAVEGACIÓN RÁPIDA DEL ADMIN ===== */
.admin-quick-nav {
  background: white;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 1.5rem;
}

.admin-quick-nav a {
  font-size: 13px !important;
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
}

.admin-quick-nav svg {
  width: 16px !important;
  height: 16px !important;
}

/* ===== PANEL DE SOFIA ===== */
html body .sofia-panel,
html body [class*="sofia"] {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

html body .sofia-panel h2,
html body [class*="sofia"] h2 {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
}

html body .sofia-panel h3,
html body [class*="sofia"] h3 {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
}

html body .sofia-panel p,
html body [class*="sofia"] p {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

/* ===== RESPONSIVE ===== */

/* Desktop grande */
@media (min-width: 1536px) {
  html body .container,
  html body main.flex-1 {
    max-width: 1440px !important;
  }
}

/* Desktop normal */
@media (min-width: 1024px) and (max-width: 1535px) {
  html body .container,
  html body main.flex-1 {
    max-width: 1440px !important;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  html body .container,
  html body main.flex-1 {
    max-width: 95% !important;
  }
  
  html body main.flex-1,
  html body [class*="dashboard"] main,
  html body .dashboard-content {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

/* Móvil */
@media (max-width: 767px) {
  html body .container,
  html body main.flex-1 {
    max-width: 100% !important;
  }
  
  html body main.flex-1,
  html body [class*="dashboard"] main,
  html body .dashboard-content {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: 100% !important;
  }
  
  html body .max-w-7xl,
  html body .max-w-6xl,
  html body .max-w-5xl,
  html body .max-w-4xl,
  html body .max-w-3xl,
  html body .max-w-2xl {
    max-width: 100% !important;
  }
}