/* ===============================
   SALTABARRANCA HOME (PRO)
   - Hero + Cards
   - Accordion estilo barra + tabla
   - Tabs + Sidebar + Panel (UI NUEVA)
   =============================== */

img { max-width: 100%; height: auto; }

/* ===== HERO ===== */
.sb-hero{ padding: 34px 0 18px; }
.sb-hero-inner{ max-width: 1180px; margin: 0 auto; padding: 0 18px; }
.sb-hero-title{ margin: 0; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; line-height: 1.15; }
.sb-hero-subtitle{ margin-top: 8px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; opacity: .85; }

.sb-law-grid{ margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
@media (max-width: 768px){ .sb-law-grid{ grid-template-columns: 1fr; } }

.sb-law-card{ background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 16px 18px; box-shadow: 0 10px 24px rgba(0,0,0,.05); }
.sb-law-kicker{ font-weight: 900; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 6px; }
.sb-law-text{ color: #444; line-height: 1.5; }

/* ===== PAGE WRAPPER ===== */
.sb-page{ padding: 0 0 24px; }
.sb-page-inner{ max-width: 1180px; margin: 0 auto; padding: 0 18px; }
.sb-page-title{ margin: 16px 0 10px; font-weight: 400; }
.sb-intro-text{ background:#fff; border:1px solid #eee; border-radius: 12px; padding: 16px 18px; box-shadow: 0 10px 22px rgba(0,0,0,.04); }
.sb-admin-alert{ margin-top: 14px; border-radius: 10px; }

/* ===== UI NUEVA (Tabs + Sidebar + Panel) ===== */
.card{
  background:#fff;
  border: 1px solid #ececec;
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
}

.sb-tabs{
  display:flex;
  gap: 10px;
  margin: 18px 0 14px;
  padding: 10px;
  background: #f3f3f6;
  border: 1px solid #e9e9ee;
  border-radius: 14px;
  flex-wrap: wrap;
}

.sb-tab{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration:none !important;
  font-weight: 800;
  color: #555;
  border: 1px solid transparent;
  background: transparent;
}

.sb-tab:hover{
  background:#ffffff;
  border-color:#e6e6e6;
}

.sb-tab.is-active{
  background:#7a2137;
  color:#fff !important;
  border-color:#7a2137;
  box-shadow: 0 10px 18px rgba(122,33,55,.22);
}

.sb-layout{ margin-top: 6px; }

.sb-sidebar{ padding: 14px; }
.sb-panel{ padding: 14px; }

.sb-search{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  background:#f7f7fb;
  border: 1px solid #ececf4;
  border-radius: 12px;
}

.sb-search .glyphicon{ opacity:.65; }
.sb-search .form-control{
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  padding: 0 !important;
  height: 24px;
}

.sb-fracciones{
  margin-top: 12px;
  max-height: 560px;
  overflow: auto;
  padding-right: 4px;
}

/* Scrollbar sutil */
.sb-fracciones::-webkit-scrollbar{ width: 8px; }
.sb-fracciones::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.12); border-radius: 8px; }
.sb-fracciones::-webkit-scrollbar-track{ background: transparent; }

.sb-fraccion-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 12px;
  text-decoration:none !important;
  color:#333;
  border: 1px solid transparent;
}

.sb-fraccion-item:hover{
  background:#f6f6f9;
  border-color:#ededf2;
}

.sb-fraccion-item.is-active{
  background: rgba(122,33,55,.08);
  border-color: rgba(122,33,55,.25);
}

.sb-fraccion-icon{ color:#7a2137; }
.sb-fraccion-text{ flex:1; font-weight:700; }
.sb-fraccion-arrow{ opacity:.45; }

.sb-panel-head{
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(90deg, #7a2137, #8b2a43);
  color:#fff;
}

.sb-panel-title{
  font-weight: 900;
  letter-spacing: .4px;
}

/* ===== ACCORDION PRO ===== */
.sb-accordion{ margin-bottom: 18px; }

.uib-accordion .panel{ border: 0; box-shadow: none; background: transparent; margin-bottom: 14px !important; }
.uib-accordion .panel-heading{ padding: 0; border: 0; }

.sb-acc-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 14px 18px;
  cursor:pointer;
  user-select:none;
  border-radius: 10px;
}
.sb-acc-head--gray{ background: #6b6b6b; }

.sb-title{ color:#fff; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; font-size: 12px; line-height: 1.2; }
.sb-right{ display:flex; align-items:center; gap: 12px; }
.sb-chevron{ color:#fff; font-size: 14px; }

.sb-acc-body{ padding: 0 !important; }
.uib-accordion .panel-body{
  border: 1px solid #e8e8e8;
  border-top: 0;
  background:#fff;
  padding: 16px 18px;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 10px 22px rgba(0,0,0,.05);
}

/* meta */
.sb-meta{ display:grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 14px; }
.sb-meta-row{ display:flex; flex-wrap: wrap; align-items:center; gap: 10px; }
.sb-meta-label{ font-weight: 700; color:#555; }
.sb-chip{ margin-right: 6px; }
.sb-badge{ font-weight: 700; }

/* tabla */
.sb-doc-table{ margin-top: 10px; }
.sb-table{ margin-bottom: 0; }
.sb-table thead th{ font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color:#555; border-bottom: 1px solid #e7e7e7 !important; }
.sb-table tbody td{ vertical-align: middle; }

.sb-dl{ display:inline-flex; align-items:center; gap: 8px; font-weight: 800; text-decoration:none; }
.sb-dl:hover{ text-decoration: underline; }

@media (max-width: 991px){
  .sb-fracciones{ max-height: 320px; }
}

/* ===== Estado de carga (overlay ligero) ===== */
.sb-loading {
  pointer-events: none;
  opacity: .92;
  filter: saturate(.9);
}
.sb-loading .sb-tabs,
.sb-loading .sb-sidebar,
.sb-loading .sb-panel {
  pointer-events: none;
}
.sb-loading:after{
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.03);
  z-index: 1;
}

/* =========================================================
   OVERRIDES LOOK & FEEL (como la 2da imagen “bonita”)
   Pegar al FINAL del saltabarranca-home.css
   ========================================================= */

:root{
  --sb-wine: #7a2137;
  --sb-wine-2: #8b2a43;
  --sb-soft: #f4f1f3;
  --sb-soft-2: #f8f6f7;
  --sb-border: #e7dfe3;
}

/* Fondo más “portal”, sin sentirse en bloques */
.sb-page{ background: #f3f3f6; }
.sb-hero{ background: #f3f3f6; }

/* Títulos centrados tipo referencia */
.sb-page-title{
  text-align:center;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: .6px;
  margin-top: 10px;
  margin-bottom: 12px;
}
.sb-intro-text{
  border-color: #ece6ea;
  box-shadow: 0 14px 28px rgba(0,0,0,.06);
}

/* Tabs como la referencia (botones con sombra + icono visible) */
.sb-tabs{
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: 18px;
  justify-content: center;
  gap: 12px;
}
.sb-tab{
  background: #fff;
  border: 1px solid var(--sb-border);
  box-shadow: 0 12px 22px rgba(0,0,0,.06);
  padding: 14px 18px;
  border-radius: 14px;
}
.sb-tab .glyphicon{
  font-size: 18px;
  opacity: .9;
}
.sb-tab.is-active{
  background: var(--sb-wine);
  border-color: var(--sb-wine);
  box-shadow: 0 16px 24px rgba(122,33,55,.26);
}
.sb-tab.is-active .glyphicon{ opacity: 1; }

/* Layout “tarjetas” más parecido al diseño final */
.sb-layout .card{
  border-radius: 18px;
  box-shadow: 0 18px 34px rgba(0,0,0,.08);
  border-color: #ece6ea;
}

/* Sidebar: fracciones como cards separadas, con icono tipo “badge” */
.sb-sidebar{ padding: 16px; }
.sb-fracciones{ margin-top: 14px; padding-right: 6px; }

.sb-fraccion-item{
  background: var(--sb-soft-2);
  border: 1px solid var(--sb-border);
  box-shadow: 0 8px 18px rgba(0,0,0,.04);
  margin-bottom: 10px;              /* <-- esto quita lo amontonado */
  padding: 12px 14px;
  border-radius: 14px;
}
.sb-fraccion-item:hover{
  background: #fff;
  border-color: #e6d6dd;
}

/* Badge del icono (cuadrito) como la referencia */
.sb-fraccion-icon{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  background: #efe7ea;
  border: 1px solid #e0c8d1;
  color: var(--sb-wine);
  flex: 0 0 34px;
}
.sb-fraccion-icon.glyphicon{ font-size: 16px; }

/* Activo estilo maroon */
.sb-fraccion-item.is-active{
  background: linear-gradient(90deg, rgba(122,33,55,.14), rgba(122,33,55,.06));
  border-color: rgba(122,33,55,.35);
}
.sb-fraccion-item.is-active .sb-fraccion-text{ color: #3b0d17; }

/* Flecha más visible como en la referencia */
.sb-fraccion-arrow{
  opacity: .55;
  font-size: 16px;
}

/* Panel derecho: barra superior más “pro” */
.sb-panel-head{
  border-radius: 14px;
  padding: 12px 16px;
  background: linear-gradient(90deg, var(--sb-wine), var(--sb-wine-2));
  box-shadow: 0 16px 24px rgba(122,33,55,.18);
}
.sb-panel-title{
  font-size: 16px;
  font-weight: 900;
}

/* Chips/meta se vean como la referencia */
.sb-chip,
.sb-badge{
  border-radius: 999px;
}

/* Accordion: barras tipo gris con mejor separación */
.uib-accordion .panel{ margin-bottom: 12px !important; }
.sb-acc-head{
  border-radius: 12px;
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
}
.sb-acc-head--gray{ background: #6a6a6a; }
.uib-accordion .panel-body{
  border-radius: 0 0 12px 12px;
}

/* =========================================================
   FIX: quitar “divs feos” / cajas grises recortadas
   - Hace el hero y el bloque “Portal Modelo…” full-width
   - Mantiene el contenido centrado con .sb-hero-inner/.sb-page-inner
   - No toca tu UI de tabs + sidebar + panel (la que ya te gusta)
   ========================================================= */

:root{
  --sb-bg: #f3f3f6;
  --sb-card: #ffffff;
  --sb-border: #ece6ea;
  --sb-shadow: 0 14px 28px rgba(0,0,0,.06);
}

/* 1) Fondo general */
body{ background: var(--sb-bg) !important; }

/* 2) Quitar fondos “por bloque” que generan cortes/rectángulos */
.sb-hero,
.sb-page{
  background: transparent !important;
}

/* 3) HERO full-width, sin caja gris (el fondo se integra con la página) */
.sb-hero{
  padding: 28px 0 16px;
}
.sb-hero-inner{
  background: transparent !important;
}

/* 4) Cards legales: más limpias (sin sentirse “dentro de un recuadro gris”) */
.sb-law-card{
  background: var(--sb-card);
  border: 1px solid var(--sb-border);
  box-shadow: var(--sb-shadow);
}

/* 5) Bloque “Portal Modelo…” como una tarjeta grande, centrada y elegante */
.sb-intro-text{
  background: var(--sb-card) !important;
  border: 1px solid var(--sb-border) !important;
  box-shadow: var(--sb-shadow) !important;
  border-radius: 16px !important;
}

/* 6) “Barrita azul” (alert) más integrada y sin borde duro */
.sb-admin-alert{
  border-radius: 14px !important;
  box-shadow: 0 10px 18px rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.06);
}

/* 7) Separación visual suave entre “Portal Modelo…” y tabs */
.sb-tabs{
  margin-top: 18px !important;
}

/* 8) Si tienes un wrapper viejo tipo .container / .row con background, lo neutralizamos */
.container,
.container-fluid{
  background: transparent !important;
}

/* 9) Opcional: si en tu Blade hay un div tipo “sb-section-gray” o similar, lo apagamos */
.sb-section-gray,
.sb-gray,
.section-gray,
.bg-gray{
  background: transparent !important;
}

/* =========================================================
   FIX REAL: QUITAR “DIVS FEOS” DEL TEMPLATE (container_ content_)
   - Quita el bloque blanco/sombra/padding que encierra todo
   - Deja tu contenido (hero + portal + tabs) como en la 2da imagen
   - Aplica SOLO donde se carga saltabarranca-home.css (Transparencia)
   ========================================================= */

/* El body del portal con fondo uniforme */
html, body{
  background: #f3f3f6 !important;
}

/* 1) El wrapper general (sb-main-fluid) no debe “encajonar” */
.sb-main-fluid{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2) ESTE es el culpable: el contenedor del template */
.sb-main-fluid .container_.content_{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;

  /* quita el padding que deja el bloque como “caja” */
  padding: 0 !important;

  /* que no limite el ancho */
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}

/* 3) Si bootstrap mete container dentro, igual lo neutralizamos */
.sb-main-fluid .container,
.sb-main-fluid .container-fluid{
  background: transparent !important;
}

/* 4) HERO full width con imagen de fondo (como tú quieres) */
.sb-hero{
  /* full width aunque estés dentro de wrappers */
  width: 100vw;
  margin-left: calc(50% - 50vw);

  /* tu hero con imagen (pon tu imagen en public/img/hero-transparencia.jpg) */
  background:
    linear-gradient(180deg, rgba(243,243,246,.92), rgba(243,243,246,.92)),
    url("../img/hero-transparencia.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding: 44px 0 18px;
}

/* 5) El resto de la página también full width para que no “corte” */
.sb-page{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: transparent !important;
}

/* 6) Mantén el contenido centrado y bonito */
.sb-hero-inner,
.sb-page-inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
  margin-top: 5px;
}

/* 7) Tarjeta grande “Portal modelo…” (se ve pro, no caja gris) */
.sb-intro-text{
  background: #fff !important;
  border: 1px solid #ece6ea !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.06) !important;
}

/* 8) Opcional: “Artículos” más elegantes */
.sb-law-card{
  background: #fff;
  border: 1px solid #ece6ea;
  border-radius: 16px;
  box-shadow: 0 14px 28px rgba(0,0,0,.06);
}

/* Mata el “cajón” aunque no exista sb-main-fluid */
.container_.content_{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}

.content_{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.sb-section-gray,
.section-gray,
.bg-gray{
  background: transparent !important;
}

.sb-hero{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background:
    linear-gradient(180deg, rgba(243,243,246,.92), rgba(243,243,246,.92)),
    url("./img/hero-transparencia.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 44px 0 18px;
}

.sb-hero{
  position: relative;
  width: 100%;
  min-height: 360px;
  padding: 56px 0 42px;
  overflow: hidden;
}

.sb-hero--bg{
  background-image:
    linear-gradient(180deg, rgba(245,246,248,.92) 0%, rgba(245,246,248,.80) 50%, rgba(245,246,248,.96) 100%),
    var(--sb-hero-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


.sb-hero-overlay{
  position:absolute; inset:0;
  background: radial-gradient(circle at 20% 10%, rgba(255,255,255,.18), rgba(255,255,255,0) 55%);
  pointer-events:none;
}

.sb-hero-content{
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
  color: #fff;
  text-align: center;
}

.sb-hero-title h1{
  margin: 0;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 38px;
}
.sb-hero-title h2{
  margin: 6px 0 6px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 30px;
}
.sb-hero-title p{
  margin: 10px 0 0;
  opacity: .95;
  letter-spacing: .03em;
  font-weight: 600;
}

.sb-hero-cards{
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.sb-hero-card{
  background: rgba(255,255,255,.92);
  color: #1b1b1b;
  border-radius: 14px;
  padding: 16px 18px;
  text-align: left;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}
.sb-hero-card h3{
  margin: 0 0 8px;
  font-weight: 900;
  color: var(--sb-maroon, #7b1f34);
}

.sb-page--clean{
  background: #fff !important;
  padding: 26px 0 40px;
}

.sb-shell{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
}

.sb-h2{
  text-align:center;
  font-weight: 900;
  margin: 6px 0 16px;
}

.sb-lead{
  background:#fff;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  margin: 0 auto 14px;
  max-width: 980px;
}

.sb-info{
  background:#e6f4ff;
  border:1px solid #bfe4ff;
  border-radius: 12px;
  padding: 12px 14px;
  max-width: 980px;
  margin: 0 auto 20px;
}

@media (max-width: 900px){
  .sb-hero-title h1{ font-size: 28px; }
  .sb-hero-title h2{ font-size: 22px; }
  .sb-hero-cards{ grid-template-columns: 1fr; }
}


.sb-shell {
  background: #f5f6f8;
}

.sb-main-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.container_.content_ {
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
}

/* ====== HERO ====== */
.sb-hero{
  --sb-hero-img: none;
  position: relative;
  width: 100%;
  padding: 70px 0 48px;
  background:
    linear-gradient(180deg, rgba(245,246,248,.92) 0%, rgba(245,246,248,.80) 50%, rgba(245,246,248,.96) 100%),
    var(--sb-hero-img) center/cover no-repeat;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.sb-hero-inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}

.sb-hero-title{
  margin: 0;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 38px;
  line-height: 1.1;
  color: #2b2b2b;
}

.sb-hero-sub{
  margin-top: 8px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 28px;
  color: #2b2b2b;
}

.sb-hero-law{
  margin-top: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 14px;
  color: rgba(0,0,0,.65);
}

.sb-hero-cards{
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 900px){
  .sb-hero-title{ font-size: 28px; }
  .sb-hero-sub{ font-size: 20px; }
  .sb-hero-cards{ grid-template-columns: 1fr; }
}

.sb-card{
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 18px 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  text-align: left;
}

.sb-card-title{
  font-weight: 800;
  letter-spacing: .02em;
  color: #6c1430;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.sb-card-text{
  color: rgba(0,0,0,.75);
  line-height: 1.35;
  font-size: 14px;
}

.sb-section{
  width: 100%;
  padding: 26px 0;
}

.sb-page-inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
}

.sb-h2{
  margin: 0 0 10px;
  text-align: center;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: 34px;
  color: #2b2b2b;
}

.sb-intro{
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  color: rgba(0,0,0,.75);
}

.sb-info{
  margin-top: 12px;
  background: rgba(64, 172, 224, .10);
  border: 1px solid rgba(64, 172, 224, .25);
  border-radius: 12px;
  padding: 12px 14px;
  color: rgba(0,0,0,.78);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.sb-info-icon{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #40ace0;
  color: #fff;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 20px;
  flex: 0 0 20px;
}

.sb-section--content{
  padding-top: 10px;
}

.sb-intro{
  margin-top: 5px;
}

.sb-hero{
  background-image:
    linear-gradient(180deg, rgba(245,246,248,.65) 0%, rgba(245,246,248,.45) 45%, rgba(245,246,248,.70) 100%),
    url("../img/transparencia-hero.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}