/*
 * ============================================================
 *  PALETA DE COLORES AURUM — Fuente única de verdad
 *  Archivo: public/styles/colores.css
 *  Uso:  color: var(--aurum-primary);
 *  En JS (ECharts): getComputedStyle(document.documentElement)
 *                     .getPropertyValue('--aurum-primary').trim()
 * ============================================================
 */

:root {
  /* --- Marca (teal Aurum, apagado un punto) --- */
  --aurum-primary:        #00897B;   /* antes #009688 (teal 600, menos brillante) */
  --aurum-primary-rgb:    0,137,123; /* para rgba(var(--aurum-primary-rgb), .5) */
  --aurum-black-rgb:      0,0,0;     /* para rgba(var(--aurum-black-rgb), .06) sombras/bordes */
  --aurum-primary-dark:   #00796B;   /* fondo  */
  --aurum-primary-darker: #00695C;   /* hover  */
  --aurum-teal-alt:       #5AA39A;   /* antes #26A69A */

  /* --- Info / cian (cian apagado, ya no eléctrico) --- */
  --aurum-info:           #4F8E99;   /* antes #00BCD4 */
  --aurum-info-dark:      #3E7680;   /* antes #00ACC1 */
  --aurum-info-alt:       #325E66;   /* antes #00838F */

  /* --- Estado (versiones desaturadas) --- */
  --aurum-success:        #7FA886;   /* antes #8BC34A — verde salvia */
  --aurum-success-dark:   #5F8A67;   /* antes #689F38 */
  --aurum-success-alt:    #6F9A77;   /* antes #7CB342 */
  --aurum-warning:        #D8B45E;   /* antes #FFCA28 — ámbar mate */
  --aurum-danger:         #C56B61;   /* antes #F44336 — terracota mate */
  --aurum-danger-dark:    #AC564C;   /* antes #E53935 */

  /* --- Metales / categorías de gráficas (tonos tierra) --- */
  --aurum-gold:           #7A5B18;   /* oro — oscurecido #C39A47 → #7A5B18; WCAG AA ≥4.5:1 sobre blanco */
  --aurum-orange:         #8A5C38;   /* concentrados/CNC — oscurecido para mejor legibilidad como texto */
  --aurum-indigo:         #5C6490;   /* joyería/series — ligero ajuste de saturación */
  --aurum-silver:         #90A4AE;   /* plata (ya era neutro) */
  --aurum-silver-light:   #B0BEC5;
  --aurum-silver-dark:    #607D8B;

  /* --- Neutros / texto / fondos (sin cambios) --- */
  --aurum-dark:           #262B33;
  --aurum-text:           #3D4051;
  --aurum-text-soft:      #37474F;
  --aurum-muted:          #78909C;
  --aurum-bg-panel:       #F2F7F7;
  --aurum-bg-tint:        #E0F2F1;   /* teal muy claro */
  --aurum-border:         #e0e0e0;
  --aurum-bg-page:        #efefef;

  /* --- Semáforo (tablas de metas / diferencias) --- */
  --aurum-cell-green:     #E5F1E4;   /* muy tenue — #CFE0CE → #E5F1E4: fondo de fila, NO decorativo */
  --aurum-cell-yellow:    #F5EDDA;   /* muy tenue — #EFE2B6 → #F5EDDA: idem */
  --aurum-cell-red:       #FFCCBC;   /* FIJO — rojo negativo */
  --aurum-diff-pos:       #2E6B38;   /* texto verde oscuro — #3E7A4A → #2E6B38: mejor contraste */
  --aurum-diff-neg:       #922E28;   /* texto rojo oscuro  — #B0564E → #922E28: WCAG AA */

  /* --- Paleta "slate" del Informe de Compras v2 (.prv2) --- */
  --aurum-slate:               #8a9bb0;   /* slate base: acento KPI, foco, hover tab */
  --aurum-slate-rgb:           138,155,176;
  --aurum-slate-panel-bg:      #f6f7f8;   /* fondo panel-heading */
  --aurum-slate-panel-border:  #e0e3e7;   /* borde panel-heading */
  --aurum-slate-title:         #4e5869;   /* texto panel-title / pills */
  --aurum-slate-muted:         #6a7480;   /* texto KPI title */
  --aurum-slate-tab-active:    #3d4a58;   /* texto tab activa */
  --aurum-slate-tab-border:    #6a7fa0;   /* borde inferior tab activa */
  --aurum-slate-pill-active:   #5a6b80;   /* fondo pill activa */
  --aurum-slate-alert-bg:      #f8f8f8;   /* fondo alert-info */
  --aurum-slate-alert-border:  #dde0e4;   /* borde alert-info */
  --aurum-slate-alert-text:    #5a6472;   /* texto alert-info */
  --aurum-slate-btn:           #4a5a6e;   /* fondo btn-primary */
  --aurum-slate-btn-dark:      #3d4d60;   /* borde btn-primary / hover bg */
  --aurum-slate-btn-darker:    #334252;   /* borde btn-primary hover */
  --aurum-slate-btn-info:      #607d8b;   /* fondo btn-info */
  --aurum-slate-btn-info-bd:   #527080;   /* borde btn-info */
  /* Acentos laterales de tarjetas KPI */
  --aurum-slate-kpi-warning:   #b8a06a;
  --aurum-slate-kpi-success:   #6a8f72;
  --aurum-slate-kpi-danger:    #9a6a6a;
  --aurum-slate-kpi-info:      #6a8fa5;
  --aurum-slate-kpi-default:   #aab0b8;

  /* --- Neutros utilitarios (blancos, grises, bordes suaves) --- */
  --aurum-white:           #ffffff;   /* blanco puro */
  --aurum-bg-soft:         #fafafa;   /* gris muy claro: fondos sutiles */
  --aurum-border-soft:     #eeeeee;   /* borde gris claro */
  --aurum-border-light:    #d9d9d9;   /* borde gris medio (tablas) */
  --aurum-muted-soft:      #888888;   /* texto gris secundario */

  /* --- Error / utilidad roja (alias semántico de danger) --- */
  --aurum-error:           var(--aurum-danger);       /* rojo predeterminado: botones de utilidad, errores, diferencias */
  --aurum-error-dark:      var(--aurum-danger-dark);  /* texto rojo oscuro: descuentos, valores negativos */

  /* --- Fondos suaves de "celda/fila" (semáforo extendido) --- */
  --aurum-cell-blue:       #e3f2fd;   /* info muy tenue */
  --aurum-cell-orange:     #fff3e0;   /* warning muy tenue */
}

/* ============================================================
   Overrides: alinea componentes Bootstrap / Angular Material
   a la paleta (las variables no repintan clases compiladas).
   ============================================================ */

/* --- Bootstrap: filas y celdas de estado en tablas --- */
.table > thead > tr.info > th,
.table > tbody > tr.info > td,
.table > tbody > tr > td.info {
  background-color: var(--aurum-info) !important;
  color: #fff !important;
}
/* --- Bootstrap: filas de estado en tablas (tintes mínimos; reservar color para estado real) --- */
.table > tbody > tr.success > td,
.table > tbody > tr > td.success {
  background-color: var(--aurum-cell-green) !important;
  color: inherit !important;
}
.table > tbody > tr.warning > td,
.table > tbody > tr > td.warning {
  background-color: var(--aurum-cell-yellow) !important;
  color: inherit !important;
}
.table > tbody > tr.danger > td,
.table > tbody > tr > td.danger {
  background-color: var(--aurum-cell-red) !important;
  color: inherit !important;
}

/* --- Bootstrap: labels / badges (soft: tinte + borde + texto oscuro, sin bloque de color sólido) --- */
.label-success {
  background-color: #DFF0DC !important;
  color: var(--aurum-diff-pos) !important;
  border: 1px solid var(--aurum-success) !important;
}
.label-info {
  background-color: #DFF0EF !important;
  color: var(--aurum-info-alt) !important;
  border: 1px solid var(--aurum-info) !important;
}
.label-warning {
  background-color: #F5EDDA !important;
  color: #6B4A0A !important;
  border: 1px solid var(--aurum-warning) !important;
}
.label-danger {
  background-color: #FCDDD9 !important;
  color: var(--aurum-diff-neg) !important;
  border: 1px solid var(--aurum-danger) !important;
}

/* --- Bootstrap: fondos suaves contextuales --- */
.bg-success { background-color: var(--aurum-cell-green)  !important; }
.bg-info    { background-color: var(--aurum-bg-tint)     !important; }
.bg-warning { background-color: var(--aurum-cell-yellow) !important; }
.bg-danger  { background-color: var(--aurum-cell-red)    !important; }

/* --- Compatibilidad: la fuente "Glyphicons Halflings" no se carga en este entorno
       (la ruta del @font-face en main.css no existe), por lo que las flechas de
       navegación del uib-datepicker (glyphicon-chevron-*) quedaban invisibles.
       Se sustituyen por FontAwesome, que sí está cargada en toda la app. --- */
.glyphicon-chevron-left::before  { font-family: 'FontAwesome'; content: "\f053"; }
.glyphicon-chevron-right::before { font-family: 'FontAwesome'; content: "\f054"; }

/* --- Angular Material: primary / warn (color de texto/ícono) --- */
.md-primary.md-button:not(.md-raised):not(.md-fab) { color: var(--aurum-primary) !important; }
.md-raised.md-primary,
.md-fab.md-primary { background-color: var(--aurum-primary) !important; color: #fff !important; }
.md-raised.md-warn,
.md-fab.md-warn    { background-color: var(--aurum-error)  !important; color: #fff !important; }

/* ============================================================
   Design system de Reportes — namespace .prv2
   Aplicar class="prv2" en el contenedor raíz de la vista.
   ============================================================ */

/* Paneles */
.prv2 .panel{ border:1px solid var(--aurum-border); border-radius:8px; box-shadow:0 1px 3px rgba(var(--aurum-black-rgb),.06); }
.prv2 .panel-heading{ background:var(--aurum-slate-panel-bg); border-bottom:1px solid var(--aurum-slate-panel-border); border-radius:8px 8px 0 0; }
.prv2 .panel-title{ color:var(--aurum-slate-title); font-weight:600; }

/* Tarjetas KPI */
.prv2 .kpi-row{ display:flex; flex-wrap:wrap; }
.prv2 .kpi-row > [class*="col-"]{ display:flex; }
.prv2 .kpi-row .panel{ position:relative; overflow:hidden; width:100%;
    transition:transform .15s ease, box-shadow .15s ease; }
.prv2 .kpi-row .panel:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(var(--aurum-black-rgb),.10); }
.prv2 .kpi-row .panel-heading{ background:transparent; border:0; padding:14px 16px 0; }
.prv2 .kpi-row .panel-title{ font-size:11px; text-transform:uppercase; letter-spacing:1px;
    color:var(--aurum-slate-muted); font-weight:600; }
.prv2 .kpi-row .panel-body{ padding:4px 16px 16px; }
.prv2 .kpi-row .panel-body h3{ font-size:26px; font-weight:700; margin:0; color:var(--aurum-text); }
.prv2 .kpi-row .panel::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--aurum-slate); }
.prv2 .kpi-row .panel-warning::before{ background:var(--aurum-slate-kpi-warning); }
.prv2 .kpi-row .panel-success::before{ background:var(--aurum-slate-kpi-success); }
.prv2 .kpi-row .panel-danger::before{  background:var(--aurum-slate-kpi-danger); }
.prv2 .kpi-row .panel-info::before{    background:var(--aurum-slate-kpi-info); }
.prv2 .kpi-row .panel-default::before{ background:var(--aurum-slate-kpi-default); }

/* Tabs */
.prv2 .nav-tabs{ border-bottom:2px solid var(--aurum-border); }
.prv2 .nav-tabs > li > a{ color:var(--aurum-text-soft); border:0; border-bottom:2px solid transparent;
    margin-bottom:-2px; border-radius:0; }
.prv2 .nav-tabs > li > a:hover{ background:transparent; color:var(--aurum-primary-dark);
    border-bottom-color:var(--aurum-slate); }
.prv2 .nav-tabs > li.active > a,
.prv2 .nav-tabs > li.active > a:hover,
.prv2 .nav-tabs > li.active > a:focus{ color:var(--aurum-slate-tab-active); font-weight:600; background:transparent;
    border:0; border-bottom:2px solid var(--aurum-slate-tab-border); }

/* Pills */
.prv2 .nav-pills > li > a{ color:var(--aurum-slate-title); border-radius:20px; }
.prv2 .nav-pills > li.active > a,
.prv2 .nav-pills > li.active > a:hover,
.prv2 .nav-pills > li.active > a:focus{ background:var(--aurum-slate-pill-active) !important; color:var(--aurum-white) !important; }

/* Tablas */
.prv2 .table > thead > tr > th{ color:var(--aurum-white); font-weight:600; font-size:12px; letter-spacing:.3px;
    text-align:center; vertical-align:middle; border-color:rgba(var(--aurum-black-rgb),.06); background:var(--aurum-primary); }
.prv2 .table > tbody > tr > td{ vertical-align:middle; white-space:nowrap; }
.prv2 .table-hover > tbody > tr:hover{ background:var(--aurum-bg-tint); }
.prv2 .table-responsive{ max-height:520px; overflow:auto; border-radius:10px; border:1px solid rgba(var(--aurum-black-rgb),.08); }
.prv2 .table-responsive > .table > thead > tr > th{ position:sticky; top:0; z-index:3; }
.prv2 .table-responsive > .table > thead > tr:first-child > th:first-child{ border-top-left-radius:9px; }
.prv2 .table-responsive > .table > thead > tr:first-child > th:last-child { border-top-right-radius:9px; }
.prv2 .table-responsive > .table > tbody > tr:last-child > td:first-child { border-bottom-left-radius:9px; }
.prv2 .table-responsive > .table > tbody > tr:last-child > td:last-child  { border-bottom-right-radius:9px; }
.prv2 .table-responsive > .table > tbody > tr:last-child > td             { border-bottom:0; }

/* Filtros: foco */
.prv2 .form-control:focus{ border-color:var(--aurum-slate); box-shadow:0 0 0 2px rgba(var(--aurum-slate-rgb),.15); }

/* Alerta/totales */
.prv2 .alert-info{ background:var(--aurum-slate-alert-bg); border-color:var(--aurum-slate-alert-border); color:var(--aurum-slate-alert-text); }

/* Alerts con labels (filas de Totales): respiración entre items */
.prv2 .alert > strong:first-child{ display:block; margin-bottom:8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:var(--aurum-slate-title); }
.prv2 .alert .label{ display:inline-block; margin:3px 4px 3px 0; padding:5px 10px; font-size:12px; font-weight:600; line-height:1.4; }
.prv2 .alert > div{ margin-top:6px; }

/* Labels semánticos por metal/categoría (consistencia visual Au/Ag/Total) */
.prv2 .label.lbl-au    { background:rgba(122,91,24,.10) !important; color:var(--aurum-gold) !important;          border:1px solid var(--aurum-gold) !important; }
.prv2 .label.lbl-ag    { background:rgba(144,164,174,.18) !important; color:var(--aurum-silver-dark) !important; border:1px solid var(--aurum-silver) !important; }
.prv2 .label.lbl-total { background:rgba(0,137,123,.10) !important;   color:var(--aurum-primary-dark) !important;border:1px solid var(--aurum-primary) !important; }
.prv2 .label.lbl-info  { background:var(--aurum-bg-tint) !important;  color:var(--aurum-info-alt) !important;    border:1px solid var(--aurum-info) !important; }
.prv2 .label.lbl-desc  { background:rgba(197,107,97,.12) !important;  color:var(--aurum-error-dark) !important;  border:1px solid var(--aurum-error) !important; }
.prv2 .label.lbl-extra { background:rgba(138,92,56,.10) !important;   color:var(--aurum-orange) !important;      border:1px solid var(--aurum-orange) !important; }

/* Celdas de tabla por metal (color de texto consistente) */
.prv2 .table .td-au { color:var(--aurum-gold) !important; font-weight:bold; }
.prv2 .table .td-ag { color:var(--aurum-silver-dark) !important; font-weight:bold; }
.prv2 .table .td-total { color:var(--aurum-success-dark) !important; font-weight:bold; }
.prv2 .table .td-desc { color:var(--aurum-error-dark) !important; }

/* Botones */
.prv2 .btn-primary{ background:var(--aurum-slate-btn); border-color:var(--aurum-slate-btn-dark); }
.prv2 .btn-primary:hover,.prv2 .btn-primary:focus{ background:var(--aurum-slate-btn-dark); border-color:var(--aurum-slate-btn-darker); }
.prv2 .btn-info{ background:var(--aurum-slate-btn-info); border-color:var(--aurum-slate-btn-info-bd); }

/* Filtros grid (accordion) */
.prv2-filtros-grid .form-group{ margin-bottom:14px; }
.prv2-filtros-grid label{ display:block; font-size:14px; font-weight:600; color:var(--aurum-text-soft); margin-bottom:6px; }
.prv2-filtros-grid .form-control,
.prv2-filtros-grid .btn-block{
    height:38px; font-size:14px;
    border:1px solid var(--aurum-border-light) !important;
    border-radius:4px;
    background:var(--aurum-white);
}
.prv2-filtros-grid .form-control:focus{
    border-color:var(--aurum-slate-btn) !important;
    box-shadow:0 0 0 2px rgba(60,90,120,.15);
    outline:none;
}
.prv2-filtros-grid .input-group .form-control{ height:38px; border-right:0 !important; border-top-right-radius:0; border-bottom-right-radius:0; }
.prv2-filtros-grid .input-group-addon{
    height:38px; padding:8px 12px; font-size:14px;
    border:1px solid var(--aurum-border-light);
    border-left:0;
    background:var(--aurum-bg-soft);
    color:var(--aurum-text-soft);
}
.prv2-filtros-grid .btn-block{ text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prv2-filtros-grid .btn-block .caret{ float:right; margin-top:9px; }
.prv2-filtros-grid select.form-control{ font-size:14px; }

/* Componentes compartidos (public/app/shared/*.component.js)
   Un tag desconocido para el navegador es `inline`: sin esto el .form-group
   que viene dentro no ocupa el ancho de la columna. */
aurum-date-field{ display:block; }
/* Marca de campo obligatorio (atributo is-required de <aurum-date-field>). */
.aurum-req{ color:var(--aurum-danger-dark); margin-left:2px; }

/* Filtro suelto en sub-tab (caja con borde para destacar el control) */
.prv2-filtro-card{
    padding:8px 10px;
    border:1px solid var(--aurum-border-soft);
    border-radius:4px;
    background:var(--aurum-bg-soft);
}
.prv2-filtro-card label{
    display:block; font-size:12px; font-weight:600;
    color:var(--aurum-text-soft); margin-bottom:4px;
}