/* MOD1 — Estilo moderno en computador (>768px). Solo CSS; el celular no cambia.
   Se carga como última hoja en cada template para ganar la cascada,
   incluidos los <style> inline. */

@media (min-width: 769px) {
  :root {
    --md-ground: #f1f5f9;
    --md-surface: #ffffff;
    --md-raised: #f8fafc;
    --md-border: #e2e8f0;
    --md-rule: #f1f5f9;
    --md-text: #1e293b;
    --md-muted: #64748b;
    --md-accent: #0f172a;
    --md-interactive: #2563eb;
    --md-radius: 14px;
    --md-radius-ctl: 10px;
    --md-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    --md-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .04);
  }

  body {
    font-family: var(--md-font);
    background:
      radial-gradient(1200px 600px at 50% -10%, rgba(37, 99, 235, .05), transparent 60%),
      var(--md-ground);
    color: var(--md-text);
  }
  a { color: var(--md-interactive); }

  .app { max-width: 1200px; }

  /* Cabecera pegajosa translúcida, ancho completo */
  .header {
    position: sticky;
    top: 0;
    z-index: 100;
    margin: 0 -24px 24px;
    padding: 14px 24px;
    background: rgba(255, 255, 255, .85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--md-border);
    border-radius: 0;
  }
  .header-text h1 { font-size: 18px; font-weight: 700 !important; letter-spacing: -0.02em; }
  .header-icon { border-radius: 10px; }

  /* Botones secundarios de la cabecera: todos iguales, sin subrayado */
  .user-menu .btn {
    height: 36px;
    padding: 0 12px !important;
    font-size: 13px !important;
    font-weight: 500;
    color: var(--md-text);
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius-ctl);
  }
  .user-menu .btn:hover { background: var(--md-raised); }

  /* Nombre de usuario como chip discreto */
  .user-menu #userName {
    color: var(--md-muted);
    font-weight: 500;
    background: none;
    border: none;
  }

  /* Tarjetas / paneles */
  .panel,
  .preview-card {
    background: var(--md-surface);
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius);
    box-shadow: var(--md-shadow);
  }
  .panel-body { padding: 22px 24px 24px; }

  /* Cotizar en una pantalla; conservar el DOM del asistente móvil. */
  #formPanel > .panel-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-flow: row dense;
    column-gap: 14px;
    padding: 16px 20px;
  }
  #formPanel .cot-auto { display: none !important; }
  #formPanel .field-label .tag { display: none; }
  #formPanel .field { margin-bottom: 10px; min-width: 0; }
  #formPanel .field-label { margin-bottom: 4px; }
  #formPanel .cot-proyecto { grid-column: 1 / -1; order: 1; }
  #formPanel .cot-contrato { grid-column: 1 / -1; order: 2; }
  #formPanel .cot-tipo { grid-column: 1; order: 3; }
  #formPanel .cot-mes { grid-column: 2; order: 3; }
  #singleMode, #batchMode { grid-column: 1 / -1; order: 4; min-width: 0; }
  #singleMode:not(.hidden) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 14px;
  }
  #singleMode > :nth-child(n + 3) { grid-column: 1 / -1; }


  /* Etiquetas y chips REQ/AUTO discretos */
  .field-label span {
    font-size: 13px;
    font-weight: 500;
    color: var(--md-muted);
    text-transform: none;
    letter-spacing: normal;
  }
  .field-label .tag {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
  }
  .tag-manual { background: #eff6ff; color: #1d4ed8; }
  .tag-auto { background: #d1fae5; color: #065f46; }

  /* Inputs / selects / textarea */
  .field input:not([type="checkbox"]):not([type="radio"]),
  .field select,
  .field textarea {
    height: 40px;
    padding: 0 12px;
    background: var(--md-raised);
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius-ctl);
    font-family: var(--md-font);
    transition: border-color 150ms, box-shadow 150ms, background-color 150ms;
  }
  .field textarea { height: auto; min-height: 88px; padding: 12px; }
  .field input:hover:not(:focus):not([readonly]),
  .field select:hover:not(:focus),
  .field textarea:hover:not(:focus) { border-color: #cbd5e1; }
  .field input:focus,
  .field select:focus,
  .field textarea:focus {
    background: #fff;
    border-color: var(--md-interactive);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
  }
  .field input[readonly] { background: var(--md-raised); color: var(--md-muted); }

  /* Filtros del historial */
  .hist-filtros input[type="text"],
  .hist-filtros select,
  .hist-filtros input[type="month"] {
    height: 40px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius-ctl);
    transition: border-color 150ms, box-shadow 150ms;
  }
  .hist-filtros input:focus,
  .hist-filtros select:focus {
    outline: none;
    border-color: var(--md-interactive);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
  }

  /* Filas de tickets (lote / preliquidación) */
  .ticket-row input {
    height: 36px;
    padding: 0 10px;
    background: var(--md-raised);
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius-ctl);
  }
  .ticket-row input:focus {
    background: #fff;
    border-color: var(--md-interactive);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
  }

  /* Botones */
  .btn {
    min-height: 40px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: var(--md-radius-ctl);
    font-weight: 600;
    font-family: var(--md-font);
    transition: background-color 150ms, border-color 150ms, transform 150ms, opacity 150ms;
  }
  .btn:active { transform: scale(.98); }
  .btn:disabled { opacity: .5; cursor: not-allowed; }
  .btn-primary:disabled {
    background: var(--md-accent);
    color: #fff;
    opacity: .4;
  }
  .btn-primary { background: var(--md-accent); }
  .btn-primary:hover:not(:disabled) { background: #1e293b; }
  .btn-success { background: #059669; }
  .btn-success:hover:not(:disabled) { background: #047857; }
  .btn-ghost {
    background: var(--md-surface);
    border: 1px solid var(--md-border);
    color: #334155;
  }
  .btn-ghost:hover { background: var(--md-raised); border-color: #cbd5e1; }

  /* Toggle de modo segmentado (en vez de negro) */
  .mode-toggle {
    background: var(--md-border);
    border: none;
    border-radius: 10px;
    padding: 3px;
    box-shadow: none;
  }
  .mode-btn { border-radius: 8px; }
  .mode-btn.active {
    background: #fff;
    color: var(--md-interactive);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
  }

  /* Quick select segmentado con acento azul */
  .quick-select {
    background: var(--md-border);
    border-radius: 10px;
    padding: 3px;
    gap: 3px;
    flex-wrap: nowrap;
  }
  .quick-btn {
    flex: 1;
    height: 36px;
    padding: 0 14px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #475569;
  }
  .quick-btn:hover { color: var(--md-interactive); }
  .quick-btn.active {
    background: #fff;
    color: var(--md-interactive);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
  }

  /* Tablas: números tabulares, filas de 44px, separadores suaves */
  table { font-variant-numeric: tabular-nums; }
  .carga-table { border-collapse: collapse; font-size: 13px; }
  .carga-table th,
  .carga-table td {
    border: none;
    border-bottom: 1px solid var(--md-rule);
    padding: 0 12px;
    height: 44px;
  }
  .carga-table th {
    background: var(--md-raised);
    font-size: 12px;
    font-weight: 600;
    color: var(--md-muted);
    text-transform: none;
    letter-spacing: normal;
  }
  .carga-table tr:nth-child(even) { background: transparent; }
  .carga-table tbody tr:hover { background: var(--md-raised); }

  .ticket-list-header {
    background: var(--md-raised);
    font-size: 12px;
    font-weight: 600;
    color: var(--md-muted);
    text-transform: none;
    letter-spacing: normal;
  }
  .ticket-row { min-height: 44px; border-bottom-color: var(--md-rule); }
  .ticket-row:hover { background: var(--md-raised); }

  /* Historial */
  .historial-item {
    min-height: 44px;
    align-items: center;
    border-bottom-color: var(--md-rule);
    font-size: 13px;
  }
  .historial-item:hover { background: var(--md-raised); }
  .historial-estado {
    min-width: 0;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
  }
  .historial-estado.OK { background: #d1fae5; color: #065f46; }
  .historial-estado.ERROR { background: #fee2e2; color: #991b1b; }
  .historial-estado.PENDIENTE,
  .historial-estado.DRY_RUN { background: #fef3c7; color: #92400e; }

  /* Badges de resumen (carga horaria) como píldoras */
  .resumen-horas .badge { border-radius: 999px; font-weight: 600; }

  /* Cabecera de tarjetas de vista previa clara */
  .preview-card-header {
    background: var(--md-raised);
    color: var(--md-accent);
    border-bottom: 1px solid var(--md-rule);
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
  }

  /* Controles secundarios */
  .add-row-btn,
  .paste-box { border-radius: var(--md-radius-ctl); }

  /* Login: tarjeta centrada 400px */
  .login-box {
    max-width: 400px !important;
    border-radius: var(--md-radius) !important;
    border: 1px solid var(--md-border);
    box-shadow: var(--md-shadow) !important;
  }

  /* Sin movimiento si el usuario lo pide */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
  }
}