/* ============================================================================
   Design experiments — variantes A/B para probar con el selector de pruebas
   [MOCK, capa dev reversible, branch 5-8-26-figma, 2026-08-06]
   Ver mecanismo completo: r33-system/.../design/mecanismo-selector-de-pruebas.md
   ============================================================================ */

/* ---------- Afordance del campo de búsqueda por nombre ---------- */
/* data-de-search vive en <html>, seteado por design-experiments.js.
   Ícono a la DERECHA (no la convención usual de buscadores) a pedido de Julián
   2026-08-06 — prioriza la coherencia visual con las flechas ▼ de los selects
   de la misma fila por sobre la convención global de lupa-a-la-izquierda. */
/* ALINEACIÓN 2026-08-12: Julián confirmó que la lupita es la variante que queda
   ("SEARCH = Icono" deja de ser experimento) y pidió alinearla mejor. Medido: la
   lupita tenía su centro a 17px del borde derecho del campo (position right 10px
   + 14px de ancho) mientras el chevron nativo de los <select> de la misma fila lo
   tiene a ~11.5px — o sea la lupita quedaba 5-6px más adentro y se leía
   desalineada respecto de la columna de flechas. Ahora: 13px de ancho a 5px del
   borde → centro a 11.5px, la misma línea vertical que los chevrons.
   El color pasa de #5A626C (gris suelto) a #6E7191, que es el color de texto que
   el propio campo ya usa — un ícono de afordancia no debería introducir un gris
   nuevo. */
html[data-de-search="icon"] #input-name,
html[data-de-search="icon"] #input-name-mobile {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7191' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 13px;
  padding-right: 26px;
}

/* ---------- Identidad visual de card sin imagen ---------- */
/* data-de-card vive en <html>: none | popup | border | fill */

/* Franja lateral con el color del TIPO de perfil (2026-08-12). El color ya no
   sale de un hash del nombre (inventado) sino de la etiqueta que la card ya
   lleva — ver design-experiments.js §TYPE_COLOR. Se dibuja con un ::before y no
   con `border-left-color` porque el híbrido necesita un DEGRADADO partido
   (mitad índigo / mitad violeta) y un borde no admite gradiente sin romper el
   border-radius. `--de-card-stripe` viene resuelto desde JS: color plano para
   media/creator, gradiente o mezcla para híbrido según la variante. */
html[data-de-card="border"] .card,
html[data-de-card="border2"] .card,
html[data-de-card="bordermix"] .card,
html[data-de-card="bordermix2"] .card {
  position: relative;
}
html[data-de-card="border"] .card::before,
html[data-de-card="border2"] .card::before,
html[data-de-card="bordermix"] .card::before,
html[data-de-card="bordermix2"] .card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--de-card-stripe, #DFE3E8);
  border-radius: 10px 0 0 10px;
  pointer-events: none;
}

html[data-de-card="fill"] .card {
  background: var(--de-card-color-tint, #fff);
  border-color: var(--de-card-color, #DFE3E8);
}

/* Popup de imagen al hover del título (variante 1) */
.de-hover-popup {
  position: fixed;
  z-index: 100000;
  width: 220px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .35);
  pointer-events: none;
  background: #fff;
  border: 1px solid #E3E6E9;
  display: none;
}
.de-hover-popup.is-visible { display: block; }
.de-hover-popup img { display: block; width: 100%; height: 140px; object-fit: cover; }
.de-hover-popup__fallback {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 28px/1 'Chivo', system-ui, sans-serif;
  color: #fff;
}

html[data-de-card="popup"] .card__title { cursor: pointer; }

/* ---------- Banner de cookies ---------- */
/* data-de-cookies vive en <html>: base (on-brand) | alt (genérico, para comparar) */
/* Clases reales del template propio del proyecto (oasis/templates/cookielaw/rejectable.html),
   NO las del paquete django-cookielaw por default (.btn-primary/.reject) — confirmar contra
   el template real antes de tocar esto si vuelve a romperse. */

/* BASE (2026-08-06, confirmado por Julián como dirección): reutiliza tokens ya auditados de
   identidad-visual.md en vez de inventar verde/naranja genéricos.
   Accept = #0E7C5A, el verde que la propia identidad visual ya exploró como on-brand (emparenta
   con el teal de marca #002F45, sin ser el verde bootstrap por defecto).
   Reject = #B54708, el MISMO ámbar que el sistema ya usa para "vencido / necesita atención"
   (--v-stale en identidad-visual.md) — reusa un token existente, semántica "prestá atención"
   en vez de un naranja decorativo sin relación con el resto de la paleta. Peso visual similar
   entre ambos botones a propósito (UX de cookies: reject no debe verse "castigado" vs accept). */
html[data-de-cookies="base"] #CookielawBanner .btn-accept {
  background-color: #0E7C5A !important;
  border-color: #0E7C5A !important;
}
html[data-de-cookies="base"] #CookielawBanner .btn-reject {
  background-color: #B54708 !important;
  border-color: #B54708 !important;
  color: #fff !important;
}

/* ALT: la paleta genérica previa (verde/naranja de manual de estilo neutro), para comparar. */
html[data-de-cookies="alt"] #CookielawBanner .btn-accept {
  background-color: #2E9E5B !important;
  border-color: #2E9E5B !important;
}
html[data-de-cookies="alt"] #CookielawBanner .btn-reject {
  background-color: #E08A2B !important;
  border-color: #E08A2B !important;
  color: #fff !important;
}

/* ---------- Panel del selector de pruebas ---------- */
/* En viewports chicos el panel tapaba el heading "Global Directory" y el botón
   de filtros (auditoría responsive 2026-08-12). Es dev-only, pero ensucia
   cualquier QA visual en mobile — se manda abajo a la izquierda ahí, donde no
   pisa contenido. */
/* 1023 y no 992: el layout "mobile" del core (search box oculto, heading +
   botón de filtros arriba) rige hasta 1023px (_homepage.scss, max-width:1023px).
   Con 992 quedaba una franja de 993-1023 donde el panel seguía arriba tapando el
   mapa. Cazado en el review adversarial 2026-08-12.
   `bottom: 120px` en vez de 12px: el banner de cookies es `position:fixed` abajo
   con z-index 1000, y el panel (z-index 100000) le pasaba por encima tapando el
   texto y el link de Privacy — justo el banner cuya paleta se acaba de decidir. */
@media (max-width: 1023px) {
  .de-panel {
    top: auto !important;
    bottom: 120px;
    right: auto !important;
    left: 12px;
    opacity: .92;
  }
}

.de-panel {
  position: fixed;
  top: 70px;
  right: 12px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font: 600 11px/1 monospace;
  color: #5A626C;
}
/* Botón mostrar/ocultar. Colapsado deja SOLO el botón: el panel no puede ser un
   obstáculo para mirar el sitio que viene a ayudar a evaluar. */
.de-panel__toggle {
  align-self: flex-end;
  border: 1px solid #E3E6E9;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  border-radius: 9999px;
  padding: 5px 12px;
  cursor: pointer;
  font: 600 10px/1 monospace;
  color: #5A626C;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .25);
}
.de-panel.is-collapsed .de-panel__row { display: none; }

.de-panel__row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  border: 1px solid #E3E6E9;
  border-radius: 9999px;
  padding: 6px 12px;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .25);
}
.de-panel__opt {
  border: 1.5px solid #DFE3E8;
  background: #fff;
  border-radius: 9999px;
  padding: 3px 9px;
  cursor: pointer;
  font: 600 10px/1 monospace;
  color: #5A626C;
}
.de-panel__opt[aria-pressed="true"] {
  background: #2563C9;
  border-color: #2563C9;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .de-hover-popup { transition: none; }
}
