/* ==========================================================================
   UI Unicauca - hoja de estilos central
   En Moodle solo se pega el HTML con clases `ui-*`; este archivo se enlaza
   una vez en el <head>. Todo se ajusta aquí.

   Índice
     1. Tokens (tema claro, por defecto)
     2. Tema oscuro  (.ui-theme-dark)
     3. Botón        (.ui-btn)
     4. Card         (.ui-card)
     5. Etiqueta     (.ui-tag)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens (tema claro)
   -------------------------------------------------------------------------- */
:root {
  /* Marca */
  --ui-primary: #000065;
  --ui-accent: #5056A2;

  /* Superficies y texto */
  --ui-surface: #ffffff;
  --ui-border: #e0e0e0;
  --ui-heading: #000065;
  --ui-text: #444444;
  --ui-text-muted: #555555;
  --ui-icon-bg: #000065;

  /* Botón */
  --ui-btn-bg: #000065;
  --ui-btn-text: #ffffff;
  --ui-btn-border: #5056A2;

  /* Etiqueta */
  --ui-tag-bg: #23529B;
  --ui-tag-text: #ffffff;
  --ui-tag-ring: #23529B;
  --ui-tag-icon-bg: #DCE5F1;
  --ui-tag-icon-color: #23529B;
  --ui-tag-h: 46px;

  /* Forma */
  --ui-radius-lg: 12px;
  --ui-radius-md: 7px;
  --ui-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

  /* Tipografía */
  --ui-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Tema oscuro
   Se aplica con la clase en el propio componente o en cualquier contenedor:
   <div class="ui-card ui-theme-dark"> ... </div>
   -------------------------------------------------------------------------- */
.ui-theme-dark {
  --ui-surface: #14162e;
  --ui-border: #2c3060;
  --ui-heading: #c9ccff;
  --ui-text: #d7d8ea;
  --ui-text-muted: #a6a8c4;
  --ui-icon-bg: #000065;

  --ui-btn-bg: #5056A2;
  --ui-btn-text: #ffffff;
  --ui-btn-border: #9096e8;

  --ui-tag-bg: #FDFBFF;
  --ui-tag-text: #000066;
  --ui-tag-ring: #0052A0;
  --ui-tag-icon-bg: #D9E5F1;
  --ui-tag-icon-color: #0052A0;

  --ui-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   INICIO · 3. Botón  (.ui-btn)
   Variante: ui-btn--outline
   ========================================================================== */
a.ui-btn,
a.ui-btn:link,
a.ui-btn:visited,
a.ui-btn:hover,
a.ui-btn:focus,
a.ui-btn:active {
  color: var(--ui-btn-text);
  text-decoration: none;
}

a.ui-btn {
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  padding: 11px 18px;
  background: var(--ui-btn-bg);
  border: 1px solid var(--ui-btn-edge, var(--ui-btn-bg));
  border-bottom: 3px solid var(--ui-btn-border);
  border-radius: var(--ui-radius-md);
  font-family: var(--ui-font);
  font-size: 14px;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
}

a.ui-btn:hover,
a.ui-btn:focus {
  filter: brightness(1.15);
}

/* Variante: contorno */
.ui-btn--outline {
  --ui-btn-bg: transparent;
  --ui-btn-text: var(--ui-heading);
  --ui-btn-edge: var(--ui-heading);
  --ui-btn-border: var(--ui-heading);
}

/* ==========================================================================
   FIN · 3. Botón
   ========================================================================== */


/* ==========================================================================
   INICIO · 4. Card  (.ui-card)
   Se adapta sola al ancho disponible: el icono sube sobre el texto cuando
   no hay espacio.
   ========================================================================== */
.ui-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
  box-sizing: border-box;
  max-width: 600px;
  padding: 20px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow);
  font-family: var(--ui-font);
}

.ui-card .ui-card__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  width: 78px;
  height: 78px;
  background: var(--ui-icon-bg);
  border-radius: var(--ui-radius-lg);
}

/* Tamaño fijo: así ningún estilo de Moodle (img { max-width: 100%; height: auto })
   puede agrandar el logo. El width/height del HTML es el respaldo. */
.ui-card .ui-card__icon img {
  display: block;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  min-width: 0;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  object-fit: contain;
}

.ui-card .ui-card__body {
  flex: 1;
  min-width: 200px;
}

/* Título: es un <h3>, pero el estilo vive aquí; el nivel (h2, h3, h4) se puede cambiar sin afectar el diseño */
.ui-card .ui-card__body .ui-card__title {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--ui-font);
  font-size: 17px;
  font-weight: bold;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ui-heading);
}

.ui-card .ui-card__body .ui-card__text {
  margin: 0 0 12px;
  padding: 0;
  font-family: var(--ui-font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ui-text-muted);
}

.ui-card .ui-btn {
  margin-bottom: 12px;
}

.ui-card .ui-card__body .ui-card__meta {
  margin: 0;
  padding: 0;
  font-family: var(--ui-font);
  font-size: 14px;
  line-height: 1.9;
  color: var(--ui-text);
}

.ui-card .ui-card__label {
  font-family: var(--ui-font);
  font-weight: bold;
  color: var(--ui-heading);
}

@media (max-width: 480px) {
  .ui-card {
    padding: 16px;
    gap: 16px;
  }

  .ui-card .ui-card__body {
    min-width: 0;
    flex-basis: 100%;
  }

  .ui-card .ui-btn {
    display: block;
  }
}

/* ==========================================================================
   FIN · 4. Card
   ========================================================================== */


/* ==========================================================================
   INICIO · 5. Etiqueta  (.ui-tag)
   Banda con punta de flecha y un círculo con icono a la izquierda.
   Alto ajustable con --ui-tag-h. Iconos: ui-tag--<nombre> en el mismo <div>
   ========================================================================== */
.ui-tag {
  display: inline-flex;
  align-items: center;
  position: relative;
  max-width: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--ui-font);
}

/* Círculo del icono (sobresale un poco de la banda) y su dibujo.
   Son pseudo-elementos: el HTML no lleva ningún elemento vacío, que el editor
   de Moodle (TinyMCE) borraría al guardar. */
.ui-tag::before {
  content: "";
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  display: block;
  box-sizing: border-box;
  width: calc(var(--ui-tag-h) + 8px);
  height: calc(var(--ui-tag-h) + 8px);
  background: var(--ui-tag-icon-bg);
  border: 3px solid var(--ui-tag-ring);
  border-radius: 50%;
}

.ui-tag::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  left: calc((var(--ui-tag-h) + 8px) / 2);
  width: calc((var(--ui-tag-h) + 8px) / 2);
  height: calc((var(--ui-tag-h) + 8px) / 2);
  transform: translate(-50%, -50%);
  background-color: var(--ui-tag-icon-color);
  -webkit-mask: var(--ui-tag-glyph) center / contain no-repeat;
  mask: var(--ui-tag-glyph) center / contain no-repeat;
}

/* Banda + punta. El <h3> solo da la semántica; el estilo vive aquí. */
.ui-tag .ui-tag__text {
  position: relative;
  box-sizing: border-box;
  height: var(--ui-tag-h);
  margin: 0 calc(var(--ui-tag-h) * 0.4) 0 calc(var(--ui-tag-h) * -0.575);
  padding: 0 calc(var(--ui-tag-h) * 0.35) 0 calc(var(--ui-tag-h) * 0.77);
  background: var(--ui-tag-bg);
  border: 0;
  font-family: var(--ui-font);
  font-size: 24px;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: calc(var(--ui-tag-h) - 2px);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: var(--ui-tag-text);
}

/* Punta: cuadrado girado y estirado; solo se redondea la esquina que apunta */
.ui-tag .ui-tag__text::after {
  content: "";
  position: absolute;
  top: calc(var(--ui-tag-h) * 0.14645);
  right: calc(var(--ui-tag-h) * -0.35355);
  width: calc(var(--ui-tag-h) * 0.7071);
  height: calc(var(--ui-tag-h) * 0.7071);
  background: var(--ui-tag-bg);
  border-radius: 0 6px 0 0;
  transform: scaleX(0.8) rotate(45deg);
}

/* Iconos */
.ui-tag--evaluacion {
  --ui-tag-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='18' rx='2'/%3E%3Cpath d='M9 2h6v4H9z'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E");
}

.ui-tag--presentacion {
  --ui-tag-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Ccircle cx='12' cy='13' r='2'/%3E%3Cpath d='M8.5 19a3.5 3.5 0 0 1 7 0'/%3E%3C/svg%3E");
}

.ui-tag--objetivo {
  --ui-tag-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3'/%3E%3C/svg%3E");
}

.ui-tag--justificacion {
  --ui-tag-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='M8 9h8M8 13h5'/%3E%3C/svg%3E");
}

.ui-tag--resultados {
  --ui-tag-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h8M3 17h8'/%3E%3Cpath d='m14 6 2.5 2.5L21 4'/%3E%3Cpath d='m14 16 2.5 2.5L21 14'/%3E%3C/svg%3E");
}

.ui-tag--creditos {
  --ui-tag-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h8M8 9h2'/%3E%3C/svg%3E");
}

.ui-tag--resumen {
  --ui-tag-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18M8 15h.01M12 15h.01M16 15h.01'/%3E%3C/svg%3E");
}

.ui-tag--recursos {
  --ui-tag-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 7 4-4 14 14-4 4z'/%3E%3Cpath d='m8 8 2 2M11 11l2 2M14 14l2 2'/%3E%3Cpath d='m17 3 4 4L9 19l-5 1 1-5z'/%3E%3C/svg%3E");
}

.ui-tag--encuentro {
  --ui-tag-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7' r='3'/%3E%3Cpath d='M3 21v-1a6 6 0 0 1 8-5.6'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3Cpath d='M18 13v2M18 21v2M13 18h2M21 18h2M14.5 14.5l1.4 1.4M20.1 20.1l1.4 1.4M21.5 14.5l-1.4 1.4M15.9 20.1l-1.4 1.4'/%3E%3C/svg%3E");
}

/* ==========================================================================
   FIN · 5. Etiqueta
   ========================================================================== */