/* =========================================================
   CISCF · Capa de diseño 2026
   Se carga al final de las plantillas pública y del Campus.
   Para revertir: quitar el <link> a este archivo.
   ========================================================= */

/* ---------- Tipografía Inter alojada en el sitio ---------- */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Tokens de diseño ---------- */
:root{
  --ux-navy:#061a33;
  --ux-navy-2:#0b2a4a;
  --ux-gold:#c9a447;
  --ux-gold-2:#e4c66f;
  --ux-gold-ink:#8a6414;
  --ux-bg:#f4f6f9;
  --ux-line:#e2e8f0;
  --ux-text:#1f2a37;
  --ux-muted:#5b6b7f;
  --ux-success:#15803d;
  --ux-danger:#b42318;
  --ux-warn:#a15c07;

  --ux-fs-12:12px;
  --ux-fs-14:14px;
  --ux-fs-16:16px;
  --ux-fs-20:20px;
  --ux-fs-28:28px;
  --ux-fs-40:40px;
  --ux-fs-56:56px;

  --ux-r-btn:8px;
  --ux-r-card:16px;
  --ux-gutter:clamp(14px,2vw,23px);
  --ux-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:clip}
body,button,input,select,textarea{font-family:var(--ux-font)}
:focus-visible{outline:3px solid var(--ux-gold);outline-offset:2px}

/* =========================================================
   SITIO PÚBLICO
   ========================================================= */

/* Márgenes: hero, secciones de inicio y barra superior */
html body .home-container{
  width:min(1440px,100% - 2 * var(--ux-gutter));
  margin-inline:auto;
}
html body .ciscf-topbar-inner{
  width:min(1440px,100% - 2 * var(--ux-gutter));
  margin-inline:auto;
}

/* Barra superior y encabezado */
html body .ciscf-topbar-contact > a,
html body .ciscf-topbar-contact > span{font-size:var(--ux-fs-12)}
html body .ciscf-brand-portal{
  font-size:var(--ux-fs-12);
  letter-spacing:.28em;
}
html body .ciscf-nav a{font-size:var(--ux-fs-14);font-weight:600}
html body .ciscf-campus-button{
  padding:11px 18px;
  font-size:var(--ux-fs-14);
  border-radius:var(--ux-r-btn);
  letter-spacing:.02em;
}
html body .ciscf-campus-button svg{width:18px;height:18px}

/* Inicio */
html body .home-eyebrow,
html body .home-panel-label,
html body .home-section-head > small{font-size:var(--ux-fs-12)}
html body .home-btn{
  font-size:15px;
  border-radius:var(--ux-r-btn);
}
html body .home-trust-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
html body .home-trust-item strong{font-size:var(--ux-fs-28);line-height:1.1}
html body .home-trust-item span{font-size:var(--ux-fs-14);color:var(--ux-muted)}
@media (max-width:760px){
  html body .home-trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Tarjetas del catálogo (Cursos, Talleres, Diplomados, Congresos) */
html body .public-course-type{font-size:var(--ux-fs-12)}
html body .public-course-description{
  font-size:var(--ux-fs-14);
  line-height:1.55;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
html body .public-course-description b,
html body .public-course-description strong{font-weight:inherit}
html body .public-course-details > span{font-size:var(--ux-fs-12)}
html body .public-course-price > small{font-size:var(--ux-fs-12)}
html body .public-course-enroll{
  font-size:var(--ux-fs-14);
  border-radius:var(--ux-r-btn);
}
html body .public-course-card{border-radius:var(--ux-r-card)}

/* Catálogos con 1 o 2 programas (Congresos): tarjetas horizontales grandes */
@supports selector(:has(*)){
  html body .public-courses-grid:not(:has(> .public-course-card:nth-child(3))){
    grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));
  }
  html body .public-courses-grid:not(:has(> .public-course-card:nth-child(3))) > .public-course-card{
    display:grid;
    grid-template-columns:minmax(200px,44%) 1fr;
  }
  html body .public-courses-grid:not(:has(> .public-course-card:nth-child(3))) .public-course-cover{
    height:100%;
    min-height:100%;
  }
  html body .public-courses-grid:not(:has(> .public-course-card:nth-child(3))) .public-course-cover img{
    height:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    object-position:center top;
  }
  html body .public-courses-grid:not(:has(> .public-course-card:nth-child(3))) .public-course-description{
    -webkit-line-clamp:6;
  }
  @media (max-width:640px){
    html body .public-courses-grid:not(:has(> .public-course-card:nth-child(3))) > .public-course-card{
      grid-template-columns:1fr;
    }
  }
}

/* Licenciaturas y Consultoría: texto alineado a la izquierda, sin cortes de palabra */
html body .lic-card p,
html body [class^="lic-"] p,
html body [class^="cons-"] p,
html body .cons-note{
  text-align:left;
  -webkit-hyphens:manual;
  hyphens:manual;
}
html body .lic-card-visual > span,
html body .lic-card-visual > .lic-card-icon,
html body .lic-hero-academic-kicker,
html body .cons-hero-service-kicker{font-size:var(--ux-fs-12)}
html body .cons-card-action{font-size:var(--ux-fs-14)}
/* Consultoría: mismo borde en todas las tarjetas */
html body .cons-card{border:1px solid rgba(201,164,71,.55)}

/* Bachillerato: botón dorado como el resto del sitio */
html body a[href*="bachillerato"][style*="background"],
html body .bach-btn-primary{
  background:linear-gradient(135deg,var(--ux-gold-2),var(--ux-gold)) !important;
  color:var(--ux-navy) !important;
}

/* Pie de página */
html body .ciscf-footer{
  padding:0 0 calc(96px + env(safe-area-inset-bottom));
  font-size:var(--ux-fs-14);
}
.ux-footer{
  width:min(1440px,100% - 2 * var(--ux-gutter));
  margin-inline:auto;
  padding:48px 0 28px;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:32px;
  color:#c9d4e2;
}
.ux-footer h4{
  margin:0 0 14px;
  color:#fff;
  font-size:var(--ux-fs-14);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.ux-footer p{margin:0 0 10px;line-height:1.6;font-size:var(--ux-fs-14)}
.ux-footer ul{list-style:none;margin:0;padding:0}
.ux-footer li{margin:0 0 9px}
.ux-footer a{color:#c9d4e2;text-decoration:none;font-size:var(--ux-fs-14)}
.ux-footer a:hover{color:var(--ux-gold-2)}
.ux-footer-brand{display:flex;gap:14px;align-items:flex-start}
.ux-footer-brand img{width:56px;height:56px;flex:none}
.ux-footer-brand strong{display:block;color:#fff;font-size:var(--ux-fs-16);line-height:1.3;margin-bottom:6px}
.ux-footer-bottom{
  width:min(1440px,100% - 2 * var(--ux-gutter));
  margin-inline:auto;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  font-size:var(--ux-fs-12);
  color:#9fb0c4;
}
@media (max-width:900px){
  .ux-footer{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .ux-footer{grid-template-columns:1fr}
}

/* Botón flotante de WhatsApp con el logo oficial */
html body .ciscf-whatsapp{
  background:#25d366;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
html body .ciscf-whatsapp svg{width:30px;height:30px;fill:#fff}

/* Asistente: escudo en lugar de la caricatura */
html body .ciscf-v5-launcher-avatar{
  background:#fff url("../images/logo-oficial-256.png") center/86% no-repeat !important;
  border:2px solid var(--ux-gold);
}
html body .ciscf-v5-launcher-avatar > *{display:none !important}
html body .ciscf-v5-launcher-copy > small{font-size:var(--ux-fs-12)}
html body .ciscf-v5-avatar .ciscf-v5-torso,
html body .ciscf-v5-avatar .ciscf-v5-head,
html body .ciscf-v5-avatar .ciscf-v5-cap{display:none !important}
html body .ciscf-v5-avatar{
  background:radial-gradient(circle at 50% 42%,rgba(201,164,71,.25),transparent 62%) !important;
}
html body .ciscf-v5-avatar::before{
  content:"";
  display:block;
  width:min(150px,70%);
  aspect-ratio:1/1;
  margin:12px auto 10px;
  background:url("../images/logo-oficial-256.png") center/contain no-repeat;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.35));
}
html body .ciscf-v5-status{font-size:var(--ux-fs-12)}

/* =========================================================
   CAMPUS
   ========================================================= */

/* Menú lateral: íconos SVG uniformes */
.internal-menu-icon.ux-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  font-size:0;
  color:currentColor;
}
.internal-menu-icon.ux-icon svg{width:19px;height:19px}
html body .internal-menu-label{font-size:var(--ux-fs-12)}
html body .internal-brand small{font-size:var(--ux-fs-12)}
html body .internal-menu-link > span[style]{font-size:var(--ux-fs-12) !important}

/* Cerrar sesión como enlace discreto */
html body .internal-logout{
  width:100%;
  padding:10px 12px;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#9fb0c4 !important;
  font-size:var(--ux-fs-14) !important;
  font-weight:600 !important;
  text-align:left;
  cursor:pointer;
}
html body .internal-logout:hover{color:#fff !important;text-decoration:underline}

/* Etiquetas pequeñas del Campus a 12 px */
html body .dashboard-hero-label,
html body .dashboard-program-badge,
html body .dashboard-stat > small,
html body .dashboard-stat > span,
html body .certificates-head > span,
html body .certificate-type,
html body .certificate-status,
html body .mc-header > span,
html body .mc-type,
html body .mc-meta > span,
html body .mc-progress-head > span,
html body .mc-progress-head > strong,
html body .payments-eyebrow,
html body .payment-folio,
html body .payment-status,
html body .payment-meta > span,
html body .notifications-head span,
html body .notification-top > span,
html body .play-heading > span,
html body .play-plan-label,
html body .play-poster-content > p,
html body .play-duration,
html body .play-price > span,
html body .play-streaming-heading > strong,
html body .play-red,
html body .tx-access-card > small,
html body .tx-access-card > span,
html body .tx-lesson-copy > small,
html body .tx-metric > small,
html body .tx-pay-status,
html body .tx-subject-meta > span,
html body .tx-badge,
html body .tx-doc-icon,
html body .tx-doc-status,
html body .tx-lesson-action{font-size:var(--ux-fs-12) !important}

/* Botones del Campus a 14 px */
html body .dashboard-program-button,
html body .certificate-actions > a,
html body .mc-enter,
html body .register-payment-button,
html body .payment-receipt-button,
html body .notification-action,
html body .notifications-head button,
html body .play-subscribe-button{
  font-size:var(--ux-fs-14) !important;
  letter-spacing:.02em;
  border-radius:var(--ux-r-btn);
}

/* Mis constancias */
html body .certificate-meta > span{
  font-size:13px !important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--ux-muted);
}
html body .certificate-card p,
html body .certificates-section p{font-size:var(--ux-fs-14)}

/* Mis pagos */
html body .payment-notice{font-size:var(--ux-fs-14) !important;line-height:1.5}
html body .payment-notice > strong{font-size:var(--ux-fs-14) !important}
html body .payments-section table th{font-size:var(--ux-fs-12) !important}
html body .payments-section table td{font-size:var(--ux-fs-14) !important}
.ux-pay-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 16px;
}
.ux-pay-filters button{
  padding:8px 14px;
  border:1px solid var(--ux-line);
  border-radius:999px;
  background:#fff;
  color:var(--ux-text);
  font:600 var(--ux-fs-14)/1 var(--ux-font);
  cursor:pointer;
}
.ux-pay-filters button[aria-pressed="true"]{
  background:var(--ux-navy);
  border-color:var(--ux-navy);
  color:#fff;
}
.ux-retry{
  display:inline-flex;
  margin-top:10px;
  padding:9px 14px;
  border-radius:var(--ux-r-btn);
  background:var(--ux-navy);
  color:#fff !important;
  font-weight:700;
  font-size:var(--ux-fs-14);
  text-decoration:none;
}

/* Notificaciones: texto legible, alineado y recortado */
html body .notification-icon{font-size:0 !important}
html body .notification-icon::before{
  content:"";
  display:block;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--ux-gold);
}
html body .notification-card:not(.unread) .notification-icon::before{background:var(--ux-line)}
html body .notification-body p{
  text-align:left !important;
  white-space:pre-line;
  font-size:var(--ux-fs-14);
  line-height:1.6;
  overflow-wrap:anywhere;
}
html body .notification-body.ux-collapsed p{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
html body .notification-top strong{font-size:var(--ux-fs-16);line-height:1.35}
.ux-more{
  margin:6px 0 10px;
  padding:0;
  border:0;
  background:none;
  color:var(--ux-gold-ink);
  font:700 var(--ux-fs-14)/1.4 var(--ux-font);
  cursor:pointer;
}

/* Mis datos: zona para subir la foto con vista previa */
html body .profile-photo-file{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.ux-drop{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px;
  margin:4px 0 12px;
  border:2px dashed #c8d2df;
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  transition:border-color .15s,background .15s;
}
.ux-drop:hover,.ux-drop.is-over{border-color:var(--ux-gold);background:#fffaf0}
.ux-drop img{
  width:64px;
  height:64px;
  border-radius:50%;
  object-fit:cover;
  background:#eef2f7;
  flex:none;
}
.ux-drop strong{display:block;font-size:var(--ux-fs-14);color:var(--ux-text)}
.ux-drop small{display:block;font-size:var(--ux-fs-12);color:var(--ux-muted);margin-top:3px}

/* Mi Titulación: el expediente contractual con el mismo estilo de botón */
.ux-tx-contract{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
}

/* CISCF PLAY: fondo oscuro de borde a borde */
html body .internal-content:has(.play-streaming-heading),
html body .internal-content:has(.play-heading){
  background:#050b16;
}

/* Ajustes tras prueba en vivo (15/10/2026) */
html body .ciscf-nav > a:not(.ciscf-campus-button){font-size:14px}
@media (max-width:1250px){html body .ciscf-nav > a:not(.ciscf-campus-button){font-size:13px}}
@media (max-width:1100px){html body .ciscf-nav > a:not(.ciscf-campus-button){font-size:12px}}
html body .ciscf-brand-portal{font-size:12px;letter-spacing:.16em}
html body a[style*="background:#edc546"]{
  background:linear-gradient(135deg,#e4c66f,#c9a447) !important;
  border-radius:8px !important;
}

/* Asistente: ocultar todas las piezas de la caricatura */
html body .ciscf-v5-launcher-avatar::before,
html body .ciscf-v5-launcher-avatar::after{display:none !important;content:none !important}
html body .ciscf-v5-avatar > :not(.ciscf-v5-glow):not(.ciscf-v5-status){display:none !important}
html body .cons-service-body > p, html body .cons-card p, html body .cons-note, html body [class^="lic-"] p{
  text-align:left !important; text-align-last:auto !important; -webkit-hyphens:manual !important; hyphens:manual !important;
}

/* Encabezado entre 1101 y 1250 px: que el nombre no se encime con el menu */
@media (max-width:1250px){
  html body .ciscf-nav > a:not(.ciscf-campus-button){font-size:12px}
  html body .ciscf-brand-name, html body .ciscf-brand-name span{font-size:15px !important}
  html body .ciscf-brand-portal{letter-spacing:.12em}
}
html body .cons-card:not(.cons-card-with-image) > p,
html body .cons-card.cons-card-with-image p{text-align:left !important;text-align-last:auto !important;hyphens:manual !important}

/* =========================================================
   Sistema visual unificado (referencia: página principal)
   ========================================================= */
:root{
  --ux-navy:#001321;
  --ux-navy-2:#0b3552;
  --ux-gold:#d39a29;
  --ux-gold-2:#efc75e;
  --ux-gold-ink:#a87117;
  --ux-muted:#637282;
  --ux-bg:#f4f7f9;
  --ux-text:#001321;
}

/* Botón principal: el mismo dorado en degradado de la página principal */
html body a.lic-button,
html body a.cons-button,
html body a[href][style*="background:#efc75e"],
html body .public-course-enroll.ux-gold{
  background:linear-gradient(135deg,#efc75e,#c98b20) !important;
  color:#071727 !important;
  border:0 !important;
  border-radius:8px !important;
  font-size:15px !important;
  font-weight:900 !important;
  letter-spacing:0 !important;
}

/* Títulos principales con la misma letra, peso y espaciado */
html body main section h1[style]{
  font-size:clamp(40px,3.7vw,56px) !important;
  font-weight:850 !important;
  letter-spacing:-2px !important;
  line-height:1.04 !important;
}
html body .public-program-hero h1,
html body .lic-hero h1,
html body .cons-hero h1{
  font-size:clamp(32px,3vw,44px);
  font-weight:850;
  letter-spacing:-1.5px;
}
html body main h2{letter-spacing:-.02em}

/* Texto secundario en el mismo gris */
html body .public-course-description,
html body .lic-card p,
html body .cons-service-body > p{color:#637282}
html body .lic-bottom p, html body .cons-cta p{text-align:center !important}

/* CISCF-MENU-UNIFY-V1 */
.internal-menu-icon.ux-icon svg{width:20px;height:20px;display:block}
.internal-sidebar-footer a,.internal-sidebar-footer .internal-logout{display:flex!important;align-items:center;gap:12px;width:100%;padding:10px 14px!important;margin:0!important;border:0!important;background:none!important;font:inherit;font-size:14px!important;font-weight:700!important;color:rgba(255,255,255,.75)!important;text-align:left;border-radius:12px;cursor:pointer;text-decoration:none}
.internal-sidebar-footer a:hover,.internal-sidebar-footer .internal-logout:hover{background:rgba(255,255,255,.08)!important;color:#fff!important}
.internal-sidebar-footer svg{width:18px;height:18px;flex:none}