/* Tipografías del admin v2 real. Se cargan aquí (no con <link> en el HTML) porque
   Cloudflare Fonts del dominio convierte ese <link> en un <style> en línea que la CSP
   bloquea. En producción se auto-hospedan y la CSP queda en 'self'. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Open+Sans:wght@600;700&display=swap");

/* PiN Admin · base: tokens, tipografía, botones y formularios.
   Tokens tomados del admin v2 real (Ofertas_PIN_Establecimientos_Admin: styles.css,
   global/styles/*.css, est.TB_Estatus) y de la página web (PIN-WebPage).
   Regla: ningún HTML usa style=""; la CSP lo bloquea. Valores dinámicos → --c / --w. */

:root {
  /* Marco del admin v2 */
  --negro: #1f1e1e;            /* fondo de página y contenido */
  --carbon: #2d2926;           /* sidebar, texto principal */
  --carbon-2: #3b3633;         /* hover y bordes sobre oscuro */
  --kpi-a: #72706e;            /* .card-gradient-black */
  --gris: #707070;             /* encabezado de tablas */
  --gris-claro: #eeeeee;
  --plata: #bebebe;
  --borde: #b0b0b0;            /* inputs */
  --linea: #e6e3e1;
  --texto: #2d2926;
  --texto-2: #6b6663;
  --texto-inv: #ffffff;
  --texto-inv-2: #b9b3af;
  --blanco: #ffffff;

  /* Marca */
  --rojo: #ee2737;
  --magenta: #890c59;
  --naranja-logo: #ff5f00;
  --grad: linear-gradient(90deg, #ee2737, #890c59);
  --grad-v: linear-gradient(180deg, #ee2737, #890c59);
  --grad-kpi: linear-gradient(135deg, #72706e, #2d2926);
  --grad-azul: linear-gradient(180deg, #6ba3db, #478ecd);    /* botón Buscar */
  --grad-verde: linear-gradient(180deg, #7eb85e, #5fa332);   /* Descargar Excel */

  /* Estatus (catálogo est.TB_Estatus) */
  --st-ok: #1dc228;
  --st-pendiente: #007dfc;
  --st-revision: #ffa502;
  --st-rechazo: #ff0000;
  --st-edicion: #880c58;
  --st-asignado: #e5c100;
  --st-inconcluso: #d038ff;
  --st-neutro: #8a8480;

  /* Forma */
  --r-card: 14px;
  --r-ctl: 10px;
  --r-pill: 999px;
  --sombra: 0 1px 2px rgba(0, 0, 0, .28), 0 8px 24px rgba(0, 0, 0, .18);
  --sombra-suave: 0 1px 3px rgba(45, 41, 38, .12);
  --fuente: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --fuente-2: "Open Sans", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* Medidas del marco */
  --alto-header: 60px;
  --ancho-side: 236px;
  --ancho-rail: 68px;
  --alto-tabbar: 64px;
  --hueco: 24px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; background: var(--negro); color: var(--texto-inv);
  font: 500 14px/1.45 var(--fuente); -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { line-height: 1.2; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgba(0, 125, 252, .75); outline-offset: 2px; }
::selection { background: rgba(238, 39, 55, .35); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--grad-v); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: -.01em; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--texto-2); }
.ico { flex: none; }

/* ---------- Botones (pastilla como los modales del admin v2) ---------- */
.btn {
  --alto: 38px;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  height: var(--alto); padding: 0 1.05rem; border: 0; border-radius: var(--r-pill);
  font-weight: 650; font-size: .86rem; text-decoration: none; white-space: nowrap;
  transition: filter .15s, background-color .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn-rojo { background: var(--grad); color: #fff; }
.btn-rojo:hover { filter: brightness(1.08); }
.btn-negro { background: var(--carbon); color: #fff; box-shadow: inset 0 0 0 1px #4a4441; }
.btn-negro:hover { background: #3d3835; }
.btn-blanco { background: #fff; color: var(--carbon); box-shadow: inset 0 0 0 1px var(--linea); }
.btn-blanco:hover { background: #f6f4f3; }
.btn-verde { background: var(--grad-verde); color: #fff; }
.btn-azul { background: var(--grad-azul); color: #fff; }
.btn-fantasma { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.btn-sm { --alto: 32px; padding: 0 .8rem; font-size: .8rem; }
.btn-bloque { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-icono {
  width: 38px; height: 38px; flex: none; display: inline-grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: inherit; position: relative;
}
.btn-icono:hover { background: rgba(255, 255, 255, .14); }
.tarjeta .btn-icono:hover, .cajon .btn-icono:hover { background: var(--gris-claro); }
.punto-aviso { position: absolute; top: 7px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: #ffb950; box-shadow: 0 0 0 2px var(--rojo); }

/* ---------- Formularios ---------- */
.campo { display: grid; gap: .3rem; min-width: 0; }
.campo > span { font: 700 .76rem/1.2 var(--fuente-2); color: var(--texto-2); }
.control {
  width: 100%; min-width: 0; height: 40px; padding: 0 .8rem; border: 1px solid var(--borde);
  border-radius: var(--r-ctl); background: #fff; color: var(--texto); font-weight: 500;
}
textarea.control { height: auto; min-height: 88px; padding: .6rem .8rem; resize: vertical; }
.control:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(137, 12, 89, .18); }
.control:invalid:not(:placeholder-shown) { border-color: #ff3b30; }
.campo small { font-size: .74rem; color: var(--texto-2); }
.buscador {
  display: flex; align-items: center; gap: .5rem; height: 40px; padding: 0 .85rem;
  border-radius: var(--r-pill); background: #f2f0ef; color: var(--texto-2); min-width: 0;
}
.buscador input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--texto); }
.buscador:focus-within { box-shadow: 0 0 0 2px var(--magenta); }

.interruptor { position: relative; width: 44px; height: 26px; flex: none; display: inline-block; }
.interruptor input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.interruptor i { position: absolute; inset: 0; border-radius: 99px; background: #cfcac7; transition: background .18s; }
.interruptor i::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .18s;
}
.interruptor input:checked + i { background: var(--st-ok); }
.interruptor input:checked + i::after { transform: translateX(18px); }
.interruptor input:focus-visible + i { outline: 3px solid rgba(0, 125, 252, .75); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}