/* ==========================================================================
   Estilos Principales - Multiservicios ClimaCold
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Diseño de Tokens y Variables (OKLCH y light-dark)
   -------------------------------------------------------------------------- */
@layer reset, base, theme, components, utilities;

@layer theme {
  :root {
    color-scheme: light dark;

    /* Fuentes */
    --font-primary: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* Espaciados y Bordes */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-full: 9999px;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.12);
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Colores del Sistema (Adaptables) */
    --bg-app: light-dark(#f3f7f6, #090e0d);
    --bg-sidebar: light-dark(#ffffff, #0f1816);
    --bg-card: light-dark(#ffffff, #142220);
    --bg-card-hover: light-dark(#f8faf9, #1b2e2b);
    --bg-input: light-dark(#f0f4f3, #1a2a28);
    --border-color: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
    --border-color-hover: light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.12));
    
    --text-main: light-dark(#182625, #eef7f5);
    --text-muted: light-dark(#576c69, #92a7a4);
    --text-on-accent: #ffffff;
    
    /* Tonalidades de la Marca (Azul / Verde) */
    --primary: oklch(0.58 0.18 245); /* Azul ClimaCold */
    --primary-hover: oklch(0.50 0.18 245);
    --primary-subtle: light-dark(rgba(26, 115, 232, 0.08), rgba(26, 115, 232, 0.15));
    
    --secondary: oklch(0.62 0.16 150); /* Verde ClimaCold */
    --secondary-hover: oklch(0.54 0.16 150);
    --secondary-subtle: light-dark(rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.15));
    
    /* Estados de Mantenimiento */
    --status-ok-bg: light-dark(#e6f7f0, #0a2d21);
    --status-ok-text: light-dark(#047857, #34d399);
    
    --status-pending-bg: light-dark(#fffbeb, #2e2002);
    --status-pending-text: light-dark(#b45309, #fbbf24);
    
    --status-overdue-bg: light-dark(#fef2f2, #360f12);
    --status-overdue-text: light-dark(#b91c1c, #f87171);

    --status-neutral-bg: light-dark(#f3f4f6, #1f2937);
    --text-whatsapp: #25D366;
    
    /* Variables Financieras (Por Cobrar / Deudas) */
    --receivables-color: oklch(0.60 0.22 330); /* Fuchsia/Rosa ClimaCold */
    --receivables-subtle: light-dark(rgba(219, 39, 119, 0.08), rgba(219, 39, 119, 0.15));
  }
}

/* --------------------------------------------------------------------------
   2. Reset Moderno y Estilos Base
   -------------------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    scroll-behavior: smooth;
    font-size: 16px;
    height: 100%;
  }

  body {
    font-family: var(--font-primary);
    background-color: var(--bg-app);
    color: var(--text-main);
    line-height: 1.5;
    overflow-x: hidden;
    height: 100%;
    -webkit-font-smoothing: antialiased;
  }

  button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
  }

  button {
    cursor: pointer;
    border: none;
    background: none;
  }

  textarea {
    resize: vertical;
  }

  /* Animaciones reducidas para accesibilidad */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer base {
  /* Scrollbars personalizados */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--border-color-hover);
    border-radius: var(--radius-full);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
  }

  .icon {
    width: 20px;
    height: 20px;
    stroke-width: 2;
    flex-shrink: 0;
  }
}

/* --------------------------------------------------------------------------
   3. Estructura y Contenedor Principal (Layout)
   -------------------------------------------------------------------------- */
@layer components {
  .app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  @media (min-width: 1024px) {
    .app-container {
      display: grid;
      grid-template-columns: 280px 1fr;
      height: 100vh;
      overflow: hidden;
    }
  }

  /* Barra Lateral */
  .app-sidebar {
    background-color: var(--bg-sidebar);
    border-bottom: 1px solid var(--border-color);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  @media (min-width: 1024px) {
    .app-sidebar {
      border-bottom: none;
      border-right: 1px solid var(--border-color);
      height: 100%;
      overflow-y: auto;
      justify-content: space-between;
    }
  }

  .brand-header {
    margin-bottom: 0.5rem;
  }

  .brand-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .icon-logo {
    width: 38px;
    height: 38px;
    color: var(--primary);
    filter: drop-shadow(0 2px 6px rgba(26, 115, 232, 0.2));
  }

  .brand-text h1 {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .brand-text .slogan {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    display: block;
    margin-top: 1px;
  }

  /* Contenido Principal */
  .app-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    padding: 1rem;
    gap: 1rem;
  }

  @media (min-width: 768px) {
    .app-main {
      padding: 1.5rem;
      gap: 1.5rem;
    }
  }

  @media (min-width: 1024px) {
    .app-main {
      height: 100%;
      overflow-y: auto;
    }
  }

  /* --------------------------------------------------------------------------
     4. Tablero de Métricas (Stats)
     -------------------------------------------------------------------------- */
  .stats-panel {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  @media (min-width: 1024px) {
    .stats-panel {
      grid-template-columns: 1fr;
      gap: 1rem;
    }
  }

  .stat-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-fast);
  }

  .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-color-hover);
  }

  .stat-card-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
  }

  .stat-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bg-blue-subtle {
    background-color: var(--primary-subtle);
    color: var(--primary);
  }
  .bg-green-subtle {
    background-color: var(--status-ok-bg);
    color: var(--status-ok-text);
  }
  .bg-warning-subtle {
    background-color: var(--status-pending-bg);
    color: var(--status-pending-text);
  }
  .bg-danger-subtle {
    background-color: var(--status-overdue-bg);
    color: var(--status-overdue-text);
  }

  .stat-info {
    display: flex;
    flex-direction: column;
  }

  .stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
  }

  .stat-value {
    font-size: 1.25rem;
    font-weight: 800;
  }

  /* --------------------------------------------------------------------------
     5. Barra de Acciones y Filtros
     -------------------------------------------------------------------------- */
  .action-bar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
  }

  @media (min-width: 768px) {
    .action-bar {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }

  .search-box {
    position: relative;
    flex: 1;
    max-width: 480px;
  }

  .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
  }

  .search-box input[type="search"] {
    width: 100%;
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    padding: 0.65rem 1rem 0.65rem 2.5rem;
    outline: none;
    transition: var(--transition-fast);
  }

  .search-box input[type="search"]:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-subtle);
    background-color: var(--bg-card);
  }

  .filter-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }

  .filter-group, .filter-group-secondary {
    display: flex;
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    padding: 2px;
  }

  .btn-filter, .btn-filter-type {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-full);
    color: var(--text-muted);
    transition: var(--transition-fast);
  }

  .btn-filter:hover, .btn-filter-type:hover {
    color: var(--text-main);
  }

  .btn-filter.active, .btn-filter-type.active {
    background-color: var(--primary);
    color: var(--text-on-accent);
    box-shadow: var(--shadow-sm);
  }

  .btn-filter-type.active {
    background-color: var(--secondary);
  }

  /* Botones Generales */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.7rem 1.25rem;
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    max-width: 100%;
    min-block-size: 44px; /* Accesible para touch */
    box-sizing: border-box;
  }

  .btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: var(--text-on-accent);
    box-shadow: 0 4px 12px rgba(26, 115, 232, 0.2);
  }

  .btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(26, 115, 232, 0.3);
  }

  .btn-secondary {
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-main);
  }

  .btn-secondary:hover:not(:disabled) {
    border-color: var(--border-color-hover);
    background-color: var(--bg-card-hover);
  }

  .btn-full {
    width: 100%;
  }

  /* --------------------------------------------------------------------------
     6. Rejilla y Tarjetas de Clientes
     -------------------------------------------------------------------------- */
  .clients-view {
    position: relative;
    flex: 1;
    display: flex;
    gap: 1.5rem;
    min-height: 0; /* Permite scroll del contenedor interno */
  }

  .clients-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 1.25rem;
    align-content: start;
    overflow-y: auto;
    padding-bottom: 2rem;
  }

  .client-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
  }

  /* Borde decorativo según estado de mantenimiento */
  .client-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: var(--status-color, var(--border-color));
  }

  .client-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-color-hover);
  }

  .client-card.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-subtle);
  }

  /* Encabezado de la Tarjeta */
  .card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .card-title {
    display: flex;
    flex-direction: column;
  }

  .card-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
  }

  .card-phone {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
  }

  /* Insignias (Badges) */
  .badge {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }

  .badge-split {
    background-color: var(--primary-subtle);
    color: var(--primary);
  }

  .badge-ventana {
    background-color: var(--secondary-subtle);
    color: var(--secondary);
  }

  .badge-nevera {
    background-color: light-dark(rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.15));
    color: light-dark(#d97706, #fbbf24);
  }

  .badge-freezer {
    background-color: light-dark(rgba(139, 92, 246, 0.08), rgba(139, 92, 246, 0.15));
    color: light-dark(#7c3aed, #a78bfa);
  }

  .status-dot-badge {
    background-color: var(--status-bg);
    color: var(--status-text);
  }

  /* Cuerpo de la Tarjeta */
  .card-body {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    font-size: 0.85rem;
  }

  .card-info-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--text-muted);
  }

  .card-info-row .icon {
    width: 16px;
    height: 16px;
    margin-top: 2px;
  }

  .card-info-text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .card-maintenance-highlight {
    background-color: var(--bg-input);
    border-radius: var(--radius-sm);
    padding: 0.5rem;
    margin-top: 0.25rem;
    border: 1px solid var(--border-color);
  }

  .highlight-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    display: block;
    margin-bottom: 2px;
  }

  .highlight-value {
    font-weight: 700;
    color: var(--status-text, var(--text-main));
  }

  /* Acciones de la Tarjeta */
  .card-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-top: 1px solid var(--border-color);
    padding-top: 0.75rem;
  }

  .btn-icon-only {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-input);
    color: var(--text-main);
    transition: var(--transition-fast);
  }

  .btn-icon-only:hover {
    background-color: var(--border-color-hover);
  }

  .btn-whatsapp {
    color: var(--text-whatsapp);
    background-color: rgba(37, 211, 102, 0.08);
  }

  .btn-whatsapp:hover {
    background-color: rgba(37, 211, 102, 0.16);
    transform: scale(1.05);
  }

  .btn-action-text {
    flex: 1;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.5rem 0.75rem;
    min-block-size: auto;
  }

  /* Estado Vacío (Empty State) */
  .empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
    background-color: var(--bg-card);
    border: 2px dashed var(--border-color-hover);
    border-radius: var(--radius-lg);
  }

  .empty-state .icon {
    width: 64px;
    height: 64px;
    color: var(--text-muted);
    margin-bottom: 1rem;
    opacity: 0.7;
  }

  .empty-state h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.5rem;
  }

  /* --------------------------------------------------------------------------
     7. Panel de Detalles Lateral (Drawer)
     -------------------------------------------------------------------------- */
  .client-detail-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 100%;
    background-color: var(--bg-sidebar);
    border-left: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: transform var(--transition-smooth);
    transform: translateX(100%);
  }

  @media (min-width: 640px) {
    .client-detail-panel {
      width: 440px;
    }
  }

  @media (min-width: 1200px) {
    /* En pantallas muy grandes, se vuelve panel integrado en la vista */
    .client-detail-panel {
      position: relative;
      height: auto;
      width: 380px;
      transform: translateX(0) !important;
      border-radius: var(--radius-lg);
      border: 1px solid var(--border-color);
      box-shadow: var(--shadow-sm);
    }

    .client-detail-panel[hidden] {
      display: none !important;
    }

    .btn-close-detail {
      display: none !important; /* No hace falta cerrar en versión fija */
    }
  }

  .client-detail-panel.open {
    transform: translateX(0);
  }

  .panel-header {
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .btn-close-panel {
    color: var(--text-muted);
    border-radius: var(--radius-full);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-input);
    transition: var(--transition-fast);
  }

  .btn-close-panel:hover {
    color: var(--text-main);
    background-color: var(--border-color-hover);
  }

  .panel-title {
    font-size: 1.15rem;
    font-weight: 800;
  }

  .panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  /* Bloque de Información del Cliente */
  .detail-client-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .detail-header-card {
    background: linear-gradient(135deg, var(--primary-subtle), var(--secondary-subtle));
    border-radius: var(--radius-md);
    padding: 1.25rem;
    border: 1px solid var(--border-color);
  }

  .detail-name {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
  }

  .detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .detail-item {
    font-size: 0.85rem;
  }

  .detail-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    display: block;
    margin-bottom: 1px;
  }

  .detail-value {
    font-weight: 600;
    color: var(--text-main);
  }

  /* Historial de Mantenimientos - Línea de Tiempo (Timeline) */
  .detail-history-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .detail-section-title {
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .timeline {
    position: relative;
    padding-left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .timeline::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background-color: var(--border-color);
  }

  .timeline-item {
    position: relative;
  }

  .timeline-dot {
    position: absolute;
    left: -22px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background-color: var(--primary);
    border: 2px solid var(--bg-sidebar);
  }

  .timeline-item:first-child .timeline-dot {
    background-color: var(--secondary);
    box-shadow: 0 0 0 3px var(--secondary-subtle);
  }

  .timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
  }

  .timeline-date {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-main);
  }

  .timeline-body {
    font-size: 0.82rem;
    color: var(--text-muted);
    background-color: var(--bg-input);
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
  }

  .timeline-obs {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-style: italic;
    color: var(--primary);
    border-top: 1px dashed var(--border-color-hover);
    padding-top: 0.4rem;
  }

  .timeline-empty {
    text-align: center;
    padding: 2rem 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
  }

  /* --------------------------------------------------------------------------
     8. Modales (dialog) Estilo Premium
     -------------------------------------------------------------------------- */
  .custom-dialog {
    border: none;
    border-radius: var(--radius-lg);
    background-color: var(--bg-sidebar);
    color: var(--text-main);
    max-width: 560px;
    width: min(calc(100% - 1.5rem), 560px);
    box-shadow: var(--shadow-lg);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    overflow: hidden;
  }

  /* Animación de Entrada del Modal */
  .custom-dialog[open] {
    animation: modal-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }

  @keyframes modal-zoom {
    from {
      opacity: 0;
      transform: translate(-50%, -45%) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  .custom-dialog::backdrop {
    background-color: rgba(9, 14, 13, 0.6);
    backdrop-filter: blur(8px);
  }

  .dialog-content {
    display: flex;
    flex-direction: column;
  }

  .dialog-header {
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .dialog-header h3 {
    font-size: 1.15rem;
    font-weight: 800;
  }

  .btn-close-dialog {
    color: var(--text-muted);
    border-radius: var(--radius-full);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-input);
    transition: var(--transition-fast);
  }

  .btn-close-dialog:hover {
    color: var(--text-main);
    background-color: var(--border-color-hover);
  }

  /* Formularios */
  .form-grid {
    padding: 1.15rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    max-height: 75vh;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    box-sizing: border-box;
  }

  @media (min-width: 520px) {
    .form-grid {
      grid-template-columns: repeat(2, 1fr);
      padding: 1.35rem;
      gap: 1.15rem;
    }
  }

  .form-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .full-width {
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
  }

  .form-field label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .form-field input, .form-field select, .form-field textarea {
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.85rem;
    outline: none;
    font-family: inherit;
    font-size: 0.9rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    transition: var(--transition-fast);
  }

  .form-field input:focus, .form-field select:focus, .form-field textarea:focus {
    border-color: var(--primary);
    background-color: var(--bg-sidebar);
    box-shadow: 0 0 0 3px var(--primary-subtle);
  }

  .form-field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 2.25rem;
  }

  .service-notice {
    font-size: 0.85rem;
    color: var(--text-muted);
    background-color: var(--primary-subtle);
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--primary);
  }

  .dialog-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    border-top: 1px solid var(--border-color);
    padding-top: 1.25rem;
    margin-top: 0.5rem;
  }

  /* Opciones de Copia de Seguridad */
  .backup-options {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-height: 65vh;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .dialog-text {
    font-size: 0.85rem;
    color: var(--text-muted);
  }

  .backup-action-card {
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .backup-action-card h4 {
    font-size: 0.9rem;
    font-weight: 800;
  }

  .backup-action-card p {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
  }

  .file-upload-label {
    cursor: pointer;
  }

  /* Utilidades */
  .text-danger {
    color: var(--status-overdue-text) !important;
  }
  .text-green {
    color: var(--status-ok-text) !important;
  }
  .text-warning {
    color: var(--status-pending-text) !important;
  }
  /* Estilos para Multi-Equipos */
  .equipment-row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.85rem;
    box-shadow: var(--shadow-sm);
  }

  .equipment-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-color);
  }

  .equipment-row-badge {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .eq-row-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    width: 100%;
  }

  @media (max-width: 400px) {
    .eq-row-inputs {
      grid-template-columns: 1fr;
    }
  }

  .btn-remove-eq {
    background-color: rgba(185, 28, 28, 0.08);
    color: var(--status-overdue-text);
    border: 1px solid rgba(185, 28, 28, 0.15);
    border-radius: var(--radius-sm);
    min-block-size: 28px;
    padding: 0.25rem 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    transition: var(--transition-fast);
    cursor: pointer;
  }

  .btn-remove-eq:hover {
    background-color: rgba(185, 28, 28, 0.15);
    color: #ef4444;
  }

  /* Listado de equipos en tarjetas y detalles */
  .card-equipments-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.25rem;
  }

  .card-equipments-text {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 0.25rem;
  }

  /* Estilos de Agenda de Citas Lateral */
  .agenda-panel {
    display: flex;
    flex-direction: column;
    margin-top: 0.5rem;
  }

  .agenda-panel-title {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
  }

  .agenda-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }

  .agenda-item {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.75rem;
    cursor: pointer;
    transition: var(--transition-fast);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex-shrink: 0;
  }

  .agenda-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background-color: var(--reason-color, var(--border-color));
  }

  .agenda-item:hover {
    transform: translateX(2px);
    border-color: var(--border-color-hover);
    background-color: var(--bg-card-hover);
  }

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

  .agenda-item-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
  }

  .agenda-item-badge {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
  }

  .badge-inspeccion {
    background-color: var(--status-pending-bg);
    color: var(--status-pending-text);
  }

  .badge-mantenimiento {
    background-color: var(--status-ok-bg);
    color: var(--status-ok-text);
  }

  .badge-reparacion {
    background-color: var(--status-overdue-bg);
    color: var(--status-overdue-text);
  }

  .badge-reemplazo {
    background-color: light-dark(rgba(249, 115, 22, 0.08), rgba(249, 115, 22, 0.15));
    color: light-dark(#ea580c, #fb923c);
  }

  .badge-presupuesto {
    background-color: var(--primary-subtle);
    color: var(--primary);
  }

  .badge-instalacion {
    background-color: light-dark(rgba(139, 92, 246, 0.08), rgba(139, 92, 246, 0.15));
    color: light-dark(#7c3aed, #a78bfa);
  }

  .agenda-item-date {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
  }

  .agenda-item-notes {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Estilos Financieros: Deudas y Cuentas por Cobrar */
  .bg-receivables-subtle {
    background-color: var(--receivables-subtle);
    color: var(--receivables-color);
  }
  
  .text-receivables {
    color: var(--receivables-color);
  }

  .badge-debt {
    background-color: var(--status-overdue-bg);
    color: var(--status-overdue-text);
  }

  .badge-promise {
    background-color: var(--receivables-subtle);
    color: var(--receivables-color);
  }

  .card-debt-highlight {
    margin-top: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--status-overdue-text);
    background-color: var(--status-overdue-bg);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid light-dark(rgba(185, 28, 28, 0.1), rgba(248, 113, 113, 0.1));
  }

  .card-promise-highlight {
    margin-top: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--receivables-color);
    background-color: var(--receivables-subtle);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid light-dark(rgba(219, 39, 119, 0.1), rgba(219, 39, 119, 0.1));
  }

  .financial-inputs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
  }

  .financial-inputs-grid .financial-debt-col {
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
  }

  .financial-debt-badge {
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.85rem;
    font-weight: 800;
    font-size: 1rem;
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    box-sizing: border-box;
    transition: var(--transition-fast);
  }

  .time-picker-row {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    min-height: 42px;
    width: 100%;
  }

  .time-picker-row select {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.25rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
    font-weight: 600;
    text-align: center;
  }

  .time-picker-divider {
    font-weight: 800;
    color: var(--text-muted);
    padding: 0 0.15rem;
  }

  .btn-wa-preset {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
  }
  .btn-wa-preset:hover {
    background-color: var(--primary-subtle);
    border-color: var(--primary);
    color: var(--primary);
  }
  .btn-wa-preset.active {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
  }
}

/* Ajustes responsivos para filtros en móvil */
@media (max-width: 767px) {
  .filter-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0.75rem;
  }

  .filter-group, .filter-group-secondary {
    overflow-x: auto;
    white-space: nowrap;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
  }

  .filter-group::-webkit-scrollbar,
  .filter-group-secondary::-webkit-scrollbar {
    display: none; /* Safari / Chrome */
  }

  .btn-filter, .btn-filter-type {
    flex-shrink: 0;
  }

  #btn-add-client {
    width: 100%;
    justify-content: center;
  }
}

/* Grilla para Fecha y Hora adaptable */
.form-grid-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  width: 100%;
}

@media (min-width: 480px) {
  .form-grid-2col {
    grid-template-columns: 1fr 1fr;
  }
}

/* Evitar recorte de AM/PM en campos de hora en navegadores móviles */
input[type="time"] {
  min-width: 150px !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

/* ==========================================================================
   Estilos de Abonos y Pagos por Aire Acondicionado Individual / Múltiple
   ========================================================================== */

.payment-mode-segmented {
  display: flex;
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 3px;
  width: 100%;
}

.btn-payment-mode {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.45rem 0.5rem;
  border-radius: calc(var(--radius-sm) - 2px);
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: center;
  white-space: nowrap;
}

.btn-payment-mode:hover {
  color: var(--text-main);
}

.btn-payment-mode.active {
  background-color: var(--bg-card);
  color: var(--primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.payment-eq-card-highlight {
  background-color: var(--receivables-subtle);
  border: 1px solid light-dark(rgba(219, 39, 119, 0.2), rgba(219, 39, 119, 0.3));
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  transition: var(--transition-fast);
}

.payment-presets-row {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.btn-preset-chip {
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-preset-chip:hover {
  background-color: var(--receivables-subtle);
  border-color: var(--receivables-color);
  color: var(--receivables-color);
}

.btn-preset-chip.active {
  background-color: var(--receivables-color);
  border-color: var(--receivables-color);
  color: #fff;
}

.payment-multi-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 2px;
}

.payment-multi-item {
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.payment-multi-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.payment-multi-item-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.payment-multi-input-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.payment-multi-input-row input {
  flex: 1;
  min-width: 0;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
}

.btn-multi-pay-all {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--receivables-color);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-fast);
}

.btn-multi-pay-all:hover {
  background-color: var(--receivables-subtle);
  border-color: var(--receivables-color);
}

.payment-multi-total-bar {
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
}

.payment-multi-total-bar strong {
  font-size: 1rem;
  color: var(--receivables-color);
}

.payment-balance-summary-box {
  background-color: var(--receivables-subtle);
  border-left: 3px solid var(--receivables-color);
  padding: 0.5rem 0.75rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Botón rápido de abonar por equipo en la ficha de detalle */
.btn-eq-abono {
  background-color: var(--receivables-subtle);
  color: var(--receivables-color);
  border: 1px solid var(--receivables-color);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: var(--transition-fast);
}

.btn-eq-abono:hover {
  background-color: var(--receivables-color);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Rejilla de 3 Columnas para Formularios
   -------------------------------------------------------------------------- */
.form-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
}

@media (max-width: 580px) {
  .form-grid-3col {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Snippets y Herramientas del Modal de WhatsApp
   -------------------------------------------------------------------------- */
.wa-snippets-row {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.btn-wa-snippet {
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.btn-wa-snippet:hover {
  background-color: var(--primary-subtle);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Tarjetas de Equipos Enriquecidas en la Ficha del Cliente
   -------------------------------------------------------------------------- */
.eq-card-detail {
  background-color: var(--bg-input);
  padding: 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}

.eq-card-detail:hover {
  border-color: var(--border-color-hover);
  background-color: var(--bg-card);
}

.eq-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.eq-title-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.eq-brand-name {
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--text-main);
}

.eq-location-tag {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-card);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.eq-specs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.eq-spec-pill {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.eq-spec-pill.gas {
  color: var(--primary);
  background-color: var(--primary-subtle);
  border-color: transparent;
}

.eq-spec-pill.voltage {
  color: var(--secondary);
  background-color: var(--secondary-subtle);
  border-color: transparent;
}

.eq-components-box {
  background-color: var(--bg-card);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.6rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.eq-card-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px dashed var(--border-color);
  padding-top: 0.5rem;
  margin-top: 0.25rem;
}

.btn-eq-action {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background-color: var(--bg-card);
  color: var(--text-main);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: var(--transition-fast);
}

.btn-eq-action:hover {
  background-color: var(--primary-subtle);
  border-color: var(--primary);
  color: var(--primary);
}

.btn-eq-action.maint {
  background-color: var(--primary-subtle);
  color: var(--primary);
  border-color: var(--primary);
}

.btn-eq-action.maint:hover {
  background-color: var(--primary);
  color: #fff;
}

.btn-eq-action.wa {
  color: var(--text-whatsapp);
  border-color: rgba(37, 211, 102, 0.3);
  background-color: rgba(37, 211, 102, 0.08);
}

.btn-eq-action.wa:hover {
  background-color: var(--text-whatsapp);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Filtros de Historial por Equipo
   -------------------------------------------------------------------------- */
.timeline-filter-bar {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
  margin-bottom: 0.75rem;
}

.btn-timeline-filter {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  background-color: var(--bg-input);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-fast);
}

.btn-timeline-filter:hover {
  color: var(--text-main);
  border-color: var(--border-color-hover);
}

.btn-timeline-filter.active {
  background-color: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* --------------------------------------------------------------------------
   Márgenes y Optimización Ergonómica (Tablet, Smartphone & Desktop)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .app-sidebar {
    padding: 1rem;
    gap: 1rem;
  }
  
  .dialog-content {
    margin: 0.75rem auto;
    max-height: 92vh;
  }
  
  .filter-actions {
    gap: 0.5rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .app-container {
    padding: 0;
  }
  
  .app-sidebar {
    padding: 1.25rem;
  }
  
  .clients-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .client-detail-panel {
    width: 480px;
  }
}