/* =============================================================================
   Portal del cliente de Poder Creativo — estilos propios (2026-10-07)
   Va en themes/huraga/assets/css/pc-portal.css y se enlaza desde
   layout_default.html.twig y layout_public.html.twig.

   NO se toca huraga.css: si el día de mañana se actualiza FOSSBilling, este
   archivo sobrevive (hay que volver a poner el <link> en los dos layouts).

   Diseño aprobado por Bacho el 2026-10-07 (propuesta D):
     · fondo BLANCO, tarjetas separadas por borde + sombra suave
     · menú lateral con un tono apenas distinto y el ítem activo en azul lleno
     · esquinas poco redondeadas (8px) y etiquetas rectangulares (5px)
     · modo claro y modo oscuro (el oscuro se activa con data-bs-theme="dark")
   ============================================================================= */

:root{
  --pc-fondo:#ffffff;
  --pc-panel:#ffffff;
  --pc-menu:#f4f7fd;
  --pc-borde:#dbe2f2;
  --pc-linea:#eef2fb;
  --pc-tinta:#0d1030;
  --pc-suave:#4a5474;
  --pc-azul:#1a73e8;
  --pc-azul-suave:#e6eefc;
  --pc-verde:#0f7a4a;  --pc-verde-f:#e3f6ec;
  --pc-ambar:#b45309;  --pc-ambar-f:#fdf1e3;
  --pc-sombra:0 1px 3px rgba(13,16,48,.07);
}
html[data-bs-theme="dark"]{
  --pc-fondo:#070b1c;
  --pc-panel:#121832;
  --pc-menu:#000022;
  --pc-borde:#263055;
  --pc-linea:#1e2746;
  --pc-tinta:#eaeefb;
  --pc-suave:#a7b0d0;
  --pc-azul:#4d9bff;
  --pc-azul-suave:#16244a;
  --pc-verde:#5cd39b;  --pc-verde-f:#11331f;
  --pc-ambar:#ffb563;  --pc-ambar-f:#35240f;
  --pc-sombra:0 1px 3px rgba(0,0,0,.35);
}

body{ background:var(--pc-fondo); color:var(--pc-tinta); }

/* ---------------------------------------------- ancho de la pagina ---------
   De fabrica el portal va encajonado al centro (contenedor de 1320px) y en una
   pantalla grande se ve todo apretado al medio. Bacho pidió ancho completo con
   márgenes: el contenido usa toda la pantalla y el menú queda fijo en 260px. */
.container{ max-width:100% !important; padding-left:34px !important; padding-right:34px !important; }
@media (min-width: 1700px){ .container{ padding-left:60px !important; padding-right:60px !important; } }
@media (min-width: 768px){
  .container > .row > .col-3{ flex:0 0 260px; max-width:260px; width:260px; }
  .container > .row > .col-md-9{ flex:1 1 0; max-width:none; width:auto; min-width:0; }
}

/* Menú lateral (#sidebarMenu): queda como una tarjeta con su propio tono y el ítem
   activo en azul lleno. OJO: hay que apuntar SOLO al menú lateral — la primera versión
   usaba .navbar y .nav-link sueltos, y eso pintaba también la barra de arriba. */
#sidebarMenu{ background:var(--pc-menu); border:1px solid var(--pc-borde); border-radius:8px;
  padding:8px; margin-top:0; }
#sidebarMenu .nav-link{ color:var(--pc-tinta) !important; border-radius:6px; font-weight:600;
  padding:11px 13px; }
#sidebarMenu .nav-link:hover{ background:var(--pc-azul-suave); }
#sidebarMenu .nav-link.active{ background:var(--pc-azul) !important; color:#fff !important; }
#sidebarMenu .nav-link.active svg{ color:#fff !important; }
/* La barra de arriba: SIN fondo propio (de fábrica trae gris y en modo oscuro se veía
   como una franja pegada arriba). Solo una línea fina abajo. */
header, header .navbar{ background:transparent !important; background-color:transparent !important; }
header .navbar{ border-bottom:0; padding-bottom:8px; }
header .nav-link{ color:var(--pc-tinta) !important; }
header .nav-link.active{ background:transparent !important; color:var(--pc-azul) !important; font-weight:700; }

/* el menu lateral acompana al bajar (pedido de Bacho, 2026-10-08): queda pegado arriba
   mientras la pagina se mueve; si la ventana es mas baja que el menu, el menu se desplaza solo */
@media (min-width: 768px){
  .container > .row > .col-3 > #sidebarMenu{ position:sticky; top:16px; max-height:calc(100vh - 32px); overflow-y:auto; }
}

/* las tarjetas del resto del portal, con el mismo aire del inicio */
.card{ border-radius:8px; border-color:var(--pc-borde); box-shadow:var(--pc-sombra); }
.badge{ border-radius:5px; }

/* ---------------------------------------------------- pantalla de inicio --- */
.pc-cinta{ height:5px; border-radius:2px; margin-bottom:14px;
  background:linear-gradient(90deg,#00b4f0,#1a73e8,#16a765,#fad165,#ff8c1a,#ff2d87,#8b5cf6); }

.pc-saludo{ border-radius:10px; padding:28px 30px; color:#fff; display:flex; align-items:center;
  justify-content:space-between; gap:22px; flex-wrap:wrap;
  background:linear-gradient(100deg,#0d1030,#1a73e8 72%,#00b4f0); }
.pc-saludo h1{ margin:0 0 6px; font-size:31px; line-height:1.15; color:#fff; }
.pc-saludo p{ margin:0; font-size:17px; opacity:.93; }
.pc-saludo .pc-cta{ background:#fff; color:#0d1030; border-radius:7px; padding:15px 24px;
  font-size:16px; font-weight:700; text-decoration:none; white-space:nowrap; }
.pc-saludo .pc-cta:hover{ color:#0d1030; opacity:.92; }

.pc-cifras{ display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:16px; margin-top:20px; }
.pc-cifra{ background:var(--pc-panel); border:1px solid var(--pc-borde); box-shadow:var(--pc-sombra);
  border-radius:8px; padding:17px 19px; display:flex; align-items:center; gap:13px; }
.pc-cifra svg{ width:27px; height:27px; stroke:var(--pc-azul); fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; flex:none; }
.pc-cifra .n{ font-size:30px; font-weight:700; line-height:1; }
.pc-cifra .t{ font-size:14.5px; color:var(--pc-suave); margin-top:3px; }
.pc-cifra.alerta svg{ stroke:var(--pc-ambar); } .pc-cifra.alerta .n{ color:var(--pc-ambar); }

.pc-h2{ font-size:19px; font-weight:700; margin:28px 0 13px; }
.pc-h2{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.pc-todos{ font-size:15px; font-weight:600; color:var(--pc-azul); text-decoration:none; }
.pc-tres{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:18px; }
.pc-dos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px; margin-top:20px; }
.pc-card{ background:var(--pc-panel); border:1px solid var(--pc-borde); box-shadow:var(--pc-sombra);
  border-radius:8px; padding:21px 23px; }
.pc-tit{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:700;
  color:var(--pc-suave); letter-spacing:normal; text-transform:uppercase; margin-bottom:13px; }
.pc-tit svg{ width:19px; height:19px; stroke:var(--pc-azul); fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
.pc-nom{ font-size:17px; font-weight:700; line-height:1.3; }
.pc-sub{ font-size:14.5px; color:var(--pc-suave); margin-top:3px; }
.pc-lin{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.pc-pill{ font-size:13px; font-weight:700; padding:5px 12px; border-radius:5px; white-space:nowrap; }
.pc-ok{ background:var(--pc-verde-f); color:var(--pc-verde); }
.pc-pend{ background:var(--pc-ambar-f); color:var(--pc-ambar); }
.pc-barra{ height:10px; border-radius:3px; background:var(--pc-linea); margin:15px 0 8px; overflow:hidden; }
.pc-barra i{ display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,#1a73e8,#00b4f0); }
.pc-falta{ font-size:14.5px; color:var(--pc-suave); }
.pc-acc{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.pc-b{ border:1.5px solid var(--pc-borde); border-radius:7px; padding:11px 17px; font-size:15.5px;
  font-weight:600; color:var(--pc-tinta); text-decoration:none; background:var(--pc-panel); }
.pc-b:hover{ border-color:var(--pc-azul); color:var(--pc-azul); }
.pc-b.p{ background:var(--pc-azul); border-color:var(--pc-azul); color:#fff; }
.pc-b.p:hover{ color:#fff; opacity:.92; }
.pc-monto{ font-size:24px; font-weight:700; margin:6px 0 2px; }
.pc-fila{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0;
  border-bottom:1px solid var(--pc-linea); font-size:15.5px; }
.pc-fila:last-child{ border-bottom:0; }
.pc-fila a{ color:var(--pc-azul); font-weight:600; text-decoration:none; }
.pc-mu{ color:var(--pc-suave); }
.pc-videos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; }
.pc-video{ border:1.5px dashed var(--pc-borde); border-radius:8px; padding:18px 10px; text-align:center;
  font-size:14px; color:var(--pc-suave); }
.pc-video svg{ width:30px; height:30px; stroke:var(--pc-azul); fill:none; stroke-width:1.6; margin-bottom:5px; }
.pc-vacio{ color:var(--pc-suave); font-size:15px; }

/* logo del cliente arriba a la derecha (va en un circulo blanco para que se vea en modo oscuro) */
.pc-avatar{ position:relative; width:30px; height:30px; border-radius:50%; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; }
.pc-avatar.pc-ini{ background:var(--pc-azul); color:#fff; font-weight:700; font-size:14px; }
.pc-avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:3px;
  background:#fff; border:1px solid var(--pc-borde); border-radius:50%; }

/* videotutoriales en dos grupos */
.pc-vgrupos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:6px 22px; }
.pc-vgrupo{ font-size:12.5px; font-weight:700; letter-spacing:normal; text-transform:uppercase; color:#19b8ad; margin:2px 0 6px; }
.pc-vfila{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--pc-linea); font-size:15px; }
.pc-vfila:last-child{ border-bottom:0; }
.pc-vfila svg{ width:22px; height:22px; flex:none; stroke:var(--pc-azul); fill:none; stroke-width:1.6; stroke-linejoin:round; }
.pc-vfila span:first-of-type{ flex:1; }
button.pc-vfila{ width:100%; background:none; border:0; border-bottom:1px solid var(--pc-linea); color:var(--pc-tinta); text-align:left; cursor:pointer; }
button.pc-vfila:last-child{ border-bottom:0; }
.pc-vlisto:hover span:first-of-type{ color:var(--pc-azul); }
.pc-ver{ font-size:12px; font-weight:700; padding:3px 10px; border-radius:5px; background:var(--pc-azul); color:#fff; white-space:nowrap; }
.pc-vmodal{ border-radius:10px; overflow:hidden; background:#000216; color:#fff; border:0; }
.pc-vmodal .modal-header{ border-bottom:1px solid rgba(255,255,255,.12); }
.pc-vmodal .modal-title{ font-family:Outfit,Inter,sans-serif; font-weight:700; }
.pc-vmodal .btn-close{ filter:invert(1); }
.pc-vmodal video{ width:100%; display:block; background:#000; aspect-ratio:16/9; }
.pc-pronto{ font-size:12px; font-weight:700; padding:3px 8px; border-radius:5px; background:var(--pc-azul-suave); color:var(--pc-azul); white-space:nowrap; }

/* interruptor de modo claro / oscuro */
.pc-modo{ background:none; border:1.5px solid var(--pc-borde); color:var(--pc-suave); border-radius:7px;
  padding:8px 14px; font-size:14px; font-weight:600; cursor:pointer; }
.pc-modo:hover{ border-color:var(--pc-azul); color:var(--pc-azul); }

/* ---------------------------------------------- menú del teléfono ----------
   De fábrica el menú desplegable sale centrado y descuadrado (el nombre del
   cliente se corta). Pedido de Bacho: todo alineado a la izquierda. */
@media (max-width: 767.98px){
  #navbarSupportedContent{ text-align:left; padding-top:6px; }
  #navbarSupportedContent .navbar-nav, #navbarSupportedContent .nav{ align-items:stretch !important; }
  #navbarSupportedContent .nav-link, #navbarSupportedContent .dropdown-toggle,
  #sidebarMenu .nav-link{ justify-content:flex-start !important; text-align:left !important;
    white-space:normal; overflow-wrap:anywhere; }
  #navbarSupportedContent .nav-item, #navbarSupportedContent .dropdown{ width:100%; }
  #navbarSupportedContent select, #navbarSupportedContent .form-select{ width:100%; margin:4px 0; }
  #navbarSupportedContent .dropdown-menu{ width:100%; }
  /* dentro del desplegable, el menú lateral no necesita su propio recuadro */
  #sidebarMenu{ border:0; background:transparent; padding:0; }
  #sidebarMenu .nav-link{ padding-left:4px; }
}

/* telefono: margenes mas angostos y cifras compactas (antes se salian por la derecha) */
@media (max-width: 576px){
  .container{ padding-left:14px !important; padding-right:14px !important; }
  .pc-cifras{ gap:10px; }
  .pc-cifra{ padding:13px 12px; gap:9px; min-width:0; }
  .pc-cifra svg{ width:22px; height:22px; }
  .pc-cifra .n{ font-size:24px; }
  .pc-cifra .t{ font-size:13px; }
  .pc-saludo{ padding:22px 20px; }
  .pc-card{ padding:18px 16px; }
}

/* en pantallas chicas todo pasa a una columna */
@media (max-width: 992px){
  .pc-cifras{ grid-template-columns:repeat(2,1fr); }
  .pc-tres, .pc-dos, .pc-videos{ grid-template-columns:1fr; }
  .pc-saludo h1{ font-size:26px; }
}

/* ---------------------------------------------- Mis informes (2026-10-08) ---
   Opcion A aprobada por Bacho: banda oscura con el estilo de la cotizacion 2804. */
.pc-inf-band{ position:relative; overflow:hidden; border-radius:10px; margin-top:20px; padding:26px 28px;
  background:#000216; color:#eaf0ff; font-family:Inter,system-ui,sans-serif; }
.pc-inf-band::before{ content:""; position:absolute; right:-120px; top:-140px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle at 40% 40%, rgba(145,71,253,.55), rgba(0,135,253,.18) 45%, transparent 70%); }
.pc-inf-band::after{ content:""; position:absolute; right:60px; bottom:-220px; width:380px; height:380px; border-radius:50%;
  border:1.5px solid rgba(89,255,242,.35); }
.pc-inf-band > *{ position:relative; z-index:1; }
.pc-inf-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.pc-inf-kicker{ color:#59FFF2; font-size:13px; font-weight:600; letter-spacing:normal; }
.pc-inf-h{ font-family:Outfit,Inter,sans-serif; font-weight:700; font-size:26px; line-height:1.15; margin:6px 0 4px; color:#fff; }
.pc-inf-sub{ color:#b9c6da; font-size:15px; }
.pc-grad{ background:linear-gradient(90deg,#00BFFD,#0087FD,#9147FD,#FF4889,#FE8E00,#FED300);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.pc-inf-cifras{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:20px; }
.pc-inf-c{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:15px 16px; }
.pc-inf-c .n{ font-family:Outfit,Inter,sans-serif; font-size:28px; font-weight:700; color:#59FFF2; line-height:1.1; }
.pc-inf-c .t{ font-size:14px; color:#c9d4e6; margin-top:4px; }
.pc-inf-acc{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; align-items:center; }
.pc-inf-b{ border-radius:7px; padding:11px 18px; font-weight:600; font-size:15px; text-decoration:none; border:1.5px solid rgba(255,255,255,.25); color:#fff; }
.pc-inf-b.p{ background:#59FFF2; border-color:#59FFF2; color:#000216; }
.pc-inf-link{ color:#59FFF2; text-decoration:none; font-weight:600; font-size:15px; margin-left:auto; }

/* pagina "Mis informes" */
.pc-inf-sec{ display:flex; align-items:center; gap:12px; font-family:Outfit,Inter,sans-serif; font-size:20px; font-weight:700; margin:30px 0 14px; color:var(--pc-tinta); }
.pc-inf-sec::before{ content:""; width:34px; height:2px; background:#19b8ad; }
.pc-inf-item{ background:var(--pc-panel); border:1px solid var(--pc-borde); border-radius:10px; box-shadow:var(--pc-sombra); overflow:hidden; margin-bottom:18px; }
.pc-inf-item-cab{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; align-items:center; padding:18px 22px; border-bottom:1px solid var(--pc-linea); }
.pc-inf-chip{ display:inline-block; font-size:13px; font-weight:700; padding:4px 10px; border-radius:5px; background:#e3faf8; color:#0f7f77; }
.pc-inf-item-cab h3{ font-family:Outfit,Inter,sans-serif; font-size:20px; font-weight:700; margin:6px 0 0; color:var(--pc-tinta); }
.pc-inf-item-cuerpo{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:22px; padding:18px 22px 22px; }
.pc-inf-item .pc-inf-cifras{ margin-top:0; grid-template-columns:repeat(3,minmax(0,1fr)); }
.pc-inf-item .pc-inf-c{ background:var(--pc-menu); border-color:var(--pc-borde); }
.pc-inf-item .pc-inf-c .n{ color:var(--pc-azul); font-size:24px; }
.pc-inf-item .pc-inf-c .t{ color:var(--pc-suave); font-size:13.5px; }
.pc-inf-lista{ margin:0; padding:0; list-style:none; }
.pc-inf-lista li{ position:relative; padding:0 0 10px 26px; font-size:15px; color:var(--pc-tinta); line-height:1.45; }
.pc-inf-lista li::before{ content:"✓"; position:absolute; left:0; top:0; width:18px; height:18px; border-radius:50%;
  background:#e3faf8; color:#0f7f77; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.pc-inf-item .pc-b{ font-size:14.5px; padding:9px 15px; }
html[data-bs-theme="dark"] .pc-inf-chip, html[data-bs-theme="dark"] .pc-inf-lista li::before{ background:#0d3431; color:#59FFF2; }
@media (max-width: 992px){ .pc-inf-cifras, .pc-inf-item .pc-inf-cifras{ grid-template-columns:1fr; } .pc-inf-item-cuerpo{ grid-template-columns:1fr; } .pc-inf-link{ margin-left:0; } }

/* Mis informes: grafico ilustrado + iconos en las cifras (version 1 aprobada, 2026-10-08) */
.pc-inf-grid{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:24px; align-items:center; }
.pc-inf-ilus{ width:100%; max-width:300px; justify-self:end; filter:drop-shadow(0 10px 30px rgba(0,0,0,.35)); }
.pc-inf-c{ display:flex; gap:13px; align-items:flex-start; }
.pc-inf-ico{ flex:none; width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:rgba(89,255,242,.10); border:1px solid rgba(89,255,242,.35); }
.pc-inf-ico svg{ width:21px; height:21px; stroke:#59FFF2; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width: 992px){ .pc-inf-grid{ grid-template-columns:1fr; } .pc-inf-ilus{ justify-self:start; max-width:240px; } }
/* iconos en las tarjetas claras de la pagina "Mis informes" */
.pc-inf-item .pc-inf-ico{ width:36px; height:36px; background:rgba(25,184,173,.10); border-color:rgba(25,184,173,.35); }
.pc-inf-item .pc-inf-ico svg{ stroke:#0f7f77; width:19px; height:19px; }
html[data-bs-theme="dark"] .pc-inf-item .pc-inf-ico svg{ stroke:#59FFF2; }
.pc-inf-item .pc-inf-c{ flex-direction:column; gap:9px; }  /* en las tarjetas chicas, el icono va arriba del numero */

/* =============================================================================
   ALTEXSA (2026-10-10) — misma arquitectura que el portal de Poder Creativo (todo lo
   de arriba es su pc-portal.css tal cual, para poder sincronizarlo), con los colores
   de Altexsa: azul marino #002259 y dorado #EDA000.
   Regla de marca de Altexsa (Bacho, "opción B", ver altexsa.css): el DORADO queda
   reservado para los botones de acción; todo lo demás va en azul marino, blanco y
   grises azulados. La letra es Inter (desde el 2026-10-11; antes Lexend), que ya carga altexsa.css.
   ============================================================================= */
:root{
  --pc-fondo:#ffffff;
  --pc-panel:#ffffff;
  --pc-menu:#f5f8fc;
  --pc-borde:#e3e9f2;
  --pc-linea:#eef2f8;
  --pc-tinta:#0f1a33;
  --pc-suave:#526078;
  --pc-azul:#002259;          /* íconos, enlaces e ítem activo del menú */
  --pc-azul-medio:#123a7a;
  --pc-azul-suave:#eef3fb;
  --pc-oro:#eda000;           /* SOLO botones de acción */
  --pc-oro-osc:#c98700;
  --pc-sombra:0 1px 3px rgba(0,34,89,.07);
}
html[data-bs-theme="dark"]{
  --pc-fondo:#050b1f;
  --pc-panel:#0d1733;
  --pc-menu:#081231;
  --pc-borde:#1f2c52;
  --pc-linea:#18244a;
  --pc-tinta:#eaf0fb;
  --pc-suave:#a3b0cf;
  --pc-azul:#8fb3f0;          /* en fondo oscuro el azul marino no se vería: va un azul claro */
  --pc-azul-medio:#bcd0f5;
  --pc-azul-suave:#14234a;
  --pc-sombra:0 1px 3px rgba(0,0,0,.35);
}
body{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; }

/* menú lateral: ítem activo en azul marino lleno (en oscuro, un azul medio para que se lea) */
#sidebarMenu .nav-link.active{ background:#002259 !important; color:#fff !important; }
html[data-bs-theme="dark"] #sidebarMenu .nav-link.active{ background:#1d3d7a !important; }
header .nav-link.active{ color:var(--pc-azul) !important; }

/* cinta y saludo: azul marino con un toque dorado */
.pc-cinta{ background:linear-gradient(90deg,#002259,#123a7a 60%,#eda000); }
.pc-saludo{ background:linear-gradient(100deg,#000f2e,#002259 58%,#123a7a); }
.pc-saludo .pc-cta{ background:var(--pc-oro); color:#002259; }
.pc-saludo .pc-cta:hover{ background:var(--pc-oro-osc); color:#fff; opacity:1; }

/* botones de acción en dorado (Pagar ahora, Ver y pagar, Ver un video); los demás, de borde */
.pc-b.p{ background:var(--pc-oro); border-color:var(--pc-oro); color:#002259; }
.pc-b.p:hover{ background:var(--pc-oro-osc); border-color:var(--pc-oro-osc); color:#fff; opacity:1; }
.pc-ver{ background:var(--pc-oro); color:#002259; }

/* barra del tiempo del servicio y etiquetas de los grupos de videos */
.pc-barra i{ background:linear-gradient(90deg,#002259,#2f5fb0); }
html[data-bs-theme="dark"] .pc-barra i{ background:linear-gradient(90deg,#2f5fb0,#8fb3f0); }
.pc-vgrupo{ color:var(--pc-azul-medio); }
.pc-vmodal{ background:#000f2e; }
.pc-vmodal .modal-title{ font-family:'Inter',system-ui,sans-serif; }

/* banda de informes (opcional en Altexsa): azul marino con resplandor dorado */
.pc-inf-band{ background:#000f2e; font-family:'Inter',system-ui,sans-serif; }
.pc-inf-band::before{ background:radial-gradient(circle at 40% 40%, rgba(237,160,0,.35), rgba(18,58,122,.35) 45%, transparent 70%); }
.pc-inf-band::after{ border-color:rgba(237,160,0,.35); }
.pc-inf-kicker, .pc-inf-c .n, .pc-inf-link{ color:#f2c14e; }
.pc-inf-h, .pc-inf-c .n, .pc-inf-sec, .pc-inf-item-cab h3{ font-family:'Inter',system-ui,sans-serif; }
.pc-grad{ background:linear-gradient(90deg,#f2c14e,#eda000); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pc-inf-b.p{ background:var(--pc-oro); border-color:var(--pc-oro); color:#002259; }
.pc-inf-ico{ background:rgba(237,160,0,.10); border-color:rgba(237,160,0,.35); }
.pc-inf-ico svg{ stroke:#f2c14e; }
/* modo oscuro: altexsa.css pinta todos los títulos (h1-h6) en azul marino y el selector de idioma en blanco */
html[data-bs-theme="dark"] #sidebarMenu :is(h5,h6), html[data-bs-theme="dark"] #sidebarMenu strong{ color:var(--pc-tinta) !important; }
html[data-bs-theme="dark"] #sidebarMenu h5{ color:var(--pc-suave) !important; }
/* modo oscuro: altexsa.css fija los colores de Bootstrap en :root (también en oscuro) y quedaban letras azul
   marino sobre fondo oscuro (selector de idioma, tablas de cobros, formularios). Aquí se devuelven en oscuro. */
html[data-bs-theme="dark"]{ --bs-body-color:#eaf0fb; --bs-body-color-rgb:234,240,251; --bs-body-bg:#050b1f; --bs-body-bg-rgb:5,11,31;
  --bs-border-color:#1f2c52; --bs-link-color:#8fb3f0; --bs-link-color-rgb:143,179,240; --bs-link-hover-color:#f2c14e;
  --bs-secondary-color:#a3b0cf; --bs-tertiary-bg:#0d1733; --bs-secondary-bg:#0d1733; }
html[data-bs-theme="dark"] :is(h1,h2,h3,h4,h5,h6,.card-header,.card-title,.page-header,.h6){ color:var(--pc-tinta); }
html[data-bs-theme="dark"] header :is(.ts-wrapper, .ts-control, .ts-dropdown){ background:var(--pc-panel) !important; color:var(--pc-tinta) !important; border-color:var(--pc-borde) !important; }
/* teléfono: el logo de Altexsa también arriba (de fábrica, en pantallas chicas sale solo el nombre en texto) */
@media (max-width: 575.98px){
  .navbar-brand > span.d-sm-none{ display:none !important; }
  html:not([data-bs-theme="dark"]) .navbar-brand img.hide-theme-dark,
  html[data-bs-theme="dark"] .navbar-brand img.hide-theme-light{ display:block !important; height:34px; width:auto; }
}

/* guías escritas en la tarjeta de videotutoriales: son enlaces, no botones */
a.pc-vfila{ color:var(--pc-tinta); text-decoration:none; }
a.pc-vfila:hover{ color:var(--pc-tinta); }
.pc-vlisto:hover span:first-of-type{ color:var(--pc-azul); }