/* =============================================================================
   Visible — custom.css (sitio público)
   -----------------------------------------------------------------------------
   El sitio público usa EXCLUSIVAMENTE Bootstrap 5.3 + este archivo.
   No cargar vendor.min.css / app.css del kit del panel en el layout público.

   Cómo se usa:
   - Se sobrescriben las variables --bs-* de Bootstrap (sin Sass) y se agregan los
     componentes propios de la marca con el prefijo .visible-
   - Cargar DESPUÉS de bootstrap.min.css:
       <link href="{{ asset('assets/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
       <link href="{{ asset('assets/css/custom.css') }}" rel="stylesheet">

   Valores de marca tomados del sitio actual (visible.lgbt, oct 2026):
   rojo #C62746, gris #646569, texto #1D1D1D, fondo #F0F0F0, Montserrat y barra
   de 6 colores (barra.png) medidos píxel a píxel.

   Recursos: Bootstrap, Chart.js y Leaflet son locales (sin CDN). La única petición a
   un tercero por tipografía es Montserrat desde Google Fonts (decisión D27).
   ============================================================================= */

/* ---- Tipografía: Montserrat se carga desde Google Fonts en el layout público (antes de este archivo):
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet"> ---- */

/* ---- Tokens de marca ---- */
:root {
  --visible-red: #C62746;
  --visible-red-dark: #A81F3A;       /* hover/active (derivado, -15 % de luminosidad) */
  --visible-red-rgb: 198, 39, 70;
  --visible-gray: #646569;
  --visible-gray-dark: #4F5054;      /* hover (derivado) */
  --visible-gray-rgb: 100, 101, 105;
  --visible-ink: #1D1D1D;
  --visible-paper: #F0F0F0;
  --visible-white: #FFFFFF;
  --visible-line: #CECECE;

  /* Barra arcoíris: seis colores (orden de izquierda a derecha) */
  --visible-rainbow-1: #C62746;
  --visible-rainbow-2: #FFC500;
  --visible-rainbow-3: #FFF28C;
  --visible-rainbow-4: #9FE47A;
  --visible-rainbow-5: #00A6DC;
  --visible-rainbow-6: #985BC4;

  /* Colores de las gráficas (uno por indicador, igual que el sitio actual) */
  --visible-chart-age: #F5BC00;
  --visible-chart-identity: #EACF00;
  --visible-chart-orientation: #A6DF86;
  --visible-chart-aggressor: #00A4DA;
  --visible-chart-place: #985BC4;
  --visible-chart-aggression: #C62746;
  --visible-chart-frequency: #C62746;
  --visible-map-pin: #C62746;

  --visible-radius-card: 8px;
  --visible-radius-pill: 27px;
  --visible-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ---- Bootstrap 5.3: variables globales ---- */
  --bs-font-sans-serif: var(--visible-font);
  --bs-body-font-family: var(--visible-font);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.5;
  --bs-body-color: var(--visible-ink);
  --bs-body-color-rgb: 29, 29, 29;
  --bs-body-bg: var(--visible-paper);
  --bs-body-bg-rgb: 240, 240, 240;
  --bs-emphasis-color: var(--visible-ink);
  --bs-secondary-color: var(--visible-gray);
  --bs-secondary-color-rgb: var(--visible-gray-rgb);
  --bs-heading-color: var(--visible-ink);
  --bs-primary: var(--visible-red);
  --bs-primary-rgb: var(--visible-red-rgb);
  --bs-secondary: var(--visible-gray);
  --bs-secondary-rgb: var(--visible-gray-rgb);
  --bs-link-color: var(--visible-red);
  --bs-link-color-rgb: var(--visible-red-rgb);
  --bs-link-hover-color: var(--visible-red-dark);
  --bs-link-hover-color-rgb: 168, 31, 58;
  --bs-border-color: var(--visible-line);
  --bs-border-radius: .5rem;
  --bs-border-radius-lg: var(--visible-radius-card);
  --bs-border-radius-pill: var(--visible-radius-pill);
  --bs-focus-ring-color: rgba(var(--visible-red-rgb), .25);
}

body { font-family: var(--visible-font); }

/* ---- Títulos y texto ---- */
h1, h2, h3, h4, h5, h6 { font-family: var(--visible-font); }
h2, .h2 { font-size: 1.875rem; line-height: 1.2; font-weight: 500; }            /* 30 / 36 */
h3, .h3 { font-size: 2.1875rem; line-height: 1.2; font-weight: 700; color: var(--visible-red); } /* 35 / 42 */
.visible-lead { font-size: 1.375rem; line-height: 1.55; color: var(--visible-gray); }            /* 22 / 34 */
label, .form-label { font-weight: 500; }
@media (max-width: 767.98px) {
  h2, .h2 { font-size: 1.5rem; }
  h3, .h3 { font-size: 1.75rem; }
  .visible-lead { font-size: 1.125rem; line-height: 1.5; }
}

/* ---- Botones (Bootstrap .btn con variables propias) ---- */
.btn { --bs-btn-font-family: var(--visible-font); --bs-btn-font-size: .875rem; --bs-btn-font-weight: 700;
       --bs-btn-border-radius: var(--visible-radius-pill); --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: .375rem; }
.btn-primary { --bs-btn-bg: var(--visible-red); --bs-btn-border-color: var(--visible-red); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--visible-red-dark); --bs-btn-hover-border-color: var(--visible-red-dark); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--visible-red-dark); --bs-btn-active-border-color: var(--visible-red-dark);
  --bs-btn-disabled-bg: var(--visible-red); --bs-btn-disabled-border-color: var(--visible-red);
  --bs-btn-focus-shadow-rgb: var(--visible-red-rgb); }
.btn-secondary { --bs-btn-bg: var(--visible-gray); --bs-btn-border-color: var(--visible-gray); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--visible-gray-dark); --bs-btn-hover-border-color: var(--visible-gray-dark); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--visible-gray-dark); --bs-btn-active-border-color: var(--visible-gray-dark);
  --bs-btn-disabled-bg: #C3C4C7; --bs-btn-disabled-border-color: #C3C4C7; --bs-btn-disabled-color: #fff;
  --bs-btn-focus-shadow-rgb: var(--visible-gray-rgb); }
.btn-outline-primary { --bs-btn-color: var(--visible-red); --bs-btn-border-color: var(--visible-red);
  --bs-btn-hover-bg: var(--visible-red); --bs-btn-hover-border-color: var(--visible-red); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--visible-red-dark); --bs-btn-active-border-color: var(--visible-red-dark); }
/* Botón de WhatsApp de las organizaciones */
.btn-whatsapp { --bs-btn-bg: #25D366; --bs-btn-border-color: #25D366; --bs-btn-color: #fff;
  --bs-btn-hover-bg: #1EB458; --bs-btn-hover-border-color: #1EB458; --bs-btn-hover-color: #fff; }

/* ---- Encabezado y navegación ---- */
.visible-header { background-color: var(--visible-red); color: #fff; }
.visible-header .navbar-brand img { height: 40px; width: auto; }
.visible-nav { background-color: var(--visible-gray); }            /* barra secundaria gris */
.visible-nav .nav-link { color: #fff; font-weight: 600; font-size: .875rem; padding: .75rem 1rem; }
.visible-nav .nav-link:hover, .visible-nav .nav-link.active { color: #fff; background-color: rgba(255,255,255,.12); }
.visible-footer { color: var(--visible-gray); font-size: .875rem; }
/* Selector "Visible por Estado" (barra y home): menú blanco con los estados en rojo y negritas, como el sitio actual */
.visible-states__menu { max-height: 70vh; overflow-y: auto; padding: .5rem 0; border: 1px solid var(--visible-line);
  border-radius: 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
.visible-states__menu .dropdown-item { color: var(--visible-red); font-weight: 700; font-size: .9375rem; padding: .4rem 1rem; }
.visible-states__menu .dropdown-item:hover, .visible-states__menu .dropdown-item:focus { background-color: rgba(var(--visible-red-rgb), .08); color: var(--visible-red-dark); }
.visible-hero-actions .btn-link { --bs-btn-font-size: 1rem; --bs-btn-color: var(--visible-red); --bs-btn-hover-color: var(--visible-red-dark); }
.visible-nav .visible-states .nav-link { color: #fff; }
/* Bootstrap compila el elemento activo del dropdown en azul; se usa el rojo de marca (D29) */
.dropdown-menu { --bs-dropdown-link-active-bg: var(--visible-red); --bs-dropdown-link-active-color: #fff; --bs-dropdown-font-size: .875rem; }

/* ---- Portada de la home (sitio actual): mitad roja con mensaje y acciones, foto a la derecha ---- */
.visible-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; background: var(--visible-red); }
.visible-hero__panel { display: flex; flex-direction: column; background: var(--visible-red); color: #fff; padding: 1.5rem 2.75rem 2.75rem; }
.visible-hero__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.visible-hero__logo { color: #fff; font-weight: 700; font-size: 1.75rem; text-decoration: none; line-height: 1; }
.visible-hero__logo:hover { color: #fff; }
.visible-hero__logo img { height: 64px; width: auto; }
.visible-hero__social a { display: block; color: var(--visible-red); }
.visible-hero__social a:hover svg rect { fill: rgba(255, 255, 255, .85); }
.visible-hero__body { margin-top: 4.5rem; }
.visible-hero__title { color: #fff; font-size: clamp(1.375rem, 2.1vw, 1.875rem); line-height: 1.45; font-weight: 700;
  text-transform: uppercase; letter-spacing: .01em; margin-bottom: 1.75rem; max-width: 36rem; }
.visible-hero__hashtag { margin-bottom: 0; }
.visible-hero__actions { margin-top: auto; padding-top: 3rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.25rem; }
.visible-hero__report { --bs-btn-color: var(--visible-red); --bs-btn-hover-color: var(--visible-red-dark); --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff; --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #fff; --bs-btn-active-bg: #f3f3f3;
  display: inline-flex; align-items: center; gap: 1.5rem; padding: .375rem 2rem; font-size: .9375rem; }
.visible-hero__link { color: #fff; font-weight: 700; font-size: .9375rem; text-decoration: none; }
.visible-hero__link:hover, .visible-hero__link:focus { color: #fff; text-decoration: underline; }
.visible-hero .dropdown-toggle::after { vertical-align: .15em; }
.visible-hero__media { background-color: #e9e9e9; background-size: cover; background-position: center; }
/* Sin foto todavía (P15): fondo claro con la barra arcoíris */
.visible-hero__media--empty { background-image: linear-gradient(to bottom,
    transparent 0 42%, var(--visible-rainbow-1) 42% 44.6%, var(--visible-rainbow-2) 44.6% 47.2%, var(--visible-rainbow-3) 47.2% 49.8%,
    var(--visible-rainbow-4) 49.8% 52.4%, var(--visible-rainbow-5) 52.4% 55%, var(--visible-rainbow-6) 55% 57.6%, transparent 57.6%); }
@media (min-width: 992px) and (max-width: 1299.98px) {
  .visible-hero__panel { padding-left: 2rem; padding-right: 2rem; }
  .visible-hero__actions { gap: 1rem 1.25rem; }
  .visible-hero__report { gap: 1rem; padding: .375rem 1.25rem; }
}
@media (max-width: 991.98px) {
  .visible-hero { grid-template-columns: 1fr; min-height: 0; }
  .visible-hero__panel { padding: 1.25rem 1.25rem 2rem; }
  .visible-hero__body { margin-top: 2.5rem; }
  .visible-hero__actions { padding-top: 1.5rem; gap: 1rem 1.5rem; }
  .visible-hero__media { min-height: 45vh; }
  .visible-hero__media--empty { min-height: 96px; }
}

/* ---- Barra arcoíris (reemplaza barra.png: 6 tramos iguales) ---- */
.visible-rainbow { height: 9px; width: 100%; max-width: 382px;
  background: linear-gradient(to right,
    var(--visible-rainbow-1) 0 16.66%, var(--visible-rainbow-2) 0 33.33%, var(--visible-rainbow-3) 0 50%,
    var(--visible-rainbow-4) 0 66.66%, var(--visible-rainbow-5) 0 83.33%, var(--visible-rainbow-6) 0 100%); }
.visible-rainbow--full { max-width: none; }

/* ---- Página del formulario de reporte: fondo rojo con foto + tarjeta blanca ---- */
.visible-report-page { min-height: 100vh; color: var(--visible-ink);
  background-color: var(--visible-red);
  background-image: linear-gradient(rgba(var(--visible-red-rgb), .9), rgba(var(--visible-red-rgb), .9)), url("../images/public/bg.png");
  background-size: cover; background-position: center; background-attachment: fixed; }
.visible-report-page .visible-report-brand { color: #fff; }
.visible-report-card { background: var(--visible-white); border-radius: var(--visible-radius-card);
  padding: 4rem 5.125rem; max-width: 609px; margin-inline: auto; }
@media (max-width: 767.98px) { .visible-report-card { padding: 2rem 1.25rem; } }
.visible-report-card--wide { max-width: 900px; padding: 3rem 4rem; }
@media (max-width: 767.98px) { .visible-report-card--wide { padding: 2rem 1.25rem; } }
.visible-org-card:last-child { border-bottom: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* Indicador de pasos 1–8 */
.visible-steps { display: flex; align-items: center; gap: .75rem; list-style: none; padding: 0; margin: 0 0 2rem; flex-wrap: wrap; }
.visible-step { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; color: var(--visible-gray); }
.visible-step__num { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--visible-gray);
  display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; background: #fff; }
.visible-step.is-active { color: var(--visible-red); }
.visible-step.is-active .visible-step__num { background: var(--visible-ink); border-color: var(--visible-ink); color: #fff; }
.visible-step.is-done .visible-step__num { background: var(--visible-gray); border-color: var(--visible-gray); color: #fff; }
.visible-step__label { display: none; }
.visible-step.is-active .visible-step__label { display: inline; }

/* Controles de formulario */
.form-control, .form-select { border-radius: .25rem; border-color: var(--visible-line); }
.form-control:focus, .form-select:focus { border-color: var(--visible-red); box-shadow: 0 0 0 .25rem rgba(var(--visible-red-rgb), .2); }
.form-check-input:checked { background-color: var(--visible-red); border-color: var(--visible-red); }
.form-check-input:focus { border-color: var(--visible-red); box-shadow: 0 0 0 .25rem rgba(var(--visible-red-rgb), .2); }
.visible-field-hint { color: var(--visible-gray); font-size: .875rem; }
.visible-required::after { content: " *"; color: var(--visible-red); }
.is-invalid ~ .invalid-feedback, .invalid-feedback { color: var(--visible-red); }

/* ---- Tarjetas generales, estadísticas y organizaciones ---- */
.card { --bs-card-border-radius: var(--visible-radius-card); --bs-card-border-color: transparent; --bs-card-bg: var(--visible-white); }
.visible-stat-title { color: var(--visible-red); font-weight: 700; }
.visible-chart { position: relative; min-height: 260px; }
.visible-chart canvas { max-width: 100%; }
.visible-org-card .visible-org-logo { max-height: 72px; width: auto; object-fit: contain; }
.visible-filter .form-select { min-width: 8rem; }
/* Mapa de conteos de la home (SVG del sitio actual) y lista de estados */
.visible-mexico-map path { stroke: #fff; stroke-width: .6; transition: opacity .15s; }
.visible-mexico-map a:hover path, .visible-mexico-map a:focus path { opacity: .75; }
.visible-mexico-map a:focus-visible { outline: none; }
.visible-mexico-map a:focus-visible path { stroke: var(--visible-ink); stroke-width: 1.5; }
.visible-map-list { columns: 2; column-gap: 1rem; font-size: .8125rem; }
@media (min-width: 992px) and (max-width: 1199.98px) { .visible-map-list { columns: 1; } }
.visible-map-bullet { display: flex; align-items: center; gap: .5rem; break-inside: avoid; margin-bottom: .375rem; }
.visible-map-bullet b { min-width: 2.75rem; padding: .125rem .375rem; border-radius: 4px; text-align: center; font-weight: 700; color: var(--visible-ink); }
.visible-map-bullet a { color: var(--visible-ink); }
.visible-map-bullet--lg { font-size: 1rem; margin-bottom: 0; }
.visible-map-bullet--lg b { min-width: 3.5rem; padding: .25rem .625rem; font-size: 1.25rem; color: #fff; }

/* Grupos de markercluster con el rojo de marca (sustituye el verde/amarillo/naranja por defecto) */
.visible-map .marker-cluster-small, .visible-map .marker-cluster-medium, .visible-map .marker-cluster-large { background-color: rgba(var(--visible-red-rgb), .35); }
.visible-map .marker-cluster-small div { background-color: rgba(var(--visible-red-rgb), .75); }
.visible-map .marker-cluster-medium div { background-color: rgba(var(--visible-red-rgb), .85); }
.visible-map .marker-cluster-large div { background-color: var(--visible-red-dark); }
.visible-map .marker-cluster div { color: #fff; font-family: var(--visible-font); font-weight: 700; }
.visible-map { height: 420px; border-radius: var(--visible-radius-card); overflow: hidden; background: #2C3338; } /* Leaflet, base oscura */

/* ---- Accesibilidad ---- */
a:focus-visible, .btn:focus-visible, .form-control:focus-visible { outline: 2px solid var(--visible-red); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }