/* ==========================================================================
   Gadgets WebClass — tokens compartidos

   La paleta y las formas salen de la interfaz REAL de WebClass
   (plataforma7.webescuela.cl → Evaluación → Crear evaluación), no de un
   criterio propio. Las tres señas de identidad que hay que respetar son:

     · el AZUL de acción (#23a6df): botones principales, menu activo, enlaces;
     · los campos y botones en CAPSULA (border-radius completo);
     · mucho blanco, bordes suaves y sombras casi inexistentes.

   Si la maqueta se ve como otro producto, la reunion se va en discutir el
   estilo en vez de la funcionalidad, que es justo lo que se quiere discutir.
   ========================================================================== */

:root {
  /* Azul de accion — el color del producto */
  --azul:        #23a6df;
  --azul-oscuro: #1b8bbd;
  --azul-icono:  #23a6df;
  --azul-suave:  #e7f5fd;
  --azul-borde:  #a9ddf4;

  /* Naranja: ya NO es el color de accion. Queda para avisos y para lo que
     reclama atencion (saltos de hoja, etiquetas de lo que falta). */
  --naranja:        #f4794e;
  --naranja-oscuro: #e2643a;
  --naranja-suave:  #fdf0ea;
  --naranja-borde:  #f6b79b;

  /* Semaforo */
  --verde:       #34c79b;
  --verde-suave: #e8f8f2;
  --amarillo:    #d9a32c;
  --rojo:        #e0637e;
  --rojo-suave:  #fdeff2;

  /* Neutros */
  --texto:        #3c4858;
  --texto-medio:  #6b7787;
  --texto-suave:  #97a1b0;
  --borde:        #e4e8ef;
  --borde-fuerte: #cfd6e0;
  --fondo:        #fafbfc;
  --papel:        #ffffff;

  /* Fondos de tarjeta (las 5 del selector de creacion) */
  --c-lavanda: #f5f5fc;  --c-lavanda-txt: #5f74c4;
  --c-verde:   #eff6f2;  --c-verde-txt:   #45a08e;
  --c-amarillo:#fdf9e8;  --c-amarillo-txt:#c9942a;
  --c-azul:    #e7f5fd;  --c-azul-txt:    #1b8bbd;
  --c-rosa:    #fdeff2;  --c-rosa-txt:    #e0637e;

  --r-chico:  8px;
  --r:        12px;
  --r-grande: 16px;
  --r-capsula: 999px;      /* campos y botones: la forma del producto */

  --sombra:       0 1px 3px rgba(60, 72, 88, .07);
  --sombra-media: 0 3px 12px rgba(60, 72, 88, .09);
  --sombra-papel: 0 2px 18px rgba(60, 72, 88, .13);

  /* WebClass usa una sans neutra, no una redondeada. Se resuelve con la del
     sistema: la maqueta abre igual sin internet. */
  --fuente: "Segoe UI", Roboto, "Helvetica Neue", system-ui, -apple-system, Arial, sans-serif;
  --fuente-papel: "Nunito", "Segoe UI", system-ui, Arial, sans-serif;
  --fuente-mate: "Cambria", "Georgia", "Times New Roman", serif;
}

* { box-sizing: border-box; }

/* `hidden` tiene que ganarle a cualquier regla de display, incluidas las que
   usan selector de ID (especificidad 1,0,0). Sin esto, un `#algo{display:flex}`
   deja visible un elemento marcado como oculto: el DOM dice una cosa y la
   pantalla muestra otra. Ya paso con la pantalla de creacion del gadget 01. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--fuente);
  color: var(--texto);
  background: var(--fondo);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .4em; font-weight: 600; line-height: 1.25; }


/* ==========================================================================
   El marco de WebClass: lateral + columna principal

   Es el marco en el que el usuario va a ver esto de verdad. Reproducirlo evita
   la pregunta «¿y esto donde vive?» en la primera reunion, y deja ver de una
   que el gadget cuelga de un modulo que ya existe.
   ========================================================================== */
.wc-app { display: flex; align-items: flex-start; position: relative; }

/* --- Menu lateral -------------------------------------------------------- */
.wc-lateral {
  position: sticky; top: 34px;
  flex: 0 0 var(--lateral, 296px); width: var(--lateral, 296px);
  height: calc(100vh - 34px); overflow-y: auto; overflow-x: hidden;
  background: #fff; border-right: 1px solid var(--borde);
  padding: 14px 14px 22px;
  transition: flex-basis .2s, width .2s;
}
.wc-app.plegado .wc-lateral { --lateral: 0px; padding-left: 0; padding-right: 0; border-right: none; }
.wc-lateral-logo { display: block; padding: 6px 8px 18px; }

.wc-menu { display: flex; flex-direction: column; gap: 2px; }
.wc-mitem {
  display: flex; align-items: center; gap: 13px; width: 100%;
  font-family: inherit; font-size: 14.5px; color: var(--texto-medio);
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 10px 14px; border-radius: var(--r);
  white-space: nowrap;
}
.wc-mitem:hover { background: #f2f5f9; color: var(--texto); }
.wc-micono { display: flex; flex: 0 0 22px; color: var(--texto-suave); }
.wc-mtexto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wc-mflecha { color: var(--borde-fuerte); font-size: 17px; line-height: 1; }
/* Activo: capsula azul llena, como en el producto */
.wc-mitem.activo { background: var(--azul); color: #fff; font-weight: 600; }
.wc-mitem.activo .wc-micono, .wc-mitem.activo .wc-mflecha { color: #fff; }

.wc-submenu { display: flex; flex-direction: column; padding: 4px 0 8px; }
.wc-sitem {
  font-family: inherit; font-size: 13.5px; color: var(--texto-medio);
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 6px 14px 6px 49px; border-radius: var(--r-chico);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wc-sitem:hover { background: #f2f5f9; color: var(--texto); }
.wc-sitem.activo { color: var(--azul); font-weight: 700; }

.wc-lateral-pie { margin-top: 20px; }
.wc-otec {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--borde); border-radius: var(--r);
  padding: 9px 12px; margin-bottom: 16px;
}
.wc-otec-punto { width: 9px; height: 9px; border-radius: 50%; background: #2f3a4b; flex: 0 0 9px; }
.wc-otec b { display: block; font-size: 12.5px; font-weight: 600; color: var(--texto); white-space: nowrap; }
.wc-otec small { display: block; font-size: 11px; color: var(--texto-suave); }
.wc-otec > span:nth-child(2) { flex: 1; min-width: 0; }
.wc-otec-ir { color: var(--texto-suave); font-size: 13px; }

.wc-crecer {
  font-size: 19px; font-weight: 700; color: #4b9fe1;
  padding: 0 4px 12px; white-space: nowrap;
}
.wc-crecer b { color: #e35d6a; font-weight: 700; }

.wc-desafio {
  display: flex; align-items: center; gap: 11px;
  font-size: 13.5px; color: var(--texto-medio);
  padding: 6px 4px; white-space: nowrap;
}
.wc-desafio i { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 20px; }

/* Tirador para plegar: el editor necesita el ancho de la hoja */
.wc-plegar {
  position: fixed; top: 50%; left: calc(var(--lateral, 296px) - 13px); z-index: 42;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--borde); background: #fff; cursor: pointer;
  color: var(--texto-medio); font-size: 15px; line-height: 1;
  box-shadow: var(--sombra);
  transition: left .2s;
}
.wc-plegar:hover { color: var(--azul); border-color: var(--azul-borde); }
.wc-app.plegado .wc-plegar { left: 5px; }

.wc-aviso-menu {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 90;
  background: #2f3a4b; color: #fff; font-size: 13px;
  padding: 9px 16px; border-radius: var(--r-capsula);
  box-shadow: 0 6px 20px rgba(60,72,88,.3);
  transition: opacity .4s;
}

/* --- Columna principal --------------------------------------------------- */
.wc-principal { flex: 1; min-width: 0; }

.wc-cabecera {
  display: flex; align-items: center; gap: 22px;
  padding: 12px 26px;
  background: #fff; border-bottom: 1px solid var(--borde);
}
.wc-contexto { font-size: 12.5px; color: var(--texto-medio); line-height: 1.5; }
.wc-contexto b { color: var(--texto); font-weight: 600; }
.wc-iconos { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.wc-icono {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--borde); background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--texto-medio); font-size: 15px;
}
.wc-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: #cbd3de; display: inline-flex; align-items: center;
  justify-content: center; color: #fff; font-size: 13px; font-weight: 600;
}

.wc-migas {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 26px;
  background: #fff; border-bottom: 1px solid var(--borde);
  font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--texto-suave);
}
.wc-atras {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 14px; border-radius: var(--r-capsula);
  border: 1px solid var(--borde); background: #fff;
  color: var(--texto-medio); font-weight: 600;
}
.wc-atras:hover { text-decoration: none; border-color: var(--azul-borde); color: var(--azul-oscuro); }
.wc-migas ol { display: flex; align-items: center; gap: 7px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.wc-migas li::after { content: '›'; margin-left: 7px; color: var(--borde-fuerte); }
.wc-migas li:last-child::after { content: ''; }
.wc-migas li:last-child { color: var(--texto-medio); font-weight: 600; }

/* En pantalla angosta el lateral estorba mas de lo que ayuda */
@media (max-width: 1100px) {
  .wc-lateral { display: none; }
  .wc-plegar { display: none; }
}

@media print {
  .wc-app { display: block; }
  .wc-principal { width: 100%; }
}


/* ==========================================================================
   Botones — capsula, como en el producto
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 22px;
  border-radius: var(--r-capsula);
  border: 1.5px solid transparent;
  background: none;
  color: var(--texto);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
  white-space: nowrap;
}
.btn:focus-visible { outline: 3px solid var(--azul-suave); outline-offset: 1px; }

.btn-primario { background: var(--azul); color: #fff; }
.btn-primario:hover:not(:disabled) { background: var(--azul-oscuro); }

.btn-secundario { border-color: var(--azul-borde); color: var(--azul-oscuro); background: #fff; }
.btn-secundario:hover:not(:disabled) { background: var(--azul-suave); }

.btn-plano { color: var(--texto-medio); padding: 7px 14px; }
.btn-plano:hover:not(:disabled) { background: #eef1f6; color: var(--texto); }

.btn:disabled { opacity: .45; cursor: not-allowed; }


/* --- Cinta de maqueta ----------------------------------------------------
   La franja oscura de arriba que dice que esto es una maqueta. Es igual en
   todos los gadgets: vivía en el app.css del 01 y el 02 cargaba ese archivo
   entero sólo para tenerla. */
.cinta-maqueta {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 16px;
  padding: 7px 18px;
  background: #2f3a4b; color: #d7dee9;
  font-size: 12.5px;
}
.cinta-maqueta b { color: #fff; }
.cinta-maqueta a { color: #9ecbf5; font-weight: 700; }
.cinta-sep { flex: 1; }

/* --- Piezas sueltas ----------------------------------------------------- */
.pildora {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 11px;
  border-radius: var(--r-capsula);
  background: #eef1f6;
  color: var(--texto-medio);
}
.pildora-azul     { background: var(--azul-suave);   color: var(--azul-oscuro); }
.pildora-verde    { background: var(--verde-suave);  color: #1f9b76; }
.pildora-naranja  { background: var(--naranja-suave);color: var(--naranja-oscuro); }
.pildora-rosa     { background: var(--rojo-suave);   color: var(--rojo); }

.tarjeta {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--r);
  box-shadow: var(--sombra);
}

.sr-solo {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Matematica de maqueta: sin MathJax, sirve para mostrar la forma */
.mate {
  font-family: var(--fuente-mate);
  font-style: italic;
  font-size: 1.06em;
}
.mate .op, .mate .num { font-style: normal; }

@media print {
  .no-imprimir { display: none !important; }
}