/* ==========================================================================
   Invertí Encarnación — componentes del panel
   Se apoya en los tokens de admin.css y agrega lo propio.
   ========================================================================== */

body.admin-panel {
  --ie-teal: #0b5563;
  --ie-teal-700: #094652;
  --ie-sand: #f4efe6;
  --ie-terracota: #b4531f;
  --ie-ok: #15803d;
  --ie-aviso: #a16207;
  --ie-error: #b91c1c;
  --ie-info: #0369a1;
  --color-accent: #0b5563;
  --color-accent-hover: #094652;
  --sidebar-active-bg: #0b5563;
}

body.admin-panel .brand-link .brand-image { border-radius: 8px; background: transparent; }

body.admin-panel .ie-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ie-teal); color: #fff; font-weight: 700;
}

body.admin-panel .ie-header-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

body.admin-panel .ie-alert { border-radius: var(--radius-md); }

body.admin-panel .ie-muted { color: var(--color-text-secondary); }

/* Tarjetas */
body.admin-panel .ie-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 1.25rem; margin-bottom: 1.25rem;
}
body.admin-panel .ie-card > h2, body.admin-panel .ie-card > h3 {
  font-size: 1rem; font-weight: 700; margin: 0 0 1rem; color: var(--color-text);
  display: flex; align-items: center; gap: .5rem;
}
body.admin-panel .ie-card-sub { font-size: .8125rem; color: var(--color-text-secondary); margin: -.5rem 0 1rem; }

/* Áreas diferenciadas: catálogo vs. mercado */
body.admin-panel .ie-area { border-top: 4px solid var(--ie-teal); }
body.admin-panel .ie-area-mercado { border-top-color: #4338ca; }
body.admin-panel .ie-area-gestion { border-top-color: var(--ie-terracota); }
body.admin-panel .ie-area-etiqueta {
  font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ie-teal);
}
body.admin-panel .ie-area-mercado .ie-area-etiqueta { color: #4338ca; }
body.admin-panel .ie-area-gestion .ie-area-etiqueta { color: var(--ie-terracota); }

/* KPIs */
body.admin-panel .ie-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
body.admin-panel .ie-kpi {
  display: block; padding: .875rem 1rem; border-radius: var(--radius-md);
  background: var(--color-surface-muted); border: 1px solid var(--color-border);
  color: var(--color-text); text-decoration: none;
}
body.admin-panel a.ie-kpi:hover, body.admin-panel a.ie-kpi:focus-visible { border-color: var(--ie-teal); text-decoration: none; color: var(--color-text); }
body.admin-panel .ie-kpi-valor { font-size: 1.625rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
body.admin-panel .ie-kpi-etiqueta { font-size: .8125rem; color: var(--color-text-secondary); }

/* Badges */
body.admin-panel .ie-badge {
  display: inline-block; padding: .15rem .55rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; line-height: 1.4; white-space: nowrap;
  border: 1px solid transparent;
}
body.admin-panel .ie-badge-ok { background: #dcfce7; color: #14532d; }
body.admin-panel .ie-badge-aviso { background: #fef3c7; color: #713f12; }
body.admin-panel .ie-badge-error { background: #fee2e2; color: #7f1d1d; }
body.admin-panel .ie-badge-info { background: #e0f2fe; color: #0c4a6e; }
body.admin-panel .ie-badge-neutro { background: #f1f5f9; color: #334155; border-color: #e2e8f0; }
body.admin-panel .ie-badge-apagado { background: #f8fafc; color: #64748b; border-color: #e2e8f0; }
body.admin-panel .ie-badge-prueba { background: #ede9fe; color: #4c1d95; }

/* Tablas */
body.admin-panel .ie-tabla-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.admin-panel .ie-tabla { width: 100%; border-collapse: collapse; font-size: .875rem; }
body.admin-panel .ie-tabla th {
  text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-text-secondary); background: var(--color-surface-muted);
  padding: .6rem .75rem; border-bottom: 1px solid var(--color-border); white-space: nowrap;
}
body.admin-panel .ie-tabla td { padding: .65rem .75rem; border-bottom: 1px solid var(--color-border); vertical-align: top; }
body.admin-panel .ie-tabla tr:hover td { background: #fafcfd; }
body.admin-panel .ie-tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.admin-panel .ie-tabla .acciones { white-space: nowrap; text-align: right; }
body.admin-panel .ie-tabla .acciones form { margin-left: .25rem; }

/* Filtros */
body.admin-panel .ie-filtros { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin-bottom: 1rem; }
body.admin-panel .ie-filtros .campo { display: flex; flex-direction: column; min-width: 140px; flex: 1 1 140px; max-width: 240px; }
body.admin-panel .ie-filtros label { font-size: .75rem; font-weight: 600; color: var(--color-text-secondary); margin-bottom: .2rem; }

/* Formularios */
body.admin-panel .ie-form label { font-weight: 600; font-size: .875rem; margin-bottom: .3rem; }
body.admin-panel .ie-form .form-text { font-size: .775rem; }
body.admin-panel .ie-form .req::after { content: " *"; color: var(--ie-error); }
body.admin-panel .ie-form fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; }
body.admin-panel .ie-form legend { font-size: 1rem; font-weight: 700; margin-bottom: .75rem; }
body.admin-panel .ie-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .35rem .75rem; }
body.admin-panel .ie-checks label { font-weight: 500; display: flex; gap: .4rem; align-items: center; margin: 0; }
body.admin-panel .ie-sticky-actions {
  position: sticky; bottom: 0; z-index: 5; background: rgba(255,255,255,.96);
  border-top: 1px solid var(--color-border); padding: .75rem 0; margin-top: 1rem;
  display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end;
}

body.admin-panel .btn-ie { background: var(--ie-teal); border-color: var(--ie-teal); color: #fff; }
body.admin-panel .btn-ie:hover, body.admin-panel .btn-ie:focus { background: var(--ie-teal-700); border-color: var(--ie-teal-700); color: #fff; }

/* Mapa de selección */
body.admin-panel .ie-mapa-picker { height: 320px; border-radius: var(--radius-md); border: 1px solid var(--color-border); }

/* Galería */
body.admin-panel .ie-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; }
body.admin-panel .ie-galeria figure { margin: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: #fff; }
body.admin-panel .ie-galeria img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
body.admin-panel .ie-galeria figcaption { padding: .5rem; font-size: .8rem; display: flex; flex-direction: column; gap: .35rem; }
body.admin-panel .ie-galeria .portada { outline: 3px solid var(--ie-teal); outline-offset: -3px; }

/* Asistente de importación */
body.admin-panel .ie-pasos { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; padding: 0; margin: 0 0 1.25rem; counter-reset: paso; }
body.admin-panel .ie-pasos li {
  counter-increment: paso; display: flex; align-items: center; gap: .4rem;
  font-size: .8rem; padding: .35rem .7rem; border-radius: 999px;
  background: #f1f5f9; color: #475569;
}
body.admin-panel .ie-pasos li::before {
  content: counter(paso); display: inline-flex; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  align-items: center; justify-content: center; background: #cbd5e1; color: #1e293b; font-size: .7rem; font-weight: 700;
}
body.admin-panel .ie-pasos li.hecho { background: #dcfce7; color: #14532d; }
body.admin-panel .ie-pasos li.hecho::before { background: var(--ie-ok); color: #fff; content: "✓"; }
body.admin-panel .ie-pasos li.actual { background: var(--ie-teal); color: #fff; font-weight: 600; }
body.admin-panel .ie-pasos li.actual::before { background: #fff; color: var(--ie-teal); }

body.admin-panel .ie-progreso { height: 12px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
body.admin-panel .ie-progreso > span { display: block; height: 100%; background: var(--ie-teal); width: 0; transition: width .3s ease; }

body.admin-panel .ie-codigo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; background: #f1f5f9; padding: .05rem .35rem; border-radius: 4px; }
body.admin-panel .ie-pre { white-space: pre-wrap; word-break: break-word; font-size: .8125rem; background: #f8fafc; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: .75rem; max-height: 280px; overflow: auto; }

body.admin-panel .ie-vacio { text-align: center; padding: 2.5rem 1rem; color: var(--color-text-secondary); }
body.admin-panel .ie-vacio i { font-size: 2rem; margin-bottom: .5rem; opacity: .6; }

body.admin-panel .ie-dl { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: .35rem 1rem; font-size: .875rem; margin: 0; }
body.admin-panel .ie-dl dt { color: var(--color-text-secondary); font-weight: 500; }
body.admin-panel .ie-dl dd { margin: 0; }

body.admin-panel .ie-comparar { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
body.admin-panel .ie-comparar > div { background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: .75rem; }

body.admin-panel .ie-insuficiente { color: var(--color-text-secondary); font-style: italic; }

body.admin-panel .ie-tabs { border-bottom: 1px solid var(--color-border); margin-bottom: 1rem; display: flex; flex-wrap: wrap; gap: .25rem; }
body.admin-panel .ie-tabs a { padding: .5rem .9rem; border-radius: var(--radius-sm) var(--radius-sm) 0 0; color: var(--color-text-secondary); font-weight: 600; font-size: .875rem; text-decoration: none; border-bottom: 3px solid transparent; }
body.admin-panel .ie-tabs a[aria-current="page"] { color: var(--ie-teal); border-bottom-color: var(--ie-teal); }

@media (max-width: 767.98px) {
  body.admin-panel .ie-comparar { grid-template-columns: 1fr; }
  body.admin-panel .ie-filtros .campo { max-width: none; }
  body.admin-panel .ie-dl { grid-template-columns: 1fr; }
  body.admin-panel .ie-dl dt { margin-top: .4rem; }
}