/* ==========================================================================
   ERP ORO & MINERALES — TEMA BASE
   --------------------------------------------------------------------------
   Compatible con AngularJS 1.x + Angular Material + Bootstrap 3.
   No requiere preprocesador ni build step. Usa CSS Custom Properties
   (soportadas en Chrome, que es el navegador objetivo).

   ESTRATEGIA DE NOMBRES
     :root        -> tokens (variables) globales
     .erp-*       -> COMPONENTES reutilizables (tabla, card, badge, btn...)
     .u-*         -> UTILIDADES atómicas (espaciado, texto, color)
   El prefijo evita colisiones con Bootstrap (.btn, .table) y Material (.md-*).

   ORDEN DE CARGA RECOMENDADO en el <head>:
     1) bootstrap.css
     2) angular-material.css
     3) erp-theme.css   <-- este archivo (gana por especificidad/orden)
   ========================================================================== */

/* ==========================================================================
   1. TOKENS / VARIABLES
   ========================================================================== */
:root {
  /* ---- Marca / Primarios (#3C8890 como base) -------------------------- */
  --color-primary-900: #2a6068;
  --color-primary-800: #326c74;   /* fondo hover/focus */
  --color-primary-700: #3C8890;   /* BASE: fondo + borde */
  --color-primary-600: #4d9da5;
  --color-primary-500: #6bb0b7;
  --color-primary-100: #c8e2e5;
  --color-primary-50:  #e8f3f4;

  /* ---- Acento / Oro (complementario cálido del teal) ------------------ */
  --color-accent-700: #9c6f15;
  --color-accent-600: #b8860b;    /* dorado */
  --color-accent-500: #d4a017;
  --color-accent-100: #f6e9c7;

  /* ---- Acción / Azul (navy de la paleta #3C6C8F) --------------------- */
  --color-action-700: #2d5270;
  --color-action-600: #3C6C8F;    /* azul de la paleta */
  --color-action-500: #5083a3;
  --color-action-100: #d2e0eb;

  /* ---- Estados ------------------------------------------------------- */
  --color-success-700: #2d6e48;
  --color-success-500: #3C8F5F;   /* verde de la paleta */
  --color-success-100: #d4e8dc;

  --color-warning-700: #2d6e5e;
  --color-warning-500: #3C8F7C;   /* verde-teal de la paleta */
  --color-warning-100: #d4e8e3;

  --color-error-700:   #a93226;
  --color-error-500:   #e74c3c;
  --color-error-100:   #fadbd8;

  --color-info-700:    #2d4070;
  --color-info-500:    #3C528F;    /* indigo de la paleta */
  --color-info-100:    #d5daea;

  /* ---- Neutros / Grises ---------------------------------------------- */
  --color-white:    #ffffff;
  --color-gray-50:  #f8f9fa;
  --color-gray-100: #f1f3f5;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-400: #ced4da;
  --color-gray-500: #adb5bd;
  --color-gray-600: #868e96;
  --color-gray-700: #495057;
  --color-gray-800: #343a40;
  --color-gray-900: #212529;

  /* ---- Roles semánticos (USAR ESTOS en los templates) ----------------- */
  --bg-app:          var(--color-gray-50);
  --bg-surface:      var(--color-white);
  --bg-subtle:       var(--color-gray-100);
  --text-primary:    var(--color-gray-900);
  --text-secondary:  var(--color-gray-700);
  --text-muted:      var(--color-gray-600);
  --text-on-dark:    var(--color-white);
  --border-color:    var(--color-gray-300);
  --link-color:      var(--color-action-600);

  /* ---- Tipografía ------------------------------------------------------
     Roboto ya viene cargado por WebFontLoader en index.html. */
  --font-sans: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'Roboto Mono', 'Consolas', 'Menlo', monospace;
  --lh-base:   1.5;

  --fs-xs:   11px;   /* badges, metadatos, headers de tabla en mayúsculas */
  --fs-sm:   12px;   /* tablas de datos densos (estándar) */
  --fs-base: 14px;   /* cuerpo, formularios, botones */
  --fs-md:   16px;   /* subtítulos */
  --fs-lg:   18px;   /* títulos de sección / card header */
  --fs-xl:   22px;   /* título de página */

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---- Espaciado: escala de 4px ---------------------------------------
     Nunca inventar valores sueltos (7px, 13px…): salir siempre de acá. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;

  /* ---- Bordes y radios ------------------------------------------------- */
  --border-width: 1px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  /* ---- Sombras ---------------------------------------------------------- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 14px 44px rgba(0, 0, 0, 0.30);

  /* ---- Capas (z-index) --------------------------------------------------
     Por debajo de los overlays de Angular Material (md-dialog usa 80+),
     pero por encima del contenido y de los popups de filtro (1050). */
  --z-sticky:    2;
  --z-dropdown:  1050;
  --z-modal:     1300;
  --z-modal-top: 1400;
}

/* ==========================================================================
   2. BASE / RESET LIGERO
   ========================================================================== */
.erp-app {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text-primary);
  background: var(--bg-app);
}
.erp-app a { color: var(--link-color); text-decoration: none; }
.erp-app a:hover { text-decoration: underline; }

/* ==========================================================================
   3. CARDS / PANELES
   ========================================================================== */
.erp-card {
  background: var(--bg-surface);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
}
.erp-card__header {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--border-color);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.erp-card__body   { padding: var(--space-4); }
.erp-card__footer {
  padding: var(--space-3) var(--space-4);
  border-top: var(--border-width) solid var(--border-color);
  background: var(--bg-subtle);
}

/* ==========================================================================
   3.b MODALES / OVERLAYS
   --------------------------------------------------------------------------
   Para diálogos propios (no <md-dialog>) que necesitan ancho de tabla.
   Dos capas: .erp-modal-overlay y, para los que se abren ENCIMA de otro,
   .erp-modal-overlay--top.

   <div class="erp-modal-overlay">
     <div class="erp-modal">
       <div class="erp-modal__header">…</div>
       <div class="erp-modal__body">…</div>
       <div class="erp-modal__footer">…</div>
     </div>
   </div>
   ========================================================================== */
.erp-modal-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: var(--z-modal);
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: auto;
  padding: var(--space-6);
}
.erp-modal-overlay--top { z-index: var(--z-modal-top); }

.erp-modal {
  width: 100%;
  max-width: 1100px;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.erp-modal--wide   { max-width: 1280px; }
.erp-modal--narrow { max-width: 780px; }

.erp-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: var(--border-width) solid var(--border-color);
}
.erp-modal__title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.erp-modal__subtitle {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.erp-modal__body { padding: var(--space-4) var(--space-6); }
.erp-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-6);
  border-top: var(--border-width) solid var(--border-color);
  background: var(--bg-subtle);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ==========================================================================
   3.c FORMULARIOS
   ========================================================================== */
.erp-field { margin-bottom: var(--space-3); }
.erp-field__label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.erp-field__hint {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.erp-input,
.erp-select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: var(--border-width) solid var(--color-gray-400);
  border-radius: var(--radius-sm);
}
.erp-input:focus,
.erp-select:focus {
  outline: none;
  border-color: var(--color-action-600);
  box-shadow: 0 0 0 2px var(--color-action-100);
}
.erp-input:disabled,
.erp-select:disabled { background: var(--color-gray-100); color: var(--text-muted); }
.erp-input--num { text-align: right; font-variant-numeric: tabular-nums; }
.erp-input--error { border-color: var(--color-error-500); background: var(--color-error-100); }

/* --------------------------------------------------------------------------
   COMBO BUSCABLE (escribir para filtrar + lista desplegable)
   Patrón de la guía §10 aplicado a un campo de selección. Alternativa a
   <md-autocomplete> cuando el formulario ya usa .erp-input y no se quiere
   mezclar el estilo de Angular Material.

   <div class="erp-field erp-combo">
     <label class="erp-field__label">Proveedor</label>
     <input class="erp-input" ng-model="q" ng-focus="abrir()">
     <div class="erp-combo__list" ng-if="abierto">
       <button class="erp-combo__option" ng-repeat="…" ng-mousedown="elegir(x)">…</button>
       <div class="erp-combo__empty" ng-if="!items.length">Sin coincidencias</div>
     </div>
   </div>

   Nota: usar ng-mousedown (no ng-click) en las opciones, porque el ng-blur
   del input se dispara antes del click y cerraría la lista.
   -------------------------------------------------------------------------- */
.erp-combo { position: relative; }
.erp-combo__list {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  max-height: 260px;
  overflow-y: auto;
  background: var(--bg-surface);
  border: var(--border-width) solid var(--color-gray-400);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.erp-combo__option {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  text-align: left;
  color: var(--text-primary);
  background: none;
  border: 0;
  border-bottom: var(--border-width) solid var(--color-gray-200);
  cursor: pointer;
}
.erp-combo__option:last-child { border-bottom: 0; }
.erp-combo__option:hover,
.erp-combo__option.is-active { background: var(--color-action-100); }
.erp-combo__option.is-selected {
  background: var(--color-primary-50);
  font-weight: var(--fw-semibold);
}
.erp-combo__option-meta {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  color: var(--text-muted);
}
.erp-combo__empty,
.erp-combo__more {
  padding: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.erp-combo__more {
  border-top: var(--border-width) solid var(--color-gray-200);
  font-size: var(--fs-xs);
  text-align: center;
}

/* ==========================================================================
   4. TABLAS DE DATOS DENSOS
   --------------------------------------------------------------------------
   <table class="erp-table erp-table--dense erp-table--sticky"> ... </table>
   ========================================================================== */
.erp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  background: var(--bg-surface);
}
.erp-table th,
.erp-table td {
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--border-color);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}
/* Encabezado por defecto: navy */
.erp-table thead th {
  background: var(--color-primary-700);
  color: var(--text-on-dark);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
/* Variantes de header (la "naranja" que ya usabas, etc.) */
.erp-table--header-amber  thead th { background: var(--color-warning-500); }
.erp-table--header-gold   thead th { background: var(--color-accent-600); }
.erp-table--header-action thead th { background: var(--color-action-600); }

/* Densidad */
.erp-table--dense th,
.erp-table--dense td { padding: var(--space-1) var(--space-2); }

/* Zebra + hover (mejora lectura en cientos de filas) */
.erp-table--zebra tbody tr:nth-child(even) { background: var(--color-gray-50); }
.erp-table tbody tr:hover { background: var(--color-action-100); }

/* Header pegajoso para scroll vertical largo */
.erp-table--sticky thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

/* Números alineados a la derecha (montos, gramos, leyes) */
.erp-table .is-num,
.u-text-right { text-align: right; font-variant-numeric: tabular-nums; }

/* Fila de TOTALES */
.erp-table tr.erp-table__total td,
.erp-table__total td {
  background: var(--color-primary-50);
  font-weight: var(--fw-bold);
  border-top: 2px solid var(--color-primary-700);
}

/* Contenedor con scroll horizontal para 20-50 columnas */
.erp-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   5. BADGES / LABELS DE CONTEO
   ========================================================================== */
.erp-badge {
  display: inline-block;
  padding: 2px var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  border-radius: var(--radius-pill);
  background: var(--color-gray-200);
  color: var(--text-secondary);
}
.erp-badge--primary { background: var(--color-primary-100); color: var(--color-primary-800); }
.erp-badge--success { background: var(--color-success-100); color: var(--color-success-700); }
.erp-badge--warning { background: var(--color-warning-100); color: var(--color-warning-700); }
.erp-badge--error   { background: var(--color-error-100);   color: var(--color-error-700); }
.erp-badge--info    { background: var(--color-info-100);    color: var(--color-info-700); }

/* ==========================================================================
   6. BOTONES
   --------------------------------------------------------------------------
   Si usas <md-button>, aplica estas clases junto a las de Material.
   Para botones nativos: <button class="erp-btn erp-btn--primary">
   ========================================================================== */
.erp-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.erp-btn:disabled,
.erp-btn.is-disabled { opacity: 0.55; cursor: not-allowed; }

.erp-btn--primary   { background: var(--color-primary-700); color: var(--text-on-dark); }
.erp-btn--primary:hover   { background: var(--color-primary-800); }

.erp-btn--secondary { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-color); }
.erp-btn--secondary:hover { background: var(--color-gray-100); }

.erp-btn--action    { background: var(--color-action-600); color: var(--text-on-dark); }
.erp-btn--action:hover    { background: var(--color-action-700); }

/* Botón de EXPORTAR (verde, asociado a Excel/descargas) */
.erp-btn--export    { background: var(--color-success-500); color: var(--text-on-dark); }
.erp-btn--export:hover    { background: var(--color-success-700); }

.erp-btn--danger    { background: var(--color-error-500); color: var(--text-on-dark); }
.erp-btn--danger:hover    { background: var(--color-error-700); }

.erp-btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--fs-sm); }
.erp-btn--icon { padding: var(--space-2); }

/* ==========================================================================
   7. ESTADOS DE CARGA / VACÍO / ERROR
   ========================================================================== */
.erp-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8);
  color: var(--text-muted);
  font-size: var(--fs-base);
}
.erp-spinner {
  /* `display` es OBLIGATORIO acá: se usa sobre un <span>, que por defecto es
     inline e IGNORA width/height. Dentro de .erp-loading (flex) el span se
     blockifica solo y por eso se veía bien, pero en cualquier padre que no sea
     flex quedaba como una rayita vertical. Poner inline-block no cambia nada
     donde ya funcionaba: un item flex se blockifica igual. */
  display: inline-block;
  vertical-align: middle;
  width: 22px; height: 22px;
  border: 3px solid var(--color-gray-300);
  border-top-color: var(--color-action-600);
  border-radius: 50%;
  animation: erp-spin 0.7s linear infinite;
}
@keyframes erp-spin { to { transform: rotate(360deg); } }
/* Se conserva el giro (comunica que algo sigue en curso) pero mucho más lento. */
@media (prefers-reduced-motion: reduce) {
  .erp-spinner { animation-duration: 2.4s; }
}

.erp-empty {
  text-align: center;
  padding: var(--space-10) var(--space-4);
  color: var(--text-muted);
}
.erp-empty__icon { font-size: 40px; opacity: 0.4; margin-bottom: var(--space-3); }
.erp-empty__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-secondary); }

/* ==========================================================================
   8. ALERTAS INLINE (no toasts)
   ========================================================================== */
.erp-alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border-left: 4px solid;
  margin-bottom: var(--space-4);
  font-size: var(--fs-base);
}
.erp-alert--success { background: var(--color-success-100); border-color: var(--color-success-500); color: var(--color-success-700); }
.erp-alert--warning { background: var(--color-warning-100); border-color: var(--color-warning-500); color: var(--color-warning-700); }
.erp-alert--error   { background: var(--color-error-100);   border-color: var(--color-error-500);   color: var(--color-error-700); }
.erp-alert--info    { background: var(--color-info-100);    border-color: var(--color-info-500);    color: var(--color-info-700); }

/* ==========================================================================
   9. UTILIDADES ATÓMICAS (.u-*)
   ========================================================================== */
/* Texto */
.u-text-left   { text-align: left; }
.u-text-center { text-align: center; }
.u-text-right  { text-align: right; }
.u-text-muted  { color: var(--text-muted); }
.u-text-bold   { font-weight: var(--fw-bold); }
.u-text-nowrap { white-space: nowrap; }
.u-fs-xs { font-size: var(--fs-xs); }
.u-fs-sm { font-size: var(--fs-sm); }
.u-fs-base { font-size: var(--fs-base); }
.u-mono  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Color de texto por estado */
.u-text-success { color: var(--color-success-700); }
.u-text-warning { color: var(--color-warning-700); }
.u-text-error   { color: var(--color-error-700); }

/* Espaciado (margin/padding) */
.u-m-0 { margin: 0; }      .u-p-0 { padding: 0; }
.u-mt-2 { margin-top: var(--space-2); }    .u-mt-4 { margin-top: var(--space-4); }
.u-mb-2 { margin-bottom: var(--space-2); } .u-mb-4 { margin-bottom: var(--space-4); }
.u-mr-2 { margin-right: var(--space-2); }  .u-ml-2 { margin-left: var(--space-2); }
.u-p-2 { padding: var(--space-2); }        .u-p-4 { padding: var(--space-4); }

/* Layout */
.u-flex { display: flex; }
.u-flex-between { display: flex; align-items: center; justify-content: space-between; }
.u-flex-center  { display: flex; align-items: center; justify-content: center; }
.u-gap-2 { gap: var(--space-2); }
.u-gap-4 { gap: var(--space-4); }
.u-w-100 { width: 100%; }

/* Fondos rápidos */
.u-bg-surface { background: var(--bg-surface); }
.u-bg-subtle  { background: var(--bg-subtle); }

/* ==========================================================================
   10. ICONOS — consistencia de tamaño (ver guía: estandarizar en Material)
   ========================================================================== */
.erp-icon      { font-size: 18px; line-height: 1; vertical-align: middle; }
.erp-icon--sm  { font-size: 14px; }
.erp-icon--lg  { font-size: 24px; }

/* ==========================================================================
   11. BREAKPOINTS de ejemplo (ajustes para 1366 vs 1920)
   ========================================================================== */
@media (max-width: 1366px) {
  :root { --fs-base: 13px; --fs-sm: 12px; }
}