/* ================================================================
   MDK ORIENTE — MASTER STYLESHEET
   Reemplaza style.css y dojo-system.css
   ================================================================ */

/* ── Variables del sistema (Light mode por defecto) ── */
:root {
  --verde: rgb(78, 142, 101);
  --verde-dk: rgb(55, 105, 74);
  --verde-lt: rgba(78, 142, 101, 0.1);
  --verde-mid: rgba(78, 142, 101, 0.22);
  --rojo: rgb(203, 68, 74);
  --rojo-dk: rgb(160, 45, 50);
  --rojo-lt: rgba(203, 68, 74, 0.09);
  --gris-bg: #f4f5f4;
  --borde: #e2e6e3;
  --texto: #1c1f1d;
  --muted: #6b7570;
  --blanco: #ffffff;
  --radio: 12px;
  --shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
  --shadow-h: 0 6px 28px rgba(0, 0, 0, 0.13);
  --fade-color: #ffffff;
}

/* ── Dark mode: actualiza TODAS las variables de una vez ── */
.dark-mode {
  --gris-bg: #121212;
  --borde: #2a2a2a;
  --texto: #e6e6e6;
  --muted: #888888;
  --blanco: #1e1e1e;
  --verde-lt: rgba(78, 142, 101, 0.18);
  --rojo-lt: rgba(203, 68, 74, 0.15);
  --fade-color: #000000;
  --shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
  --shadow-h: 0 6px 28px rgba(0, 0, 0, 0.5);
  background-color: #121212 !important;
  color: #e6e6e6 !important;
}

/* ================================================================
   RESET & GLOBAL
   ================================================================ */
html,
body {
  overflow-x: auto;
  font-family: "Noto Sans KR", sans-serif;
  background: var(--gris-bg);
  transition:
    background-color 0.2s,
    color 0.2s;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
}

.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
  color: #e4e4e4;
}

#text-info {
  font-size: 18px;
}
#text-footer {
  font-size: 14px;
}

.container-fluid,
.row {
  margin: 0 !important;
  padding: 0 !important;
}
.text-justify {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* ================================================================
   NAVBAR
   ================================================================ */
.navbar.fixed-top {
  transition: top 0.3s ease;
}

.dark-mode .navbar a {
  color: #04c43d !important;
}

.dark-mode .navbar,
.dark-mode .footer,
.dark-mode .lineainfo {
  background-color: #1a1a1a !important;
}
.dropdown-menu {
  z-index: 9999 !important;
}

/* ================================================================
   FLASH PROMO BANNER
   ================================================================ */
#flashBanner {
  position: fixed;
  top: 78px; /* navbar 56px + barra acento 22px */
  left: 0;
  width: 100%;
  z-index: 1041;
  display: none;
}

@media (max-width: 991px) {
  #flashBanner {
    top: 60px; /* móvil: sin barra acento */
  }
}
body.flash-activo {
  padding-top: 116px !important; /* 78px navbar + 38px banner (36px inner + 2px progress) */
}

@media (max-width: 991px) {
  body.flash-activo {
    padding-top: 102px !important; /* 60px navbar + 42px banner (móvil es 40px + 2px) */
  }
}
/* ================================================================
   DARK MODE — elementos específicos
   ================================================================ */
.dark-mode .card,
.dark-mode .dropdown-menu,
.dark-mode .dropdown-item {
  background-color: #1e1e1e !important;
  color: #fff !important;
}
.dark-mode #foto-oriente-1,
.dark-mode #foto-oriente-2,
.dark-mode #foto-oriente2 {
  filter: invert(0);
}
.dark-mode #dojo,
.dark-mode #meditacion {
  filter: invert(1);
}
.dark-mode a #btn-inicio {
  color: white !important;
}

.dark-mode .modal-header .btn-close {
  filter: invert(1);
}
.dark-mode #flashPanel {
  background-color: #2a2a2a;
  color: #f8f9fa;
  border: 1px solid #444;
}
.dark-mode #flashPanel strong {
  color: #ffffff;
}
.dark-mode #flashPanel span {
  color: #cccccc;
}
.dark-mode .btn.btn-secondary {
  background-color: #555;
  color: #111;
  border: 1px solid #666;
}
.dark-mode .btn.btn-success {
  background-color: #04c43d;
  color: #121212;
  border: 1px solid #029936;
}
.dark-mode table#doctables,
.dark-mode table#doctables thead th {
  color: #e0e0e0;
}
.dark-mode .dataTables_wrapper {
  color: #ddd;
}

/* ================================================================
   HANGUL GLOBAL
   ================================================================ */
.hangul-global {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: space-evenly;

    writing-mode: vertical-rl;
    text-orientation: mixed;

    font-weight: 900;
    color: var(--verde);
    opacity: 0.08;

    font-size: clamp(3rem, 6vw, 5rem);
    letter-spacing: 0.2em;

    pointer-events: none;
    user-select: none;

    z-index: 10;
}
/* ================================================================
   IMÁGENES / VIDEOS
   ================================================================ */
#foto-oriente-1 {
  filter: invert(1);
  aspect-ratio: 1/1;
  transition: filter 0.3s ease;
}
#foto-oriente-2 {
  filter: invert(1);
  aspect-ratio: 9/3;
  transition: filter 0.3s ease;
}
.full-screen-section {
  min-height: 70vh;
  height: auto;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  position: relative;
}
.scroll-text {
  height: 100%;
  overflow-y: auto;
  padding-right: 15px;
}
video {
  max-width: 100vw;
}
@media (max-width: 768px) {
  .full-screen-section {
    height: auto;
    padding: 2rem 1rem;
  }
  .scroll-text {
    max-height: none;
    overflow-y: visible;
  }
  .col-md-5 img {
    max-width: 100%;
    height: auto;
  }
}
@media (min-width: 768px) {
  .col-md-5 {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.col-7 {
  display: flex;
  justify-content: center;
  align-items: end;
}
.image-container,
.video-container {
  position: relative;
}
.fade-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to top, var(--fade-color), transparent);
}

/* ================================================================
   FORM SWITCHES (rol profesor/admin)
   ================================================================ */
.form-check-input.rol:checked + .form-check-label .switch-text::after {
  content: "ADMIN";
  margin-left: 5px;
  color: oklab(87.332% -0.2105 0.12512 / 0.5);
}
.form-check-input + .form-check-label .switch-text::after {
  content: "PROFESOR";
  margin-left: 5px;
  color: rgba(255, 0, 0, 0.5);
}

/* ================================================================
   CARDS (públicas)
   ================================================================ */
.card-hover {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  cursor: pointer;
}
.card-hover:hover {
  transform: scale(1.05);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  z-index: 2;
}
.card {
  max-width: 400px;
  min-height: 350px;
}
.card-img-top {
  object-fit: cover;
}
.card-body {
  min-height: 150px;
}
.card-escuela {
  min-height: 180px !important;
  max-height: 180px !important;
}
.card-escuela .card-body {
  min-height: auto !important;
  max-height: auto !important;
  padding: 0.75rem;
}
.card--table {
  max-width: none;
  min-height: auto;
}
#contenedorProfs .card {
  width: 100%;
  height: 100%;
}
#contenedorProfs .card-img-top {
  width: 100%;
  height: auto;
  object-fit: cover;
}
#contenedorProfs .card-body p {
  max-height: 80px;
  overflow: hidden;
}
#contenedorProfs .card-body a.btn {
  width: 100%;
}

/* ================================================================
   DOJO CARD (card con marca de agua, usada en tablas y calendario)
   ================================================================ */
.dojo-card {
  position: relative;
  border: 0.5px solid #e9e9e9;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
.dojo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/img/oriente1.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 280px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}
.dojo-card > * {
  position: relative;
  z-index: 1;
}
body:not(.dark-mode) .dojo-card::after {
  opacity: 0.2;
  filter: brightness(0);
}
.dark-mode .dojo-card {
  background: #1e1e1e;
  border: 1px solid #2a2a2a;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.dark-mode .dojo-card::after {
  opacity: 0.075;
  filter: brightness(0) invert(1);
}
.dojo-card.table-card {
  overflow: visible;
  z-index: 5;
}

.dojo-header {
  text-align: center;
  font-weight: 600;
  letter-spacing: 4px;
  font-size: 0.85rem;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ddd;
  color: #111;
}
.dark-mode .dojo-header {
  color: #eaeaea;
  border-bottom: 1px solid #2a2a2a;
}

/* ================================================================
   FULLCALENDAR
   ================================================================ */
.fc-toolbar-title {
  font-weight: 600;
  font-size: 1.4rem;
  color: #111;
  text-transform: uppercase;
}
.dark-mode .fc-toolbar-title {
  color: #ffffff;
}
.fc-daygrid-day {
  border: 1px solid #f0f0f0;
  background: transparent;
}
.dark-mode .fc-daygrid-day {
  border: 1px solid #1c1c1c;
}
.fc-daygrid-day:hover {
  background: rgba(0, 0, 0, 0.02);
}
.dark-mode .fc-daygrid-day:hover {
  background: rgba(255, 255, 255, 0.03);
}
.fc-daygrid-day-number {
  color: #222;
}
.dark-mode .fc-daygrid-day-number {
  color: #cccccc;
}
.fc-day-today {
  background-color: rgba(0, 0, 0, 0.04) !important;
}
.dark-mode .fc-day-today {
  background-color: rgba(255, 255, 255, 0.05) !important;
}
#calendar,
#calendar2 {
  width: 100% !important;
  max-width: 100% !important;
}
.fc-view-harness {
  width: 100% !important;
}
#calendar *,
#calendar2 * {
  font-weight: inherit !important;
}
#calendar .fc table,
#calendar2 .fc table {
  font-weight: normal !important;
}
#calendar .fc-daygrid-day-number,
#calendar2 .fc-daygrid-day-number {
  font-weight: normal !important;
  text-decoration: none !important;
}
#calendar .fc-col-header-cell,
#calendar2 .fc-col-header-cell {
  font-weight: normal !important;
}

/* ================================================================
   DATATABLES
   ================================================================ */
.dataTables_wrapper {
  width: 100%;
}
table.dataTable {
  position: relative;
  font-size: 12px;
  border-collapse: collapse;
  z-index: 5 !important;
  width: 100% !important;
  min-height: 180px;
}
table.dataTable td {
  white-space: nowrap;
}
table.dataTable thead th {
  background: var(--verde) !important;
  color: #fff !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  border: none !important;
  padding: 10px 12px !important;
  white-space: nowrap;
}
table.dataTable thead th:first-child {
  border-left: 4px solid var(--verde-dk) !important;
}
table.dataTable tbody tr {
  border-bottom: 1px solid var(--borde);
  transition: background 0.12s;
}
table.dataTable tbody tr:last-child {
  border-bottom: none;
}
table.dataTable tbody tr:hover {
  background: var(--verde-lt) !important;
  cursor: pointer;
}
table.dataTable tbody td {
  padding: 9px 12px;
  vertical-align: middle;
  color: var(--texto);
  border: none !important;
}
table.dataTable tbody td:first-child {
  font-weight: 700 !important;
  color: var(--rojo) !important;
  white-space: nowrap;
}

.dark-mode table.dataTable thead th {
  background-color: #0b3a2a !important;
}
.dark-mode table.dataTable tbody td {
  color: #d4d4d4;
}
.dark-mode table.dataTable tbody tr {
  border-color: #2a2a2a;
}
.dark-mode table.dataTable tbody tr:hover {
  background: rgba(78, 142, 101, 0.12) !important;
}

.dataTables_filter input {
  border: 1.5px solid var(--borde) !important;
  border-radius: 7px !important;
  padding: 5px 10px !important;
  font-size: 0.8rem !important;
  outline: none !important;
  transition: border-color 0.15s;
  background: var(--blanco);
  color: var(--texto);
}
.dataTables_filter input:focus {
  border-color: var(--verde) !important;
}
.dataTables_length select {
  border: 1.5px solid var(--borde) !important;
  border-radius: 7px !important;
  padding: 4px 8px !important;
  font-size: 0.8rem !important;
  background: var(--blanco);
  color: var(--texto);
}
.dataTables_info {
  font-size: 0.74rem;
  color: var(--muted);
}
.paginate_button {
  border-radius: 6px !important;
  font-size: 0.75rem !important;
  padding: 3px 9px !important;
}
.paginate_button.current,
.paginate_button.current:hover {
  background: var(--verde) !important;
  border-color: var(--verde) !important;
  color: #fff !important;
}
.paginate_button:hover {
  background: var(--verde-lt) !important;
  border-color: var(--verde) !important;
  color: var(--verde) !important;
}

/* Pills de tabla */
.pill-rol {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.pill-rol.admin {
  background: rgba(203, 68, 74, 0.1);
  color: var(--rojo);
}
.pill-rol.prof {
  background: var(--verde-lt);
  color: var(--verde-dk);
}
.pill-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 700;
  white-space: nowrap;
}
.pill-status.activo {
  background: var(--verde-lt);
  color: var(--verde-dk);
}
.pill-status.inactivo {
  background: var(--rojo-lt);
  color: var(--rojo);
}
.pill-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 600;
  background: var(--gris-bg);
  border: 1px solid var(--borde);
  color: var(--muted);
  margin: 1px;
  white-space: nowrap;
}

/* Botones de opciones en tabla */
.btn-tbl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1.5px solid;
  cursor: pointer;
  background: transparent;
  transition:
    background 0.12s,
    color 0.12s;
  white-space: nowrap;
  font-family: inherit;
}
.btn-tbl-edit {
  border-color: var(--verde);
  color: var(--verde);
}
.btn-tbl-edit:hover {
  background: var(--verde);
  color: #fff;
}
.btn-tbl-del {
  border-color: var(--rojo);
  color: var(--rojo);
}
.btn-tbl-del:hover {
  background: var(--rojo);
  color: #fff;
}
.btn-tbl-view {
  border-color: var(--muted);
  color: var(--muted);
}
.btn-tbl-view:hover {
  background: var(--muted);
  color: #fff;
}

/* ================================================================
   PAGE HERO
   ================================================================ */
.dojo-hero {
  background: var(--verde);
  color: #fff;
  padding: 1.6rem 2rem 1.4rem;
  position: relative;
  overflow: hidden;
}
.dojo-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 22px,
      rgba(255, 255, 255, 0.03) 22px,
      rgba(255, 255, 255, 0.03) 23px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 22px,
      rgba(255, 255, 255, 0.03) 22px,
      rgba(255, 255, 255, 0.03) 23px
    );
  pointer-events: none;
}
.dojo-hero::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 48px solid rgba(255, 255, 255, 0.07);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.hero-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.hero-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.3px;
}
.hero-sub {
  font-size: 0.77rem;
  opacity: 0.72;
  margin: 3px 0 0;
}
.hero-kr,
.hero-koreano {
  margin-left: auto;
  font-size: 0.7rem;
  opacity: 0.45;
  letter-spacing: 2px;
  font-style: italic;
  flex-shrink: 0;
}

/* ================================================================
   TOOLBAR
   ================================================================ */
.dojo-toolbar {
  max-width: 1500px;
  margin: 1.5rem auto 0.9rem;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  border: 1.5px solid var(--borde);
  background: var(--blanco);
  text-decoration: none;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.btn-back:hover {
  border-color: var(--verde);
  color: var(--verde);
  text-decoration: none;
}
.toolbar-spacer {
  flex: 1;
}
.btn-refresh {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1.5px solid var(--borde);
  background: var(--blanco);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition:
    border-color 0.15s,
    color 0.15s,
    transform 0.2s;
}
.btn-refresh:hover {
  border-color: var(--verde);
  color: var(--verde);
  transform: rotate(180deg);
}
.btn-agregar {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.52rem 1.15rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  background: var(--verde);
  border: none;
  cursor: pointer;
  transition:
    background 0.15s,
    box-shadow 0.15s;
  box-shadow: 0 2px 8px rgba(78, 142, 101, 0.3);
}
.btn-agregar:hover {
  background: var(--verde-dk);
  box-shadow: 0 4px 16px rgba(78, 142, 101, 0.4);
}

/* ================================================================
   TABLA CARD
   ================================================================ */
.tabla-wrapper {
  max-width: 1800px;
  margin: 0 auto 3rem;
  padding: 0 1rem;
}
.table-responsive {
  overflow: auto !important;
  z-index: 9999 !important;
}
.tabla-card {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--shadow);
  overflow: visible;
}
.tabla-card > .tabla-card-head {
  border-radius: var(--radio) var(--radio) 0 0;
}
.tabla-card > *:last-child {
  border-radius: 0 0 var(--radio) var(--radio);
}
.tabla-card-head {
  padding: 1rem 1.4rem 0.8rem;
  border-bottom: 1px solid var(--borde);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.tch-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--verde-lt);
  color: var(--verde);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.tch-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--texto);
}
.tch-count {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--muted);
  background: var(--gris-bg);
  border: 1px solid var(--borde);
  border-radius: 20px;
  padding: 2px 10px;
}
.tabla-card .dataTables_wrapper {
  padding: 0.9rem 1.2rem 1rem;
  font-size: 0.8rem;
}
.dataTables_wrapper .dataTables_paginate {
  position: relative;
  z-index: 1 !important;
}
/* Ajustar según sea necesario para dar espacio al menú */
.dataTables_scrollBody {
  min-height: 200px;
}

/* ================================================================
   MODALES — FIX SCROLL + ESTILOS
   ================================================================ */
.modal-content {
  border: none !important;
  border-radius: 14px !important;
  /* ⚠️ NO poner overflow:hidden aquí — rompe el scroll del body */
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18) !important;
  display: flex !important;
  flex-direction: column !important;
}

/* FIX CRÍTICO: permite scroll en el cuerpo del modal */
.modal-dialog-scrollable .modal-body-dojo {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0; /* necesario para que flex+scroll funcione */
}

.modal-header-dojo {
  background: var(--verde);
  padding: 1rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: #fff;
  flex-shrink: 0;
}
.mh-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.mh-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
}
.mh-sub {
  font-size: 0.7rem;
  opacity: 0.7;
  margin: 1px 0 0;
}
.mh-close {
  margin-left: auto;
  filter: invert(1) brightness(2);
  opacity: 0.8;
}
.mh-close:hover {
  opacity: 1;
}

/* Compatibilidad con clases antiguas */
.modal-header-dojo .btn-close-white {
  margin-left: auto;
  filter: invert(1) brightness(2);
  opacity: 0.8;
}
.modal-header-dojo .btn-close-white:hover {
  opacity: 1;
}

.modal-body-dojo {
  background: var(--blanco);
  padding: 1.5rem 1.6rem;
  position: relative;
}
.modal-body-dojo::after {
  content: "태권도";
  position: absolute;
  bottom: 12px;
  right: 18px;
  font-size: 3.5rem;
  color: var(--verde);
  opacity: 0.04;
  font-weight: 900;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

.modal-seccion {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--borde);
}
.modal-seccion.mt {
  margin-top: 1.2rem;
}

.modal-body-dojo .form-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--texto);
  margin-bottom: 4px;
}
.modal-body-dojo .form-control,
.modal-body-dojo .form-select {
  font-size: 0.82rem;
  border: 1.5px solid var(--borde);
  border-radius: 8px;
  padding: 7px 11px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  background: var(--blanco);
  color: var(--texto);
}
.modal-body-dojo .form-control:focus,
.modal-body-dojo .form-select:focus {
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(78, 142, 101, 0.12);
  outline: none;
}

/* Select2 override */
.modal-body-dojo .select2-container--default .select2-selection--multiple {
  border: 1.5px solid var(--borde) !important;
  border-radius: 8px !important;
  min-height: 38px;
}
.modal-body-dojo
  .select2-container--default.select2-container--focus
  .select2-selection--multiple {
  border-color: var(--verde) !important;
  box-shadow: 0 0 0 3px rgba(78, 142, 101, 0.12) !important;
}
.modal-body-dojo .select2-container--default .select2-selection__choice {
  background-color: var(--verde) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 4px !important;
  font-size: 0.72rem !important;
}
.select2-dropdown {
  border: 1.5px solid var(--verde) !important;
  border-radius: 8px !important;
  font-size: 0.82rem;
}

/* ── Preview imagen — CUADRADA, muestra imagen completa ── */
.preview-wrapper {
  width: 100%;
  max-width: 220px;
  border-radius: 50%; /* CUADRADO, no circular */
  background: var(--gris-bg);
  border: 2.5px dashed var(--borde);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  overflow: hidden;
  transition: border-color 0.15s;
  min-height: 120px;
}
/* La imagen NO se recorta — se ve completa */
.preview-wrapper img {
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: contain; /* contain, no cover */
  display: block;
}
.preview-wrapper.has-img {
  border-color: var(--verde);
  border-style: solid;
  min-height: unset; /* se adapta a la imagen */
}
/* Variante ancha (para portadas de escuelas/promos) */
.preview-wrapper.wide {
  max-width: 100%;
  width: 100%;
  min-height: 160px;
  border-radius: 10px;
}
.preview-wrapper.wide img {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: contain;
}

.modal-footer-dojo {
  background: var(--gris-bg);
  border-top: 1px solid var(--borde);
  padding: 0.85rem 1.4rem;
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  flex-shrink: 0;
}
.btn-modal-cancel {
  padding: 0.5rem 1.1rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  border: 1.5px solid var(--borde);
  background: var(--blanco);
  cursor: pointer;
  font-family: inherit;
  transition:
    border-color 0.12s,
    color 0.12s;
}
.btn-modal-cancel:hover {
  border-color: var(--rojo);
  color: var(--rojo);
}
.btn-modal-save {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.2rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background: var(--verde);
  border: none;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(78, 142, 101, 0.3);
  transition:
    background 0.12s,
    box-shadow 0.12s;
}
.btn-modal-save:hover {
  background: var(--verde-dk);
  box-shadow: 0 4px 14px rgba(78, 142, 101, 0.4);
}

/* ── FIX Blog: editor Quill no se superpone al switch ── */
#editorBlog,
#editorBlogEdit {
  min-height: 150px;
  margin-bottom: 0;
}
.ql-container {
  border-radius: 0 0 8px 8px !important;
}
.ql-toolbar {
  border-radius: 8px 8px 0 0 !important;
}
.blog-switch-row {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--borde);
}

/* ================================================================
   ACCORDION (Preguntas Frecuentes)
   ================================================================ */
.accordion-item {
  border: none;
  margin-bottom: 6px;
}
.accordion-button {
  font-size: 0.87rem;
  font-weight: 600;
  background: var(--blanco) !important;
  color: var(--texto) !important;
  border: 1.5px solid var(--borde) !important;
  border-radius: 8px !important;
  padding: 0.85rem 1.1rem;
  box-shadow: none !important;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.accordion-button:not(.collapsed) {
  background: var(--verde-lt) !important;
  color: var(--verde-dk) !important;
  border-color: var(--verde) !important;
  border-radius: 8px 8px 0 0 !important;
}
.accordion-body {
  font-size: 0.84rem;
  line-height: 1.65;
  border: 1.5px solid var(--verde);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 1rem 1.1rem;
  background: var(--blanco);
}
.dojo-accordion-group {
  margin-bottom: 2rem;
}
.dojo-accordion-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.7rem 0.2rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--borde);
}
.dark-mode .accordion-button {
  background: var(--blanco) !important;
  border-color: var(--borde) !important;
  color: var(--texto) !important;
}
.dark-mode .accordion-button:not(.collapsed) {
  background: var(--verde-lt) !important;
}
.dark-mode .accordion-body {
  background: var(--blanco);
  border-color: var(--verde);
  color: var(--texto);
}

/* ================================================================
   LOGIN
   ================================================================ */
.login-wrapper {
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.login-card {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 16px;
  box-shadow: var(--shadow-h);
  width: 100%;
  max-width: 400px;
  overflow: hidden;
}
.login-head {
  background: var(--verde);
  padding: 2rem 2rem 1.6rem;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.login-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 18px,
    rgba(255, 255, 255, 0.03) 18px,
    rgba(255, 255, 255, 0.03) 36px
  );
  pointer-events: none;
}
.login-head-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto 1rem;
  position: relative;
  z-index: 1;
}
.login-head-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
  position: relative;
  z-index: 1;
}
.login-head-sub {
  font-size: 0.74rem;
  opacity: 0.7;
  margin: 4px 0 0;
  position: relative;
  z-index: 1;
}
.login-body {
  padding: 1.8rem;
}
.login-body .form-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--texto);
  margin-bottom: 4px;
}
.login-body .form-control {
  font-size: 0.85rem;
  border: 1.5px solid var(--borde);
  border-radius: 8px;
  padding: 9px 12px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  background: var(--blanco);
  color: var(--texto);
}
.login-body .form-control:focus {
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(78, 142, 101, 0.12);
  outline: none;
}
.btn-login {
  width: 100%;
  padding: 0.7rem;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  background: var(--verde);
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(78, 142, 101, 0.3);
  transition:
    background 0.15s,
    box-shadow 0.15s;
  font-family: inherit;
  letter-spacing: 0.3px;
}
.btn-login:hover {
  background: var(--verde-dk);
  box-shadow: 0 4px 14px rgba(78, 142, 101, 0.4);
}
.login-kr {
  text-align: center;
  font-size: 0.65rem;
  color: var(--muted);
  letter-spacing: 2px;
  font-style: italic;
  margin-top: 1rem;
}

/* ================================================================
   SECCIONES PÚBLICAS (index, escuelas, promos, calendario)
   ================================================================ */

/* Info strip del index */
.info-strip {
  background: var(--blanco);
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}
.info-strip-item {
  padding: 2rem 1.5rem;
  border-right: 1px solid var(--borde);
  text-align: center;
  transition: background 0.15s;
}
.info-strip-item:last-child {
  border-right: none;
}
.info-strip-item:hover {
  background: var(--verde-lt);
}
.info-strip-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  opacity: 0.85;
}
.info-strip-num {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--verde);
  margin: 0;
  letter-spacing: -1px;
}
.info-strip-text {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}
.dark-mode .info-strip {
  background: var(--blanco);
  border-color: var(--borde);
}
.dark-mode .info-strip-item {
  border-color: var(--borde);
}
.dark-mode .info-strip-num {
  color: var(--verde);
}

/* Sección "Bienvenido" */
.seccion-bienvenida {
  padding: 4rem 0;
}
.about-foto {
  border-radius: 12px;
  box-shadow: var(--shadow-h);
  object-fit: cover;
  width: 100%;
}
.about-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin-top: 0.75rem;
}
.seccion-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--verde);
  background: var(--verde-lt);
  border: 1px solid rgba(78, 142, 101, 0.25);
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 0.75rem;
}
.seccion-titulo-pub {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--texto);
  text-align: left;
  margin-bottom: 1.25rem;
}
.dark-mode .seccion-titulo-pub {
  color: var(--texto);
}

/* Blog strip en index */
.blog-strip-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 2.5rem 0 1.5rem;
}
.blog-strip-head h2 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
  text-align: left;
  color: var(--texto);
}
.blog-strip-head .bsh-kr {
  font-size: 0.65rem;
  color: var(--muted);
  letter-spacing: 2px;
  font-style: italic;
}

/* Sección pública de escuelas/promos */
.pub-hero {
  background: var(--verde);
  color: #fff;
  padding: 3rem 2rem 2.5rem;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.pub-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 24px,
    rgba(255, 255, 255, 0.03) 24px,
    rgba(255, 255, 255, 0.03) 48px
  );
  pointer-events: none;
}
.pub-hero-title {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -1px;
  position: relative;
  z-index: 1;
}
.pub-hero-sub {
  font-size: 0.9rem;
  opacity: 0.75;
  margin: 0.5rem 0 0;
  position: relative;
  z-index: 1;
}
/* Clase base para la marca de agua coreana */
.pub-hero-kr {
  position: absolute; /* Se posiciona respecto a .pub-hero */
  top: 50%; /* Lo bajamos a la mitad */
  transform: translateY(-50%); /* Lo centramos perfectamente en vertical */
  
  /* Efecto vertical para caracteres Hangul */
  writing-mode: vertical-lr;
  text-orientation: upright;
  white-space: nowrap;
  
  /* Estilos de marca de agua */
  font-size: 14px; /* Más grande para que parezca marca de agua */
  opacity: 0.15; /* Más transparente */
  letter-spacing: 15px; /* Separación entre las letras para más elegancia */
  font-weight: 700;
  margin: 0;
  z-index: 0; /* Para que quede de fondo */
  user-select: none; /* Evita que el usuario seleccione el texto por error */
}

/* Modificador Izquierdo */
.pub-hero-kr.left {
  left: 3rem; /* Distancia desde el borde izquierdo */
}

/* Modificador Derecho */
.pub-hero-kr.right {
  right: 3rem; /* Distancia desde el borde derecho */
}

/* Grid público */
.pub-grid {
  padding: 2.5rem 0 4rem;
}
.pub-section-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--borde);
  text-align: left;
}

/* ================================================================
   UTILITIES & MISC
   ================================================================ */
div.col-admin {
  height: 250px;
}
.swal2-container,
.mi-alerta {
  z-index: 200000 !important;
}
.hero-bottom-text {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
}
.blog-texto {
  white-space: pre-line;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1;
}
.modal-img-blog {
  width: 100%;
  height: 50vh;
  object-fit: contain;
}

@media (max-width: 768px) {
  .modal-dialog {
    max-width: 100% !important;
    margin: 0;
  }
  .modal-content {
    min-height: 100vh;
    border-radius: 0 !important;
  }
  .info-strip-item {
    border-right: none;
    border-bottom: 1px solid var(--borde);
  }
  .seccion-titulo-pub {
    text-align: center;
  }
  .pub-hero-title {
    font-size: 1.6rem;
  }
}

/* ================================================================
   MDK ORIENTE — ADICIONES CSS
   Pegar al final de oriente-master.css
   ================================================================ */

/* ── NAVBAR MEJORADA ─────────────────────────────────────── */
.oriente-navbar {
  /* Bootstrap bg-success bg-gradient: #198754 con gradiente diagonal */
  background-color: #198754 !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.15), rgba(0,0,0,0)) !important;
  border-bottom: none;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
  transition:
    top 0.3s ease,
    background 0.3s;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  z-index: 1045 !important;
}
.dark-mode .oriente-navbar {
  background-color: #0d4f31 !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,0)) !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

.navbar-logo {
  max-height: 38px;
  transition: filter 0.3s;
  filter: invert(1); /* logo blanco sobre verde */
}

/* Links de navegación */
.oriente-link {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  padding: 0.45rem 0.7rem !important;
  border-radius: 7px !important;
  transition:
    background 0.15s,
    color 0.15s !important;
  white-space: nowrap;
}
.oriente-link:hover,
.oriente-link:focus {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}
.oriente-link.active,
.oriente-link[aria-current="page"] {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}

/* Switch dark mode en navbar */
.navbar-dark-switch .form-check-input {
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
.navbar-dark-switch .form-check-input:checked {
  background-color: #04c43d;
  border-color: #04c43d;
}
.navbar-switch-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.75rem;
  cursor: pointer;
  margin-left: 4px;
}

/* Divisor vertical entre links y acceso */
.navbar-divider {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.25);
  vertical-align: middle;
  margin: 0 0.3rem;
}

/* Botón de acceso (login) */
.oriente-btn-login {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: var(--verde) !important;
  background: #fff !important;
  border: none !important;
  border-radius: 7px !important;
  padding: 0.38rem 0.9rem !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12) !important;
  transition:
    background 0.15s,
    box-shadow 0.15s !important;
  letter-spacing: 0.2px;
}
.oriente-btn-login:hover {
  background: #f0f0f0 !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18) !important;
  color: var(--verde-dk) !important;
}
.dark-mode .oriente-btn-login {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.dark-mode .oriente-btn-login:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* Badge de usuario con sesión */
.navbar-user-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 0.75rem;
  transition: background 0.15s;
}
.oriente-link:hover .navbar-user-badge {
  background: rgba(255, 255, 255, 0.32);
}

/* Toggler móvil */
.oriente-toggler {
  border-color: rgba(255, 255, 255, 0.5) !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
}
.oriente-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ── DROPDOWN ORIENTE ── */
.oriente-dropdown {
  border: 1px solid var(--borde) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14) !important;
  padding: 0.4rem !important;
  min-width: 220px !important;
  background: var(--blanco) !important;
  overflow: hidden;
}
.dark-mode .oriente-dropdown {
  background: #1e1e1e !important;
  border-color: #2a2a2a !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

.oriente-dropdown-header {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.4rem 0.7rem 0.5rem;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 0.3rem;
}

.oriente-dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.7rem !important;
  padding: 0.55rem 0.7rem !important;
  border-radius: 8px !important;
  font-size: 0.82rem !important;
  color: var(--texto) !important;
  transition: background 0.12s !important;
}
.oriente-dropdown-item:hover {
  background: var(--verde-lt) !important;
  color: var(--verde-dk) !important;
}
.oriente-dropdown-item strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
}
.oriente-dropdown-item small {
  display: block;
  font-size: 0.68rem;
  color: var(--muted);
  line-height: 1.3;
  margin-top: 1px;
}
.oriente-dropdown-item.text-danger:hover {
  background: var(--rojo-lt) !important;
  color: var(--rojo) !important;
}

.oriente-dd-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--gris-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--verde);
  flex-shrink: 0;
}
.dark-mode .oriente-dd-icon {
  background: #2a2a2a;
}
.oriente-dropdown-item:hover .oriente-dd-icon {
  background: var(--verde-lt);
}
.oriente-dropdown-item.text-danger:hover .oriente-dd-icon {
  background: var(--rojo-lt);
}

.oriente-dd-divider {
  margin: 0.3rem 0;
  border-color: var(--borde);
}

/* ── BARRA ACENTO COREANO ── */
.oriente-navbar-accent {
  position: fixed;
  top: 56px;
  left: 0;
  width: 100%;
  height: 30px;
  background: #146c43; /* bootstrap success darker shade */
  z-index: 1044;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}
.dark-mode .oriente-navbar-accent {
  background: #0a2215;
}
.oriente-accent-sep {
  opacity: 0.3;
}

/* Compensación de altura total (navbar + barra acento) */
body {
  padding-top: 78px !important;
}
.oriente-navbar .navbar-nav .nav-link.oriente-link {
    font-size: 15px !important;
    color: #000 !important;
}

.oriente-navbar .navbar-nav .nav-link.oriente-link:hover,
.oriente-navbar .navbar-nav .nav-link.oriente-link:focus,
.oriente-navbar .navbar-nav .nav-link.oriente-link.active {
    color: #000 !important;
}

@media (max-width: 991px) {
  /* En móvil el collapse se abre hacia abajo */
  .oriente-navbar .navbar-collapse {
    background: var(--verde);
    margin: 0 -12px;
    padding: 0.5rem 1rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 0.4rem;
  }
  .dark-mode .oriente-navbar .navbar-collapse {
    background: #0e2d1a;
  }
  .navbar-divider {
    display: none;
  }

  /* Barra acento: solo se ve en desktop */
  .oriente-navbar-accent {
    display: none;
  }
  body {
    padding-top: 60px !important;
  }
}

/* ── DARK MODE ajustes específicos navbar ── */
.dark-mode .oriente-link {
  color: rgba(200, 255, 220, 0.85) !important;
}
.dark-mode .oriente-link:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}
.dark-mode .oriente-dropdown-item:hover {
  background: rgba(78, 142, 101, 0.18) !important;
  color: var(--verde) !important;
}

/* ── FLASH BANNER ─────────────────────────────────────────── */
.flash-banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 36px;
  background: linear-gradient(90deg, #cb444a 0%, #a8222a 50%, #cb444a 100%);
  background-size: 200% 100%;
  animation: flashGradient 3s ease infinite;
  padding: 0 1rem;
  white-space: nowrap;
  overflow: hidden;
}

@keyframes flashGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.flash-icon {
  display: inline-flex;
  align-items: center;
  color: #ffe066;
  font-size: 0.8rem;
  animation: flashPulse 1s ease infinite;
  flex-shrink: 0;
}
@keyframes flashPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.15);
  }
}

.flash-text {
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.4px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.flash-cta {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  padding-left: 10px;
  flex-shrink: 0;
}

/* Barra de progreso decorativa */
.flash-progress {
  height: 2px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}
.flash-progress-bar {
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.55);
  transition: width 1s linear;
}

@media (max-width: 576px) {
  .flash-banner-inner {
    height: 40px;
  }
  .flash-cta {
    display: none;
  }
  .flash-text {
    font-size: 0.72rem;
  }
}

/* ── BOTÓN SCROLL TOP ─────────────────────────────────────── */
.oriente-btn-top {
  position: fixed;
  bottom: 90px;
  left: 16px;
  z-index: 1030;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  border: none;
  box-shadow: 0 3px 12px rgba(78, 142, 101, 0.4);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.25s,
    transform 0.25s,
    background 0.15s;
  pointer-events: none;
}
.oriente-btn-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  display: flex !important;
}
.oriente-btn-top:hover {
  background: var(--verde-dk);
  box-shadow: 0 5px 18px rgba(78, 142, 101, 0.55);
}
.oriente-btn-top:active {
  transform: scale(0.92);
}

/* ── WHATSAPP FAB ─────────────────────────────────────────── */
.oriente-whats-fab {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 1050;
  display: flex;
  align-items: center;
  flex-direction: row-reverse; /* FIX: icono queda a la derecha, label se expande hacia la izquierda */
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

/* Label flotante */
.whats-fab-label {
  background: #fff;
  color: #128c7e;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(12px); /* FIX: label se desliza desde la derecha (desde el ícono) hacia la izquierda */
  transition:
    opacity 0.2s,
    transform 0.2s;
  pointer-events: none;
}
.oriente-whats-fab:hover .whats-fab-label {
  opacity: 1;
  transform: translateX(0);
}

/* Botón circular */
.whats-fab-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  flex-shrink: 0;
  position: relative;
}
/* Anillo de pulso */
.whats-fab-icon::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.4);
  animation: whatsRing 2s ease-out infinite;
}
@keyframes whatsRing {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  80% {
    transform: scale(1.35);
    opacity: 0;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}
.oriente-whats-fab:hover .whats-fab-icon {
  transform: scale(1.08);
  box-shadow: 0 6px 22px rgba(37, 211, 102, 0.6);
}

/* ── POPOVER WHATSAPP ─────────────────────────────────────── */
/* Estilos del contenido del popover (inyectado en DOM por Bootstrap) */
.whats-popover-body {
  width: 240px;
  font-family: "Noto Sans KR", sans-serif;
}
.whats-pop-header {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #128c7e;
  margin: -9px -14px 12px; /* compensa el padding del popover */
  padding: 10px 14px;
  border-radius: 8px 8px 0 0;
}
.whats-pop-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #fff;
  flex-shrink: 0;
}
.whats-pop-name {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.whats-pop-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.75);
}
.whats-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ae65c;
  display: inline-block;
  animation: dotPulse 2s ease infinite;
}
@keyframes dotPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.whats-pop-bubble {
  background: #dcf8c6;
  border-radius: 0 8px 8px 8px;
  padding: 8px 10px;
  font-size: 0.75rem;
  color: #111;
  line-height: 1.5;
  margin-bottom: 10px;
  position: relative;
}
.whats-pop-bubble::before {
  content: "";
  position: absolute;
  top: 0;
  left: -6px;
  border-width: 0 6px 6px 0;
  border-style: solid;
  border-color: transparent #dcf8c6 transparent transparent;
}
.whats-pop-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.whats-input,
.whats-textarea {
  width: 100%;
  font-size: 0.78rem;
  border: 1.5px solid #e2e6e3;
  border-radius: 8px;
  padding: 6px 10px;
  background: #f9f9f9;
  color: #1c1f1d;
  font-family: inherit;
  transition: border-color 0.15s;
  outline: none;
  resize: none;
}
.whats-input:focus,
.whats-textarea:focus {
  border-color: #25d366;
}
.whats-send-btn {
  width: 100%;
  background: #25d366;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 0;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.whats-send-btn:hover {
  background: #1ebe5b;
}

/* Overrides al popover de Bootstrap para que coincida con el diseño */
.popover {
  border-radius: 12px !important;
  border: 1px solid #e2e6e3 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14) !important;
  overflow: hidden;
}
.popover-body {
  padding: 9px 14px 12px !important;
}
.popover-header {
  display: none !important;
} /* usamos nuestro header custom */

/* Dark mode ajustes */
.dark-mode .whats-fab-label {
  background: #1e1e1e;
  color: #25d366;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.dark-mode .whats-input,
.dark-mode .whats-textarea {
  background: #2a2a2a;
  border-color: #3a3a3a;
  color: #e6e6e6;
}
.dark-mode .whats-pop-bubble {
  background: #1a3d23;
  color: #e6e6e6;
}
.dark-mode .whats-pop-bubble::before {
  border-color: transparent #1a3d23 transparent transparent;
}

/* CONTENIDO ADMIN PANEL */
/* ── HERO HEADER ── */
.admin-hero {
  background: var(--verde);
  color: var(--blanco);
  padding: 2.5rem 2rem 2rem;
  position: relative;
  overflow: hidden;
}
.admin-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 18px,
    rgba(255, 255, 255, 0.03) 18px,
    rgba(255, 255, 255, 0.03) 36px
  );
  pointer-events: none;
}
.admin-hero::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 40px solid rgba(255, 255, 255, 0.1);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 980px;
  margin: 0 auto;
}
.hero-badge {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.hero-title {
  font-size: 1.45rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.3px;
}
.hero-sub {
  font-size: 0.82rem;
  opacity: 0.75;
  margin: 2px 0 0;
}
.hero-rol {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

/* DASHBOARD STYLES */
/* ---- Barra de carga AJAX ---- */
#dashLoadingBar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9999;
  background: var(--bs-primary, #0d6efd);
  width: 0%;
  opacity: 0;
  transition:
    width 0.5s ease,
    opacity 0.2s;
  border-radius: 0 2px 2px 0;
}
#dashLoadingBar.loading {
  opacity: 1;
}

/* ---- Topbar ---- */
.dash-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 1rem 0 0.75rem;
}
.dash-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dash-page-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}
.dash-escuela-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #e7f1ff;
  color: #0a58ca;
}
.dash-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-filter-row label {
  font-size: 0.8125rem;
  color: #6c757d;
  white-space: nowrap;
  margin: 0;
}

/* ---- KPI grid ---- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 1.25rem;
}
@media (max-width: 1100px) {
  .kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.kpi-card {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 14px 14px 12px;
  position: relative;
  overflow: hidden;
  border: none;
}
.kpi-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 2px 0 0 2px;
}
.kpi-card.kpi-green::before {
  background: #198754;
}
.kpi-card.kpi-blue::before {
  background: #0d6efd;
}
.kpi-card.kpi-amber::before {
  background: #fd7e14;
}
.kpi-card.kpi-red::before {
  background: #dc3545;
}
.kpi-card.kpi-purple::before {
  background: #6f42c1;
}
.kpi-card.kpi-gray::before {
  background: #6c757d;
}

.kpi-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: #6c757d;
  margin-bottom: 4px;
}
.kpi-value {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 2px;
}
.kpi-card.kpi-green .kpi-value {
  color: #198754;
}
.kpi-card.kpi-blue .kpi-value {
  color: #0d6efd;
}
.kpi-card.kpi-amber .kpi-value {
  color: #fd7e14;
}
.kpi-card.kpi-red .kpi-value {
  color: #dc3545;
}
.kpi-card.kpi-purple .kpi-value {
  color: #6f42c1;
}
.kpi-card.kpi-gray .kpi-value {
  color: #6c757d;
}
.kpi-sub {
  font-size: 0.6875rem;
  color: #adb5bd;
}

/* ---- Secciones / tablas ---- */
.dash-section {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  margin-bottom: 1.25rem;
  overflow: hidden;
}
.dash-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid #f1f3f5;
}
.dash-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0;
}
.dash-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-green {
  background: #198754;
}
.dot-dark {
  background: #343a40;
}
.dot-blue {
  background: #0d6efd;
}
.dot-red {
  background: #dc3545;
}
.dash-section-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Botón con tooltip (sin JS extra) */
.dash-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 7px;
  border: 1px solid #dee2e6;
  background: #fff;
  font-size: 0.75rem;
  color: #495057;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
  white-space: nowrap;
}
.dash-btn:hover {
  background: #f8f9fa;
}
.dash-btn.dash-btn-primary {
  background: #e7f1ff;
  color: #0a58ca;
  border-color: #b6d4fe;
}
.dash-btn.dash-btn-primary:hover {
  background: #d0e4ff;
}
.dash-btn[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #212529;
  color: #fff;
  font-size: 0.6875rem;
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 100;
}

/* Flash panel compact */
.flash-compact {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 7px;
  background: #fff8e1;
  border: 1px solid #ffe082;
  font-size: 0.75rem;
}
.flash-compact .flash-dot-anim {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fd7e14;
  animation: dashPulse 1.5s ease-in-out infinite;
}
@keyframes dashPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
.flash-compact strong {
  color: #6d4000;
}
.flash-compact #flashEstado {
  color: #856404;
}

/* Tablas */
.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.dash-table thead tr {
  border-bottom: 1px solid #f1f3f5;
}
.dash-table thead th {
  padding: 8px 12px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6c757d;
  white-space: nowrap;
  text-align: left;
}
.dash-table tbody tr {
  border-bottom: 1px solid #f8f9fa;
  transition: background 0.1s;
}
.dash-table tbody tr:hover {
  background: #f8f9fa;
}
.dash-table tbody tr:last-child {
  border-bottom: none;
}
.dash-table td {
  padding: 9px 12px;
  vertical-align: middle;
}

/* Badges semánticos */
.dbadge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 0.6875rem;
  font-weight: 600;
}
.dbadge-success {
  background: #d1e7dd;
  color: #0a5c31;
}
.dbadge-warning {
  background: #fff3cd;
  color: #6d4000;
}
.dbadge-danger {
  background: #f8d7da;
  color: #6f0c14;
}
.dbadge-info {
  background: #cfe2ff;
  color: #084298;
}
.dbadge-secondary {
  background: #e9ecef;
  color: #495057;
}

/* Celda sin datos */
.dash-empty td {
  text-align: center;
  padding: 2rem;
  color: #adb5bd;
  font-size: 0.8125rem;
}

/* Responsive tabla */
.dash-table-wrap {
  overflow-x: auto;
}

/* <!-- ═══════════════════════════════════════════════════════════
     CSS ESPECÍFICO DE ESTOS MODALES
     (Mover a oriente-master.css)
     ═══════════════════════════════════════════════════════════ --> */
/* Prefijo/sufijo de inputs */
.oriente-input-prefix {
  background: var(--gris-bg);
  border-color: var(--borde);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}
.dark-mode .oriente-input-prefix {
  background: #2a2a2a;
  border-color: #3a3a3a;
  color: #888;
}

/* Botón generar código */
.oriente-btn-generar {
  background: var(--verde-lt);
  border: 1.5px solid var(--verde);
  color: var(--verde-dk);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0 14px;
  transition:
    background 0.15s,
    color 0.15s;
}
.oriente-btn-generar:hover {
  background: var(--verde);
  color: #fff;
}
.dark-mode .oriente-btn-generar {
  background: rgba(78, 142, 101, 0.15);
  border-color: var(--verde);
  color: var(--verde);
}

/* Hint de campo */
.oriente-field-hint {
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 4px;
  margin-bottom: 0;
  line-height: 1.4;
  display: block;
}

/* Switch row */
.oriente-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
  background: var(--gris-bg);
  border: 1px solid var(--borde);
  border-radius: 8px;
  margin-top: 0.4rem;
}
.oriente-switch-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--texto);
  line-height: 1.2;
}
.oriente-switch-hint {
  display: block;
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 2px;
}
.dark-mode .oriente-switch-row {
  background: #2a2a2a;
  border-color: #3a3a3a;
}

/* Chip informativo */
.oriente-info-chip {
  display: flex;
  align-items: flex-start;
  background: var(--rojo-lt);
  border: 1px solid rgba(203, 68, 74, 0.2);
  border-radius: 8px;
  padding: 0.65rem 0.9rem;
  font-size: 0.75rem;
  color: var(--rojo-dk);
  line-height: 1.5;
}
.dark-mode .oriente-info-chip {
  background: rgba(203, 68, 74, 0.12);
  color: #f08080;
  border-color: rgba(203, 68, 74, 0.25);
}

/* Timeline de flash */
.oriente-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.5rem 0;
}
.otl-step {
  display: flex;
  align-items: center;
  gap: 10px;
}
.otl-connector {
  width: 2px;
  height: 14px;
  background: var(--borde);
  margin-left: 13px;
}
.otl-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  flex-shrink: 0;
}
.otl-active .otl-dot {
  background: var(--rojo-lt);
  color: var(--rojo);
  border: 1.5px solid rgba(203, 68, 74, 0.3);
}
.otl-warn .otl-dot {
  background: rgba(230, 132, 42, 0.12);
  color: #c47a1a;
  border: 1.5px solid rgba(230, 132, 42, 0.25);
}
.otl-muted .otl-dot {
  background: var(--verde-lt);
  color: var(--verde);
  border: 1.5px solid rgba(78, 142, 101, 0.25);
}

.otl-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--texto);
  line-height: 1.2;
}
.otl-sub {
  display: block;
  font-size: 0.67rem;
  color: var(--muted);
}

/* ================================================================
   PROMOCIONES PÚBLICAS — MDK ORIENTE
   Pegar al final de oriente-master.css
   ================================================================ */

/* ── Grid ── */
.promo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.75rem;
}

/* ── Card base ── */
.card.card-promo-pub {
    border: 1px solid var(--borde) !important;
    border-radius: 18px !important;
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: box-shadow 0.28s, transform 0.28s;
    background: var(--blanco);
    display: flex;
    flex-direction: column;
    /* Neutraliza reglas globales de .card */
    max-width: none !important;
    min-height: unset !important;
}
.card.card-promo-pub:hover {
    box-shadow: var(--shadow-h);
    transform: translateY(-5px);
}

/* ── Imagen ── */
.card-promo-pub .promo-img-wrap {
    position: relative;
    overflow: hidden;
    height: 210px;
    flex-shrink: 0;
}
.card-promo-pub .card-img-top {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: unset !important;   /* neutraliza regla global */
    transition: transform 0.5s ease;
}
.card-promo-pub:hover .card-img-top {
    transform: scale(1.06);
}

/* Gradiente sobre imagen */
.card-promo-pub .promo-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 55%, transparent 100%);
    pointer-events: none;
}

/* Ribbon ACTIVO — esquina superior derecha */
.promo-ribbon {
    position: absolute;
    top: 18px;
    right: -26px;
    background: var(--verde);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 4px 38px;
    transform: rotate(45deg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    pointer-events: none;
    z-index: 2;
}

/* Título sobre la imagen */
.promo-img-title {
    position: absolute;
    bottom: 12px;
    left: 14px;
    right: 14px;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    text-shadow: 0 1px 6px rgba(0,0,0,0.55);
    margin: 0;
    z-index: 2;
    text-align: left;
}

/* ── Body ── */
.card-promo-pub .card-body {
    padding: 1rem 1.1rem 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-height: unset !important;   /* neutraliza regla global */
}

.card-promo-pub .card-desc {
    font-size: 0.81rem;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

/* Chip de fecha */
.promo-fecha {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.69rem;
    font-weight: 700;
    color: var(--rojo);
    background: var(--rojo-lt);
    border: 1px solid rgba(203,68,74,0.15);
    border-radius: 7px;
    padding: 4px 10px;
    width: fit-content;
}

/* Línea divisora */
.promo-divider {
    border: none;
    border-top: 1px solid var(--borde);
    margin: 0;
}

/* ── Fila de botones WhatsApp + Compartir ── */
.card-promo-pub .card-actions {
    display: flex;
    gap: 0.5rem;
}

/* Base compartida de botones */
.btn-promo-whats,
.btn-promo-compartir,
.btn-promo-pago {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: filter 0.18s, transform 0.15s;
    font-family: inherit;
    letter-spacing: 0.02em;
    text-decoration: none;
    line-height: 1;
}
.btn-promo-whats:hover,
.btn-promo-compartir:hover,
.btn-promo-pago:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    text-decoration: none;
}

/* WhatsApp */
.btn-promo-whats {
    flex: 1;
    color: #fff;
    background: #25d366;
}
.btn-promo-whats:hover { color: #fff; }

/* Compartir — outline verde para diferenciarse del verde sólido */
.btn-promo-compartir {
    flex: 1;
    color: var(--verde-dk);
    background: var(--verde-lt);
    border: 1.5px solid rgba(78,142,101,0.3);
}
.btn-promo-compartir:hover {
    color: var(--verde-dk);
}

/* Pago en línea — ancho completo, siempre al fondo */
.btn-promo-pago {
    width: 100%;
    color: #fff;
    background: var(--verde-dk);
}

/* Placeholder para cards SIN pago — mantiene altura uniforme */
.promo-pago-placeholder {
    height: 38px;
}

/* ── Dark mode ── */
.dark-mode .card.card-promo-pub {
    background: #1e1e1e !important;
    border-color: #2a2a2a !important;
}
.dark-mode .card-promo-pub .card-desc {
    color: #888;
}
.dark-mode .promo-fecha {
    color: #f08080;
    background: rgba(203,68,74,0.12);
    border-color: rgba(203,68,74,0.2);
}
.dark-mode .promo-divider {
    border-color: #2a2a2a;
}
.dark-mode .btn-promo-compartir {
    color: #7ec69a;
    background: rgba(78,142,101,0.15);
    border-color: rgba(78,142,101,0.25);
}
.dark-mode .btn-promo-compartir:hover {
    color: #7ec69a;
}
.dark-mode .btn-promo-pago {
    background: var(--verde);
}
.dark-mode .promo-ribbon {
    background: var(--verde-dk);
}

/* ── Responsive ── */
@media (max-width: 576px) {
    .promo-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
}

/* ================================================================
   FIX RESPONSIVE — dt-strip Director Técnico en modal (móvil)
   ================================================================ */

/* En pantallas pequeñas: apilar verticalmente y reducir imagen */
@media (max-width: 767px) {
  .dt-strip {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 1.2rem;
    gap: 0.75rem;
  }
  .dt-strip img {
    width: 100px;
    height: 100px;
  }
  .dt-nombre,
  .dt,
  .dt-grado,
  .dt-msg {
    text-align: center;
  }
  .hangul-watermark {
    display: none; /* evita desbordamiento horizontal en móvil */
  }
}