/* Revisor · AI Operator
   Sistema visual de AI Operator (~/AGENTES/Agente-Montaje ads/src/app/globals.css):
   fondo casi negro, tarjetas planas con borde fino, texto hielo, titulares finos en
   Plus Jakarta Sans, rotulos en Geist Mono, Michroma solo en el logo, y UN toque de
   color por pantalla: el degradado verde de marca en el titular. El verde (#3ddc84)
   queda para estados buenos; ambar y rojo para riesgo. */

:root {
  --af-bg: #0b0b0d;
  --af-surface: #111114;
  --af-elevated: #141418;
  --af-card: linear-gradient(180deg, #131316 0%, #101013 100%);
  --af-sunken: rgba(216, 234, 255, 0.018);
  --af-raise: rgba(216, 234, 255, 0.025);
  --af-hover: rgba(216, 234, 255, 0.05);
  --af-field: rgba(216, 234, 255, 0.03);
  --af-field-border: rgba(216, 234, 255, 0.1);
  --af-tint: rgba(216, 234, 255, 0.06);
  --af-tint-border: rgba(216, 234, 255, 0.12);
  --af-seg-active: rgba(216, 234, 255, 0.08);
  --af-line: rgba(216, 234, 255, 0.07);
  --af-line-strong: rgba(216, 234, 255, 0.12);
  --af-line-soft: rgba(216, 234, 255, 0.045);
  --af-accent-line: rgba(216, 234, 255, 0.22);
  --af-bar: rgba(11, 11, 13, 0.8);

  --af-title: #e3ecf8;
  --af-strong: #f5f8fd;
  --af-text-hi: #b8c1ce;
  --af-text: #929baa;
  --af-eyebrow: #858e9c;
  --af-faint: #7a8391;
  --af-on-fill: #f5f8fd;

  --marca-metal-a: #6a6f78;
  --marca-metal-b: #3a3e46;
  --marca-metal-c: #24272d;

  --positive: #3ddc84;
  --positive-rgb: 61, 220, 132;
  --warning: #ffb020;
  --warning-rgb: 255, 176, 32;
  --destructive: oklch(0.66 0.19 25);
  --destructive-soft: rgba(229, 72, 77, 0.1);

  --af-grad-title: linear-gradient(100deg, #b9f7d4 0%, #3ddc84 25%, #16b894 50%, #3ddc84 75%, #b9f7d4 100%);
  --af-grad-edge: linear-gradient(110deg, #3ddc84 0%, rgba(22, 184, 148, 0.7) 45%, rgba(216, 234, 255, 0.22) 100%);
  --af-fill: linear-gradient(110deg, #0f1813 0%, #0c0e0d 65%, #0d0f10 100%);
  --af-fill-hover: linear-gradient(110deg, #13201a 0%, #0e1210 65%, #0f1214 100%);
  --af-shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.035);

  --radio: 14px;
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --logo: "Michroma", var(--font);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--af-bg); color: var(--af-text); font: 400 15px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(var(--positive-rgb), 0.25); color: var(--af-strong); }

/* ── Tipografía ─────────────────────────────────────────────────────────── */
h1, h2, h3 { color: var(--af-title); font-weight: 400; margin: 0; }
h1 { font-size: 30px; letter-spacing: -0.02em; line-height: 1.15; }
h2 { font-size: 18px; letter-spacing: -0.01em; margin-bottom: 12px; }
h3 { font: 500 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--af-eyebrow); margin: 18px 0 8px; }
.titular { font-size: clamp(26px, 4.4vw, 40px); letter-spacing: -0.03em; line-height: 1.08; margin: 6px 0 10px; }
.grad { background: var(--af-grad-title); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.kicker { font: 500 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--af-eyebrow); margin-bottom: 10px; }
.bajada { color: var(--af-text); font-size: 16px; max-width: 640px; margin: 0 0 22px; }
.suave { color: var(--af-faint); }
.error { color: var(--destructive); font-weight: 500; }
label { display: block; font: 500 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--af-eyebrow); margin: 16px 0 6px; }

/* ── Campos ─────────────────────────────────────────────────────────────── */
input, select, textarea {
  width: 100%; padding: 11px 13px; font: inherit; color: var(--af-strong);
  background: var(--af-field); border: 1px solid var(--af-field-border); border-radius: 10px; outline: none;
}
input::placeholder, textarea::placeholder { color: var(--af-faint); }
input:focus, select:focus, textarea:focus { border-color: var(--af-accent-line); background: var(--af-raise); }
select option { background: var(--af-surface); color: var(--af-strong); }
textarea { resize: vertical; }
:focus-visible { outline: 2px solid rgba(var(--positive-rgb), 0.6); outline-offset: 2px; }

/* ── Botones ────────────────────────────────────────────────────────────── */
button { font: inherit; cursor: pointer; border: 0; border-radius: 10px; color: inherit; }
button:disabled { opacity: 0.5; cursor: default; }
.primario {
  color: var(--af-on-fill); font-weight: 500; padding: 11px 20px;
  border: 1px solid transparent;
  background: var(--af-fill) padding-box, var(--af-grad-edge) border-box;
}
.primario:hover:not(:disabled) { background: var(--af-fill-hover) padding-box, var(--af-grad-edge) border-box; }
.primario.grande { width: 100%; padding: 15px; margin-top: 22px; font-size: 16px; }
.secundario { background: var(--af-field); border: 1px solid var(--af-field-border); color: var(--af-text-hi); padding: 10px 16px; font-weight: 500; }
.secundario:hover:not(:disabled) { background: var(--af-hover); color: var(--af-strong); }
.copiar { background: var(--af-field); border: 1px solid var(--af-field-border); color: var(--af-text-hi); padding: 4px 10px; font: 500 11px var(--mono); flex-shrink: 0; }
.copiar:hover { color: var(--af-strong); }

/* ── Estructura ─────────────────────────────────────────────────────────── */
.barra {
  display: flex; align-items: center; gap: 22px; padding: 14px 24px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 5; background: var(--af-bar); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--af-line);
}
.marca { display: inline-flex; align-items: center; gap: 10px; }
.emblema { width: 32px; height: 28px; filter: drop-shadow(0 0 6px rgba(var(--positive-rgb), 0.28)); }
.logotipo { font-family: var(--logo); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--af-strong); }
.logotipo .ai { color: var(--positive); }
.producto { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--af-eyebrow); padding: 3px 8px; border: 1px solid var(--af-line-strong); border-radius: 99px; }
.pestanas { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.pestanas button { background: none; padding: 8px 14px; color: var(--af-text); font-weight: 500; }
.pestanas button:hover { color: var(--af-strong); background: var(--af-hover); }
.pestanas button.activa { color: var(--af-strong); background: var(--af-tint); box-shadow: inset 0 0 0 1px var(--af-tint-border); }
main { max-width: 1060px; margin: 0 auto; padding: 40px 20px 60px; }
.pie-marca { text-align: center; padding: 20px 0 36px; opacity: 0.5; }
.pie-marca .logotipo { font-size: 10px; }
.tarjeta { background: var(--af-card); border: 1px solid var(--af-line); border-radius: var(--radio); padding: 22px; margin-bottom: 16px; box-shadow: var(--af-shadow-card); }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .fila { grid-template-columns: 1fr; } main { padding-top: 28px; } .barra { gap: 12px; padding: 12px 16px; } }

/* ── Analizar ───────────────────────────────────────────────────────────── */
.segmentado { display: inline-flex; background: var(--af-sunken); border: 1px solid var(--af-line); border-radius: 12px; padding: 3px; margin-bottom: 16px; }
.segmentado button { background: none; padding: 7px 20px; font-weight: 500; color: var(--af-text); }
.segmentado button.activo { background: var(--af-seg-active); color: var(--af-strong); }
.soltar {
  display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; text-align: center;
  border: 1px dashed var(--af-accent-line); border-radius: var(--radio); padding: 34px 16px; cursor: pointer;
  color: var(--af-text-hi); background: var(--af-sunken); text-transform: none; letter-spacing: 0; font: 500 15px var(--font); margin: 0;
}
.soltar u { color: var(--positive); text-decoration-color: rgba(var(--positive-rgb), 0.4); }
.soltar .suave { font-size: 13px; font-weight: 400; }
.soltar.encima { border-color: var(--positive); background: rgba(var(--positive-rgb), 0.05); }
#vista-previa { width: 100%; max-height: 380px; margin-top: 14px; border-radius: 12px; background: #000; border: 1px solid var(--af-line); }
details { margin-top: 16px; }
summary { cursor: pointer; font-size: 14px; font-weight: 500; color: var(--af-text-hi); }
summary:hover { color: var(--af-strong); }
.progreso { margin: 18px 0 0; padding-left: 20px; color: var(--af-faint); }
.progreso li { padding: 2px 0; }
.progreso li.hecho { color: var(--positive); }
.progreso li.actual { color: var(--af-strong); font-weight: 500; }

/* ── Resultado ──────────────────────────────────────────────────────────── */
.veredicto { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
.medidor { width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center; text-align: center; border: 1px solid; }
.medidor .num { font-size: 36px; line-height: 1; font-weight: 300; letter-spacing: -0.03em; }
.medidor .eti { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 6px; opacity: 0.85; }
.riesgo-alto { background: var(--destructive-soft); border-color: rgba(229, 72, 77, 0.35); color: var(--destructive); }
.riesgo-medio { background: rgba(var(--warning-rgb), 0.08); border-color: rgba(var(--warning-rgb), 0.35); color: var(--warning); }
.riesgo-bajo { background: rgba(var(--positive-rgb), 0.08); border-color: rgba(var(--positive-rgb), 0.35); color: var(--positive); }
.veredicto p { font-size: 17px; color: var(--af-title); margin: 8px 0 0; line-height: 1.5; }
@media (max-width: 560px) { .veredicto { grid-template-columns: 1fr; justify-items: start; } }
.fases { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.fase { border-radius: 12px; padding: 14px; border: 1px solid var(--af-line); background: var(--af-sunken); }
.fase .nombre { color: var(--af-title); font-weight: 500; font-size: 14px; }
.fase .estado { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: 0.12em; margin: 4px 0 8px; }
.fase p { margin: 0; font-size: 13px; color: var(--af-text); }
.fase.pasa { border-color: rgba(var(--positive-rgb), 0.3); } .fase.pasa .estado { color: var(--positive); }
.fase.dudoso { border-color: rgba(var(--warning-rgb), 0.3); } .fase.dudoso .estado { color: var(--warning); }
.fase.rechazaria { border-color: rgba(229, 72, 77, 0.35); background: var(--destructive-soft); } .fase.rechazaria .estado { color: var(--destructive); }
.fase.sin-datos .estado { color: var(--af-faint); }
.item { border-left: 2px solid var(--af-line-strong); padding: 11px 15px; margin: 10px 0; background: var(--af-sunken); border-radius: 0 10px 10px 0; }
.item.quitar { border-color: var(--destructive); }
.item.cambiar { border-color: var(--warning); }
.item.mantener { border-color: var(--positive); }
.item .frase { color: var(--af-title); font-weight: 500; }
.item .momento { font: 500 11px var(--mono); color: var(--af-eyebrow); margin-right: 8px; }
.item .propuesta { margin-top: 8px; color: var(--af-text-hi); }
.item .propuesta b { color: var(--positive); font-weight: 500; }
.item .motivo { font-size: 13px; color: var(--af-text); margin-top: 5px; }
.alternativa { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; background: var(--af-sunken); border: 1px solid var(--af-line); border-radius: 10px; padding: 11px 13px; margin: 6px 0; color: var(--af-title); }
.transcripcion { font-size: 14px; max-height: 360px; overflow: auto; color: var(--af-text-hi); }
.transcripcion div { padding: 3px 0; } .transcripcion span { font: 500 11px var(--mono); color: var(--af-eyebrow); margin-right: 10px; }
.pie { font-size: 12px; color: var(--af-faint); }
.tarjeta p b { color: var(--af-title); font-weight: 500; }

/* ── Tablero ────────────────────────────────────────────────────────────── */
.tablero-cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.filtros { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; padding: 16px 18px; }
.filtros label { margin-top: 0; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px; margin-bottom: 16px; }
.kpi { background: var(--af-card); border: 1px solid var(--af-line); border-radius: var(--radio); padding: 16px 18px; }
.kpi .v { font-size: 30px; font-weight: 300; letter-spacing: -0.03em; color: var(--af-strong); }
.kpi .e { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--af-eyebrow); margin-top: 2px; }
.kpi.verde .v { color: var(--positive); } .kpi.rojo .v { color: var(--destructive); } .kpi.ambar .v { color: var(--warning); }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .dos-columnas { grid-template-columns: 1fr; } }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--af-eyebrow); padding: 8px; border-bottom: 1px solid var(--af-line); }
td { padding: 10px 8px; border-bottom: 1px solid var(--af-line-soft); vertical-align: top; color: var(--af-text-hi); }
td b { color: var(--af-title); font-weight: 500; }
td.n { text-align: right; font-variant-numeric: tabular-nums; }
tr:hover td { background: var(--af-raise); }
.barra-tasa { height: 4px; background: rgba(229, 72, 77, 0.25); border-radius: 2px; overflow: hidden; margin-top: 6px; min-width: 80px; }
.barra-tasa > div { height: 100%; background: var(--positive); }
.pastilla { display: inline-block; font: 500 10px/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 9px; border-radius: 99px; border: 1px solid; white-space: nowrap; }
.p-aprobado { color: var(--positive); border-color: rgba(var(--positive-rgb), 0.35); background: rgba(var(--positive-rgb), 0.07); }
.p-rechazado { color: var(--destructive); border-color: rgba(229, 72, 77, 0.35); background: var(--destructive-soft); }
.p-revision { color: var(--warning); border-color: rgba(var(--warning-rgb), 0.35); background: rgba(var(--warning-rgb), 0.07); }
.p-problemas, .p-borrado, .p-otro { color: var(--af-eyebrow); border-color: var(--af-line-strong); background: var(--af-sunken); }
.tabla-cabeza { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tabla-cabeza .kicker { margin: 0; }
.tabla-cabeza input { max-width: 300px; }
.desplazable { overflow-x: auto; }
.mas { margin-top: 10px; }
.historial-fila { display: flex; justify-content: space-between; gap: 12px; padding: 14px 6px; border-bottom: 1px solid var(--af-line-soft); cursor: pointer; border-radius: 8px; }
.historial-fila:hover { background: var(--af-raise); }
.historial-fila b { color: var(--af-title); font-weight: 500; }
.texto-largo { white-space: pre-wrap; font-size: 14px; color: var(--af-text-hi); }
.caso { padding: 12px 0; border-bottom: 1px solid var(--af-line-soft); font-size: 14px; }
.caso b { color: var(--af-title); font-weight: 500; }

@media (prefers-reduced-motion: no-preference) {
  .grad { animation: brillo 9s linear infinite; }
  @keyframes brillo { to { background-position: 200% 0; } }
}

/* ─── Producto general: identificación, marcar resultado, rankings ─── */
.identificacion { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 10px; }
.identificacion span { display: block; font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--af-eyebrow); }
.identificacion b { color: var(--af-title); font-weight: 500; font-size: 14px; }
.botones-marcar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.opcion { background: var(--af-field); border: 1px solid var(--af-field-border); color: var(--af-text-hi); border-radius: 999px; padding: 9px 16px; font: inherit; font-size: 14px; cursor: pointer; }
.opcion:hover { background: var(--af-hover); }
.opcion.elegida.aprobado { border-color: var(--positive); color: var(--positive); }
.opcion.elegida.rechazado { border-color: var(--destructive); color: var(--destructive); }
.opcion.elegida.no_subido { border-color: var(--af-accent-line); color: var(--af-title); }
.kpi .sub { font-size: 11px; color: var(--af-faint); margin-top: 4px; }
.rank { margin: 10px 0; }
.rank-fila { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--af-text-hi); }
.rank-fila b { color: var(--af-title); font-weight: 500; }
.rank-barra { height: 4px; background: var(--af-line); border-radius: 4px; margin-top: 5px; overflow: hidden; }
.rank-barra div { height: 100%; background: var(--af-grad-edge); }
.historial-fila .derecha { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 600px) { .historial-fila { flex-direction: column; } .historial-fila .derecha { justify-content: flex-start; } }