/* =========================================================
   Preset · Scala Learning
   ---------------------------------------------------------
   Hex verificados contra Brandbook_ScalaLearning.pdf (p. 9),
   los SVG del logo y el aula real de scalacampus.instructure.com.
   Guía completa: ../INSTITUCION.md

   Nota de arquitectura: este archivo se carga ANTES de core.css,
   así que los tokens que core.css también define se declaran con
   `html:root` (especificidad 0,1,1 > 0,1,0) para ganarle sin
   tocar el motor compartido.
   ========================================================= */

/* --- Los 3 tokens que el motor lee vía var() --- */
:root {
  --c-acento: #503B96;   /* Violeta · acción: botones, links, énfasis */
  --c-info:   #7A67C9;   /* Lavanda · callouts informativos (derivado del violeta) */
  --c-deep:   #303651;   /* Navy · sidebar y superficies profundas */
}

html:root {

  /* --- Marca --- */
  --c-calido:       #F8B716;  /* Golden Yellow · acento de lectura, nunca un control */
  --c-violeta-deep: #261D4A;  /* fondo del hero, extremo frío del gradiente */
  --c-crema:        #F4EFE7;  /* superficie cálida (se despega del fondo #FAF6F3) */

  --grad-scala: linear-gradient(100deg,
    #261D4A 0%, #3F2E75 32%, #503B96 55%, #9E7452 78%, #F8B716 100%);

  /* --- Tipografía ---
     Google Sans y Borax VF son licenciadas: van primero por si el cliente
     las auto-hospeda; el fallback libre es el que ve todo el mundo hoy.
     La línea Scala no usa monoespaciada: los eyebrows son sans con tracking. */
  --brand-sans: 'Google Sans', 'Product Sans', 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-display: var(--brand-sans);
  --font-body:    var(--brand-sans);
  --font-mono:    var(--brand-sans);
  --font-serif:   'Borax VF', 'Newsreader', Georgia, serif;

  /* --- Estados ---
     El warning del motor (#FFB020) es casi idéntico al amarillo de marca:
     se oscurece para que "atención" no se lea como acento de Scala. */
  --warning: #C9761A;

  /* --- Forma · un solo radio por escala (brandbook p. 16) --- */
  --r-sm: 10px;  --r-md: 18px;  --r-lg: 18px;  --r-xl: 28px;

  /* --- Superficies claras y luminosas (se evita el gris azulado) --- */
  --bg-app:     #FAF6F3;
  --bg-surface: #FFFFFF;
  --bg-card:    #FFFFFF;
  --bg-muted:   #F1ECE6;
  --border-c:   #E7E0D8;

  /* --- Sombras tintadas en navy, nunca negro puro --- */
  --shadow-sm: 0 4px 14px rgba(48, 54, 81, 0.07);
  --shadow-md: 0 8px 28px rgba(48, 54, 81, 0.10);
  --shadow-lg: 0 24px 60px rgba(48, 54, 81, 0.16);
}

/* =========================================================
   CURSO DEMO · fichas del catálogo y del marcado del Word
   (solo en este curso; el skin no se toca)
   ========================================================= */

/* El rótulo literal que el instruccional escribe en el Word para que el bloque
   caiga en este componente. Es el dato más importante de la ficha. */
.dm-rotulo{
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:0 0 10px; max-width:100%;
  padding:5px 12px; border-radius:999px;
  background:color-mix(in srgb, var(--c-calido) 22%, transparent);
  color:var(--text-head); font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.8rem; font-weight:600; letter-spacing:.02em;
}
.dm-rotulo::before{ content:'Word ›'; font-family:var(--font-display); font-weight:600; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-sec); }
/* Variante para lo que no marca el Word: lo pone producción y se lista como capa editorial */
.dm-rotulo--prod{ background:color-mix(in srgb, var(--c-acento) 12%, transparent); }
.dm-rotulo--prod::before{ content:'Producción ›'; }

/* El botón que abre la ventana con el marcado del Word y el «cuándo usarlo». Va después del
   ejemplo vivo, alineado a la derecha, para que el componente quede solo en su franja. */
.dm-acciones{ display:flex; justify-content:flex-end; margin:18px 0 0; }
.dm-modal__cab{
  display:flex; align-items:center; gap:10px; margin:0 0 10px;
  font-family:var(--font-display); font-weight:600; font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-sec);
}
.dm-modal__cab:first-child::before{ content:''; flex:0 0 auto; width:20px; height:20px; background:url("data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22><path fill=%22%2341A5EE%22 d=%22M30 6H15v20h15a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1z%22/><path fill=%22%232B7CD3%22 d=%22M31 12H15v7h16z%22/><path fill=%22%23185ABD%22 d=%22M31 19H15v7h15a1 1 0 0 0 1-1z%22/><path fill=%22%23185ABD%22 d=%22M2 7l14-2.5v23L2 25z%22/><path fill=%22%23fff%22 d=%22M5.4 11.2h1.9l1.3 6.2 1.5-6.2h1.7l1.5 6.2 1.3-6.2h1.8l-2.2 9.6h-1.8l-1.5-6.1-1.5 6.1H7.6z%22/></svg>") center/contain no-repeat; }
.ova-modal__body .sl-nota{ margin:0; }
/* La hoja de Word: dentro de la ventana (catálogo) y como ejemplo abierto en el tema 4 */
.dm-word{
  margin:0; padding:14px 16px; border:1px dashed var(--border-c); border-radius:var(--r-md);
  background:var(--bg-surface); font-family:'Aptos','Calibri',var(--font-body); font-size:.88rem; line-height:1.6;
  color:var(--text-pri); white-space:pre-wrap; overflow-wrap:anywhere;
}
.dm-word__cab{
  display:flex; align-items:center; gap:10px; margin:0 0 10px; padding:0 0 8px; cursor:pointer; list-style:none;
  font-family:var(--font-display); font-weight:600; font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-sec); white-space:normal; border-bottom:1px dashed var(--border-c);
}
.dm-word__cab::-webkit-details-marker{ display:none; }
.dm-word__cab::before{ content:''; flex:0 0 auto; width:20px; height:20px; background:url("data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22><path fill=%22%2341A5EE%22 d=%22M30 6H15v20h15a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1z%22/><path fill=%22%232B7CD3%22 d=%22M31 12H15v7h16z%22/><path fill=%22%23185ABD%22 d=%22M31 19H15v7h15a1 1 0 0 0 1-1z%22/><path fill=%22%23185ABD%22 d=%22M2 7l14-2.5v23L2 25z%22/><path fill=%22%23fff%22 d=%22M5.4 11.2h1.9l1.3 6.2 1.5-6.2h1.7l1.5 6.2 1.3-6.2h1.8l-2.2 9.6h-1.8l-1.5-6.1-1.5 6.1H7.6z%22/></svg>") center/contain no-repeat; }
.dm-word__cuerpo{ white-space:pre-wrap; }
.dm-word b{ font-weight:700; color:var(--text-pri); }
.dm-word .gris{ color:var(--text-mut); }
/* Convención del Word (2026-10-10): el nombre del componente va en rojo, como instrucción
   para producción que no se ve en el curso; el rótulo de una tarjeta (Importante, Idea
   clave…) va en el color del texto porque el estudiante sí lo lee. */
.dm-word .rojo{ color:#D62828; font-weight:700; }
.dm-word .rotulo{ color:var(--text-pri); font-weight:600; }
.dm-word .celda{ display:block; margin:8px 0; padding:8px 10px; border:1px solid var(--border-c); border-radius:3px; }

/* Separador "Ejemplo vivo" antes del componente real */
.dm-ejemplo{
  display:flex; align-items:center; gap:12px; margin:22px 0 12px;
  font-family:var(--font-display); font-weight:600; font-size:.7rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--c-acento);
}
.dm-ejemplo::after{ content:''; flex:1; height:1px; background:var(--border-c); }

/* Hoja de Word + "cuándo usarlo" en pareja; en móvil se apilan */

/* Aire entre fichas: cada componente es una sección y respira como pieza grande */
.dm-ficha{ margin-bottom:56px; }
.dm-ficha > p:first-of-type{ margin-top:0; }

/* Las tres cajas del Word (tema 4): se ven como en el documento */
.dm-cajas{ display:grid; gap:14px; margin:18px 0 0; }
.dm-caja{ border-left:4px solid var(--c-acento); border-radius:0 10px 10px 0; padding:14px 16px; background:var(--surface-2); }
.dm-caja__tag{ display:block; font-family:var(--font-mono, monospace); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; margin-bottom:6px; }
.dm-caja p{ margin:2px 0; font-size:.95rem; line-height:1.5; }
.dm-caja b.dm-caja__rot{ display:block; margin-bottom:4px; }
.dm-caja__sale{ display:block; margin-top:10px; padding-top:8px; border-top:1px solid rgba(48,54,81,.12); font-size:.86rem; color:var(--text-sec); }
.dm-caja--comp{ border-color:#503B96; background:#EFECF7; }
.dm-caja--comp .dm-caja__tag{ color:#503B96; }
.dm-caja--fig{ border-color:#C08A00; background:#FDF4DE; }
.dm-caja--fig .dm-caja__tag{ color:#8A6100; }
.dm-caja--nota{ border-color:#9A9EB0; background:#F3F3F5; }
.dm-caja--nota .dm-caja__tag{ color:#5C6280; }
.dm-suelto{ border:1px dashed var(--border-c); border-radius:10px; padding:14px 16px; background:transparent; }
.dm-suelto .dm-caja__tag{ color:var(--text-mut); }

/* Pantallazos del Word (tema 4): una página con sombra, a ancho de columna */
.dm-pagina{ margin:18px 0 0; }
.dm-pagina img{ display:block; width:100%; height:auto; border:1px solid var(--border-c); border-radius:var(--r-md); box-shadow:0 8px 28px rgba(48,54,81,.10); }
.dm-pagina figcaption{ font-size:.85rem; color:var(--text-sec); margin-top:10px; }
.dm-paginas{ display:grid; gap:20px; margin:18px 0 0; }
@media (min-width: 860px){ .dm-paginas{ grid-template-columns:repeat(2,1fr); } }

/* Las dos tarjetas de cabecera de un tema de catálogo (Resultado/criterio + Idea clave)
   respiran del párrafo que las separa: entre bloques ≥ 40 px (INSTITUCION.md §1.3) */
.ova-screen > p + .ova-callout, .ova-screen > .ova-callout + p{ margin-top: 40px; }