/*
 * #EducaSpace_ · Calculadora de presupuestos
 * Los colores reales los inyecta el plugin desde el panel de ajustes:
 * lo que hay aqui son solo los valores de respaldo.
 */

/* ===== Variables de marca — cambia sólo estos valores para ajustar la estética =====
   Tomadas de astroemociones.es el 20/08/2026: fondo negro, texto blanco,
   Roboto Mono, acentos en azul y amarillo, sin esquinas redondeadas.       */
.esp-app{
  --esp-azul:#000000;        /* fondo de la cabecera */
  --esp-azul-2:#0a0a0a;      /* segundo tono de la cabecera */
  --esp-cian:#0099ff;        /* acento principal (azul de la web) */
  --esp-cian-claro:rgba(0,153,255,.10);
  --esp-oro:#ffcc00;         /* acento secundario (amarillo de la web) */
  --esp-texto:#ffffff;
  --esp-suave:#a4a4a4;
  --esp-borde:#333333;
  --esp-fondo:#000000;
  --esp-gris:#0d0d0d;        /* fondo del panel lateral */
  --esp-radio:0px;
  --esp-titulo:30px;         /* tamano del titular */
  --esp-etiqueta:30px;       /* tamano de la etiqueta de arriba; Aitor la quiso igual */
  --esp-cols:3;              /* actividades por fila en pantalla de ordenador */
  --esp-sombra:none;
  --esp-verde:#39d98a;       /* descuentos */
  --esp-rojo:#ff6b6b;        /* errores */
}

.esp-app,.esp-app *{box-sizing:border-box}
.esp-app{font-family:inherit;color:var(--esp-texto);line-height:1.55;max-width:1120px;margin:0 auto;font-size:16px}
.esp-app h2,.esp-app h3,.esp-app h4{margin:0;font-family:inherit;color:var(--esp-texto);font-weight:300}
.esp-app p{margin:0}

.esp-head{
  background:var(--esp-azul);
  color:#fff;border:1px solid var(--esp-borde);border-bottom:0;
  border-radius:var(--esp-radio) var(--esp-radio) 0 0;
  padding:38px 30px 34px;position:relative;overflow:hidden;text-align:center;
}
.esp-head:after{content:"";position:absolute;right:-80px;top:-80px;width:280px;height:280px;
  border-radius:50%;background:radial-gradient(circle,rgba(0,153,255,.18),transparent 70%)}
/* El tamano del titular es un ajuste: tiene que poder igualarse al titular que
   la pagina ya lleve encima, y ese lo pone el tema, no nosotros. */
.esp-head h2{color:#fff;font-size:var(--esp-titulo);font-weight:200;text-transform:uppercase;
  letter-spacing:.10em;line-height:1.25;margin-bottom:14px;position:relative}
/* El subtitulo va en el gris de siempre. Lo que va en BLANCO es solo el
   trozo que Aitor marque con **dobles asteriscos** en el campo del panel —hoy,
   «Hasta 800 alumnos/as en grupos de 25 / 30 en sesiones consecutivas»—. En la
   2.2.1 se puso en blanco el parrafo entero y Juan lo corrigio: era solo esa
   frase. El resalte usa --esp-texto y el gris --esp-suave, que son los dos
   ajustes de color del panel: ninguno de los dos va escrito a pelo. */
.esp-head p .esp-destacado{color:var(--esp-texto)}
.esp-head p{color:var(--esp-suave);font-size:.95rem;max-width:660px;position:relative;
  margin-left:auto;margin-right:auto}
/* La etiqueta de arriba. Su tamano es un ajuste propio porque Aitor la quiso
   igual de grande que el titulo, y a ese tamano el relleno y el espacio entre
   letras de una etiqueta pequena quedaban ridiculos: se calculan a partir del
   propio tamano en vez de estar escritos a mano. */
.esp-badge{display:inline-block;background:transparent;border:1px solid var(--esp-cian);
  color:var(--esp-cian);font-size:var(--esp-etiqueta,.7rem);letter-spacing:.10em;
  text-transform:uppercase;padding:.28em .5em;border-radius:0;margin-bottom:18px;
  position:relative;font-weight:400;line-height:1.25;max-width:100%}
/* Sin recuadro: el texto suelto, para cuando va grande y el marco estorba. */
.esp-badge-liso{border:0;padding:0}

/* El cuerpo son zonas apiladas, no dos columnas. La unica que se parte en dos
   es la de arriba —datos del centro a la izquierda, presupuesto a la derecha—;
   las actividades y los packs mandan sobre todo el ancho. */
.esp-body{background:var(--esp-fondo);border:1px solid var(--esp-borde);border-top:0;
  border-radius:0 0 var(--esp-radio) var(--esp-radio);box-shadow:var(--esp-sombra)}
.esp-top{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.esp-form{padding:34px 30px}
.esp-aside{background:var(--esp-gris);border-left:1px solid var(--esp-borde);padding:34px 30px}
.esp-zona{padding:30px 30px 34px;border-top:1px solid var(--esp-borde)}

.esp-step{margin-bottom:0}
.esp-titulillo{font-size:.98rem;text-transform:uppercase;letter-spacing:.12em;
  font-weight:300;margin-bottom:20px}

.esp-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px}
.esp-field{display:flex;flex-direction:column;gap:4px}
.esp-field.esp-full{grid-column:1/-1}
.esp-field label{font-size:.85rem;font-weight:400;color:var(--esp-texto)}
.esp-field label span{color:var(--esp-suave)}
/* Campos con solo línea inferior, como el formulario de contacto de la web */
.esp-app input[type=text],.esp-app input[type=email],.esp-app input[type=tel],
.esp-app input[type=number],.esp-app select,.esp-app textarea{
  width:100%;padding:9px 2px;border:0;border-bottom:1px solid var(--esp-borde);border-radius:0;
  font-size:.95rem;font-family:inherit;color:var(--esp-texto);background:transparent;
  transition:border-color .15s}
.esp-app input::placeholder,.esp-app textarea::placeholder{color:#5a5a5a}
.esp-app input:focus,.esp-app select:focus,.esp-app textarea:focus{
  outline:0;border-bottom-color:var(--esp-cian);box-shadow:none}
.esp-app input.esp-err,.esp-app select.esp-err{border-bottom-color:var(--esp-rojo)}
.esp-msg{font-size:.78rem;color:var(--esp-rojo);display:none}
.esp-msg.on{display:block}
.esp-hint{font-size:.8rem;color:var(--esp-suave)}
.esp-hint b{color:var(--esp-cian);font-weight:400}

.esp-acts{display:grid;grid-template-columns:repeat(var(--esp-cols),1fr);gap:14px}
.esp-packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.esp-act{position:relative;border:1px solid var(--esp-borde);border-radius:var(--esp-radio);
  padding:16px 16px 16px 48px;cursor:pointer;background:transparent;transition:all .15s;display:block}
.esp-act:hover{border-color:var(--esp-cian)}
.esp-act input{position:absolute;opacity:0;pointer-events:none}
.esp-act .esp-tick{position:absolute;left:16px;top:18px;width:18px;height:18px;
  border:1px solid #5a5a5a;border-radius:0;background:transparent;transition:all .15s}
.esp-act .esp-tick:after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid #000;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s}
.esp-act input:checked ~ .esp-tick{background:var(--esp-cian);border-color:var(--esp-cian)}
.esp-act input:checked ~ .esp-tick:after{transform:rotate(45deg) scale(1)}
.esp-act.esp-on{border-color:var(--esp-cian);background:var(--esp-cian-claro)}
.esp-act.esp-lock{opacity:.35;cursor:not-allowed}
.esp-act-nom{font-weight:400;font-size:.95rem;color:var(--esp-texto);display:block;margin-bottom:5px;
  text-transform:uppercase;letter-spacing:.06em}
.esp-act-desc{font-size:.8rem;color:var(--esp-suave);display:block;line-height:1.5}
/* El reclamo «desde 400 €…». Color propio configurable, azul de serie. */
.esp-act-desde{display:block;margin-top:8px;font-size:.82rem;line-height:1.4;
  color:var(--esp-desde,var(--esp-cian))}
.esp-act.esp-pack .esp-act-desde{color:var(--esp-desde,var(--esp-cian))}
/* Ya no ocupa toda la fila de las actividades: vive en su propia zona. */
.esp-act.esp-pack{border-color:var(--esp-oro);background:rgba(255,204,0,.05)}
.esp-act.esp-pack.esp-on{border-color:var(--esp-oro);background:rgba(255,204,0,.12)}
.esp-act.esp-pack .esp-act-nom{color:var(--esp-oro)}
.esp-act.esp-pack input:checked ~ .esp-tick{background:var(--esp-oro);border-color:var(--esp-oro)}
.esp-autopack{display:none;align-items:flex-start;gap:10px;margin-top:14px;
  background:rgba(255,204,0,.07);border:1px solid rgba(255,204,0,.35);border-radius:var(--esp-radio);
  padding:13px 15px;font-size:.85rem;color:#e8c46a;line-height:1.55;margin-top:2px}
.esp-autopack.on{display:flex}
.esp-autopack b{color:var(--esp-oro);font-weight:400}
.esp-autopack .esp-ico{flex:0 0 auto;font-size:1.05rem;line-height:1.35}
.esp-flag{display:inline-block;background:var(--esp-oro);color:#000;font-size:.66rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:0;margin-left:10px;vertical-align:middle}

.esp-aside h3{font-size:.98rem;margin-bottom:6px;text-transform:uppercase;letter-spacing:.12em;font-weight:300}
.esp-lines{border-top:1px solid var(--esp-borde);padding-top:16px;margin-bottom:16px;min-height:60px}
.esp-line{display:flex;justify-content:space-between;gap:12px;font-size:.9rem;padding:8px 0}
.esp-line .esp-l{color:var(--esp-texto)}
.esp-line .esp-l small{display:block;color:var(--esp-suave);font-size:.76rem;margin-top:2px}
.esp-line .esp-v{font-weight:600;white-space:nowrap}
.esp-line.esp-desc .esp-l,.esp-line.esp-desc .esp-v{color:var(--esp-verde)}
.esp-empty{font-size:.88rem;color:var(--esp-suave);text-align:center;padding:22px 6px}
.esp-envio{display:flex;align-items:flex-start;gap:10px;background:var(--esp-cian-claro);
  border:1px solid rgba(0,153,255,.4);border-radius:var(--esp-radio);padding:14px 16px;font-size:.85rem;
  color:#8fcfff;line-height:1.55;margin-top:6px}
.esp-envio b{color:var(--esp-cian);font-weight:400}
.esp-envio .esp-ico{flex:0 0 auto;font-size:1.05rem;line-height:1.3;color:var(--esp-cian)}
/* OJO CON LA ESPECIFICIDAD: estas dos son <p>, y arriba hay un `.esp-app p
   {margin:0}` que vale (0,1,1). Escritas como `.esp-nota` —(0,1,0)— pierden y
   el margen NO se aplica: el hueco que dice el codigo no es el que se ve. Por
   eso llevan `.esp-app` delante. Se descubrio el 09/09/2026, cuando Aitor pidio
   despegar la nota del boton y resulto que su margen llevaba muerto desde el
   principio: no era la cifra, era que no llegaba a aplicarse. */

/* En blanco desde la 2.2.1: es el aviso de que los centros educativos pueden
   quedar exentos de IVA, y en gris no lo leia nadie. Con --esp-texto, para que
   siga el ajuste «Color del texto» del panel. */
.esp-app .esp-iva{font-size:.78rem;color:var(--esp-texto);line-height:1.55;margin-top:18px;
  padding-top:14px;border-top:1px solid var(--esp-borde)}
/* 26 px de aire: va justo debajo del boton azul, que es una pieza grande y
   maciza, y pegada parecia el pie del propio boton. */
.esp-app .esp-nota{font-size:.74rem;color:#777;margin-top:26px;line-height:1.5}

.esp-btns{display:flex;flex-direction:column;gap:9px;margin-top:20px}
.esp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:15px 18px;border-radius:var(--esp-radio);border:1px solid var(--esp-cian);
  font-size:.85rem;font-weight:400;font-family:inherit;text-transform:uppercase;letter-spacing:.12em;
  cursor:pointer;transition:all .15s;text-decoration:none}
.esp-btn-1{background:var(--esp-cian);color:#000}
.esp-btn-1:hover{background:#000;color:var(--esp-cian)}
.esp-btn:disabled{opacity:.4;cursor:not-allowed}

.esp-consent{display:flex;gap:10px;align-items:flex-start;margin-top:20px;font-size:.8rem;color:var(--esp-suave)}
.esp-consent input{margin-top:3px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--esp-cian)}
.esp-consent a{color:var(--esp-cian)}

.esp-alert{border-radius:var(--esp-radio);padding:13px 15px;font-size:.86rem;margin-top:16px;display:none;line-height:1.55}
.esp-alert.on{display:block}
.esp-alert-ok{background:rgba(57,217,138,.08);border:1px solid rgba(57,217,138,.4);color:var(--esp-verde)}
.esp-alert-ok b{color:#8fffc4;font-weight:400}
.esp-alert-bad{background:rgba(255,107,107,.08);border:1px solid rgba(255,107,107,.4);color:var(--esp-rojo)}
.esp-alert-bad b{color:#ffb0b0;font-weight:400}

/* El responsive vive al final del archivo, junto al resto del maquetado de la
   2.0.0. Aqui solo queda lo del panel pegajoso, que no depende del ancho de
   las rejillas sino de si hay sitio para que se quede fijo al desplazar. */
@media (min-width:901px){ .esp-aside-in{position:sticky;top:100px} }

/* Trampa para robots: invisible para las personas, presente para los scripts. */
.esp-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Lista de sugerencias del buscador de municipios.
   Sustituye al <datalist>, que el navegador filtraba comparando literalmente
   y escondia «Málaga (Málaga)» a quien escribia «malaga» sin tilde. */
.esp-auto { position: relative; }

.esp-sug {
	position: absolute;
	z-index: 40;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 240px;
	overflow-y: auto;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: var(--esp-gris, #0d0d0d);
	border: 1px solid var(--esp-borde, #333);
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}

.esp-sug[hidden] { display: none; }

.esp-sug-op {
	padding: 8px 10px;
	border-radius: 6px;
	font-size: .92rem;
	line-height: 1.35;
	color: var(--esp-texto, #fff);
	cursor: pointer;
}

.esp-sug-op:hover,
.esp-sug-op.on {
	background: var(--esp-cian, #0099ff);
	color: #fff;
}

/* Asterisco de campo obligatorio */
.esp-obl {
	color: var(--esp-oro, #ffcc00);
	text-decoration: none;
	border: 0;
	font-weight: 700;
	cursor: help;
}
.esp-leyenda {
	margin: 10px 0 0;
	font-size: .78rem;
	color: var(--esp-suave, #a4a4a4);
}

/* Foto de la actividad en su tarjeta.
   Solo las tarjetas que tienen foto pasan a flex: asi las que no la llevan
   siguen maquetandose exactamente igual que antes. La foto no debe poder
   robarle el clic a la etiqueta, o pinchar encima no marcaria la casilla. */
.esp-act:has(.esp-act-foto) {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.esp-act:has(.esp-act-foto) .esp-act-in { flex: 1 1 auto; min-width: 0; }

.esp-act-foto {
	flex: 0 0 auto;
	width: var(--esp-foto, 56px);
	height: var(--esp-foto, 56px);
	border-radius: var(--esp-foto-radio, 8px);
	overflow: hidden;
	background: var(--esp-borde, #333);
	pointer-events: none;
}
.esp-act-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

/* Navegadores sin :has() — la tarjeta se queda en bloque y la foto flota.
   Se ve algo peor, pero se ve, y se puede pinchar igual. */
@supports not selector(:has(*)) {
	.esp-act-foto { float: left; margin-right: 12px; }
	.esp-act .esp-act-in { overflow: hidden; }
}

/* Foto grande encima del texto. Es el mismo trozo de HTML: solo cambia como se
   coloca, segun el interruptor «Foto grande encima del texto» de los ajustes.
   El alto sale del mismo ajuste de tamano, que aqui deja de ser un lado del
   cuadrado y pasa a ser la altura de la banda. */
.esp-fotos-arriba .esp-act:has(.esp-act-foto) { display: block; }
.esp-fotos-arriba .esp-act-foto {
	float: none;
	display: block;
	width: auto;
	height: var(--esp-foto, 140px);
	/* Los margenes negativos cancelan el relleno de la tarjeta para que la
	   banda llegue de borde a borde. Dejarla dentro del relleno la deja
	   descolocada respecto a la casilla, que es justo lo que se nota. */
	margin: -16px -16px 12px -48px;
	border-radius: var(--esp-radio, 0) var(--esp-radio, 0) 0 0;
}
/* Y la casilla baja por debajo de la banda, o quedaria encima de la foto. */
.esp-fotos-arriba .esp-act:has(.esp-act-foto) .esp-tick {
	top: calc(var(--esp-foto, 140px) + 14px);
}


/* ======================================================================
   TARJETAS CENTRADAS (2.0.0)
   ----------------------------------------------------------------------
   El croquis de Aitor lleva la foto arriba y el texto centrado debajo. El
   problema es la casilla: iba pegada a la izquierda y por eso la tarjeta
   tenia 48 px de relleno por ese lado. Con el texto centrado ese relleno
   descentra todo, asi que en este modo la casilla se sube a la esquina,
   flotando sobre la foto, y la tarjeta recupera su relleno normal.

   Las tarjetas sin foto llevan la clase esp-sin-foto, que pone el JS: sin
   banda donde apoyar la casilla hay que bajarle el texto para que no se le
   meta debajo. Se hace con una clase y no con :has() porque :has() no lo
   entienden todos los navegadores y aqui el fallo no seria cosmetico: el
   nombre de la actividad quedaria tapado.
   ====================================================================== */
.esp-centrado .esp-act{padding:16px;text-align:center}
/* Lleva .esp-app delante a proposito: la regla que baja la casilla por debajo
   de la banda usa :has(), que puntua como una clase mas, y sin esto ganaria
   ella y la casilla se quedaria flotando en mitad de la tarjeta. */
.esp-app.esp-centrado .esp-act .esp-tick{left:auto;right:14px;top:14px;z-index:2;
  box-shadow:0 0 0 3px rgba(0,0,0,.45)}
.esp-centrado .esp-act.esp-sin-foto{padding-top:44px}
.esp-centrado .esp-act-in{display:block}
.esp-centrado .esp-act-nom{justify-content:center}
.esp-centrado .esp-act-desde{text-align:center}

/* Con la foto encima, la banda va a sangre y hay que cancelar el relleno de
   la tarjeta por los cuatro lados. El valor de la izquierda ya no es -48 px
   —eso era el hueco de la casilla—, sino -16, como los demas. */
.esp-centrado.esp-fotos-arriba .esp-act-foto{margin:-16px -16px 12px -16px}

/* ======================================================================
   LOS PACKS (2.0.0)
   ----------------------------------------------------------------------
   Antes el pack era una tarjeta mas dentro de la rejilla de actividades,
   ocupando la fila entera. Ahora tienen su propia zona al final, uno al
   lado del otro, y se les da algo mas de aire: son el producto caro.
   ====================================================================== */
/* MAQUETADO DE LA TARJETA (Aitor, 09/09/2026): el descuento arriba y
   centrado, debajo el nombre del pack, debajo la frase. Todo centrado, y
   centrado SIEMPRE —aunque el resto de la pagina no lo este— porque son dos
   tarjetas anchas una al lado de otra y alineadas a la izquierda quedaban
   descolgadas. Por eso la casilla se sube a la esquina tambien aqui: con el
   texto centrado, dejarla a la izquierda le comeria 48 px de relleno a un
   lado y descolocaria el centro. */
.esp-packs .esp-act{padding:20px;padding-top:44px;text-align:center}
.esp-app .esp-packs .esp-act .esp-tick{left:auto;right:14px;top:14px;z-index:2;
  box-shadow:0 0 0 3px rgba(0,0,0,.45)}
.esp-packs .esp-act-in{display:block}
.esp-packs .esp-act-nom{display:block}
/* La frase «Destinado a unos 300 alumnos/as…», en blanco y no en gris: es
   informacion que decide cual de los dos packs le toca al centro. */
.esp-packs .esp-act-desc{color:var(--esp-texto)}
/* El distintivo del descuento deja de colgar del nombre: linea propia,
   centrado y con aire por debajo. */
.esp-packs .esp-flag{display:block;width:-moz-fit-content;width:fit-content;
  margin:0 auto 12px;margin-left:auto}
.esp-packs .esp-act-desde{text-align:center}
.esp-zona-packs[hidden]{display:none}

/* ======================================================================
   PANTALLAS ESTRECHAS
   ----------------------------------------------------------------------
   Debajo de 900 px las dos columnas de arriba se apilan y el panel del
   presupuesto pierde el borde lateral, que ahi no separa nada. Las
   actividades bajan a dos columnas y, ya en movil, a una: --esp-cols solo
   manda en ordenador porque con 320 px de ancho tres tarjetas no se leen.
   ====================================================================== */
@media (max-width:900px){
  .esp-top{grid-template-columns:1fr}
  .esp-aside{border-left:0;border-top:1px solid var(--esp-borde)}
  .esp-acts{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .esp-acts,.esp-packs{grid-template-columns:1fr}
  .esp-grid{grid-template-columns:1fr}
  .esp-head{padding:28px 20px 24px}
  .esp-form,.esp-aside,.esp-zona{padding-left:20px;padding-right:20px}
}