/* =====================================================================
   Mi progreso · el calendario
   ---------------------------------------------------------------------
   OJO CON LOS COMENTARIOS: aquí dentro no puede haber una llave suelta.
   `anidar()` busca bloques por llaves y no distingue los comentarios, así que
   una llave en un comentario se come las reglas que vengan detrás. El
   `build.py` se para si encuentra una, pero conviene saberlo antes.
   ===================================================================== */

/* EL PAPEL DE LA PÁGINA, DE LADO A LADO
   ---------------------------------------------------------------------
   El fondo lo pinta `.opr` del núcleo, y esta caja mide lo que mide el
   contenido del tema: en el móvil se veía una franja blanca a los dos lados de
   la portada y del calendario, mientras las bandas de «Mi progreso» y de
   Batallas sí llegaban. Lo vio Sergio en una captura del móvil.

   NO SE ESTIRA ESTA CAJA, SE ESTIRA CADA SECCIÓN. Estirar esta obligaría a
   recortarla con `clip-path`, y dentro vive la sala de las batallas, que es
   `position:fixed`: un `clip-path` en un antepasado suyo la recorta, y no se
   nota en la caja —el rectángulo sigue siendo correcto— solo en que no se
   pinta. Batallas queda fuera con un `:not()` porque su banda ya se estira
   sola.

   Y por eso el aire de arriba, el de abajo y el que había entre la portada y lo
   de debajo dejan de ser relleno y margen de ESTA caja y pasan a ser relleno de
   las secciones: lo que queda entre dos secciones no lo pinta nadie, y ahí
   volvería a asomar el blanco del tema de lado a lado. */
.opr-ca.opr-ca-pagina{padding:0 !important}
.opr-ca.opr-ca-pagina>*{max-width:1180px !important; margin-left:auto !important; margin-right:auto !important;
  padding-left:clamp(18px,4vw,40px) !important; padding-right:clamp(18px,4vw,40px) !important}
.opr-ca.opr-ca-pagina>*:not(.opr-bt-panel){
  box-shadow:0 0 0 100vmax var(--fondo) !important;
  clip-path:inset(0 -100vmax) !important}
.opr-ca.opr-ca-pagina>*:first-child{padding-top:clamp(28px,4vw,52px) !important}
.opr-ca.opr-ca-pagina>*:last-child{padding-bottom:clamp(60px,7vw,90px) !important}
.opr-ca .opr-ca-oculto{position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip-path:inset(50%) !important;
  white-space:nowrap !important}


/* --- la cabecera --- */
/* El aire va en relleno y no en margen: un margen queda fuera de la caja y ahí
   el fondo de la sección no llega. */
.opr-ca .opr-ca-cabeza{margin-bottom:0 !important; padding-bottom:clamp(20px,2.6vw,32px) !important}
.opr-ca .opr-ca-panel{padding-top:clamp(24px,3.4vw,40px) !important}
.opr-ca .opr-ca-rotulo{font-size:.9375rem !important; font-weight:600 !important; color:var(--suave) !important; margin-bottom:8px !important}
.opr-ca .opr-ca-h1{font-size:clamp(1.9rem,3.6vw,2.7rem) !important; font-weight:800 !important; letter-spacing:-.03em !important;
  line-height:1.06 !important; color:var(--tinta) !important}
.opr-ca .opr-ca-sub{margin-top:12px !important; font-size:1rem !important; color:var(--suave) !important; max-width:58ch !important; line-height:1.6 !important}


/* --- sin sesión --- */
.opr-ca .opr-ca-fuera{background:var(--superficie) !important; border:1px solid var(--borde) !important;
  border-radius:var(--radio) !important; padding:clamp(24px,3.4vw,40px) !important; max-width:640px !important}
.opr-ca .opr-ca-fuera h2{font-size:1.25rem !important; font-weight:800 !important; letter-spacing:-.02em !important; color:var(--tinta) !important}
.opr-ca .opr-ca-fuera p{margin-top:10px !important; font-size:.9375rem !important; color:var(--suave) !important; line-height:1.6 !important; max-width:52ch !important}
.opr-ca .opr-ca-fuera-botones{display:flex !important; gap:10px !important; flex-wrap:wrap !important; margin-top:20px !important}


/* --- el rótulo del calendario ---
   Desde la v1.0.10 esta página lleva dos paneles, así que cada uno dice lo que
   es. Antes lo decía la cabecera de la página, que ahora presenta a los dos. */
.opr-ca .opr-ca-titulo{margin-bottom:16px !important}
.opr-ca .opr-ca-h2{font-size:clamp(1.25rem,2.2vw,1.5rem) !important; font-weight:800 !important;
  letter-spacing:-.02em !important; line-height:1.15 !important; color:var(--tinta) !important}
.opr-ca .opr-ca-titulo p{margin-top:8px !important; font-size:.9375rem !important; color:var(--suave) !important;
  line-height:1.6 !important; max-width:60ch !important}


/* --- tus fechas: una sola caja, negra ---
   Negra porque es lo que manda en la pantalla: cuánto queda. Y una sola,
   porque dos cajas diciendo lo mismo compiten en vez de ayudar. */
.opr-ca .opr-ca-fechas{background:var(--p950) !important; border-radius:var(--radio) !important;
  padding:18px 22px !important; margin-bottom:18px !important}
.opr-ca .opr-ca-fechas-titulo{display:block !important; font-size:.75rem !important; font-weight:700 !important;
  color:rgba(255,255,255,.55) !important; margin-bottom:12px !important; text-transform:none !important}
.opr-ca .opr-ca-fechas ul{display:grid !important; gap:12px !important}
.opr-ca .opr-ca-fechas li{display:grid !important; grid-template-columns:auto minmax(0,1fr) auto !important;
  gap:6px 16px !important; align-items:baseline !important}
.opr-ca .opr-ca-cuantos{font-size:1.75rem !important; font-weight:800 !important; letter-spacing:-.03em !important; color:#fff !important;
  line-height:1 !important; font-variant-numeric:tabular-nums !important; white-space:nowrap !important; min-width:74px !important}
.opr-ca .opr-ca-cuantos small{display:block !important; font-size:.6875rem !important; font-weight:600 !important;
  color:rgba(255,255,255,.55) !important; letter-spacing:0 !important; margin-top:4px !important}
.opr-ca .opr-ca-fechas-que{min-width:0 !important}
.opr-ca .opr-ca-fechas-que b{display:block !important; color:#fff !important; font-size:1rem !important; font-weight:700 !important;
  letter-spacing:-.01em !important; overflow-wrap:anywhere !important}
.opr-ca .opr-ca-fechas-que span{display:block !important; color:rgba(255,255,255,.68) !important; font-size:.8125rem !important;
  margin-top:3px !important; line-height:1.45 !important}


/* El sello de «oficial»: filete y palabra, como en las convocatorias. Nada de
   píldora de color, que aquí el color ya significa otra cosa. */
.opr-ca .opr-ca-oficial{display:inline-block !important; font-size:.6875rem !important; font-weight:700 !important; font-style:normal !important;
  color:rgba(255,255,255,.9) !important; border-left:2px solid rgba(255,255,255,.5) !important;
  padding-left:7px !important; margin-right:8px !important; vertical-align:2px !important}


/* --- las que ya se han hecho, plegadas al pie --- */
.opr-ca .opr-ca-pasadas{margin-top:16px !important; border-top:1px solid rgba(255,255,255,.14) !important; padding-top:12px !important}
.opr-ca .opr-ca-pasadas summary{
  cursor:pointer !important; list-style:none !important; color:rgba(255,255,255,.6) !important; font-size:.8125rem !important;
  font-weight:600 !important; min-height:38px !important; display:flex !important; align-items:center !important; gap:8px !important;
}
.opr-ca .opr-ca-pasadas summary::-webkit-details-marker{display:none !important}
.opr-ca .opr-ca-pasadas summary:hover{color:#fff !important}

/* La punta la dibujamos: `list-style:none` se lleva por delante la del
   navegador. Y sin punto y coma dentro de la url(), que `blindar()` parte la
   declaración por ahí. */
.opr-ca .opr-ca-pasadas summary::after{
  content:'' !important; width:11px !important; height:8px !important; flex:none !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' opacity='.6'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-size:11px 8px !important;
  transition:transform .14s ease !important;
}
.opr-ca .opr-ca-pasadas[open] summary::after{transform:rotate(180deg) !important}
.opr-ca .opr-ca-pasadas ul{display:grid !important; gap:8px !important; margin-top:10px !important}
.opr-ca .opr-ca-pasadas li{display:flex !important; gap:12px !important; align-items:baseline !important; flex-wrap:wrap !important;
  font-size:.875rem !important; color:rgba(255,255,255,.62) !important; line-height:1.4 !important}
.opr-ca .opr-ca-pasadas li b{font-weight:700 !important; color:rgba(255,255,255,.8) !important; white-space:nowrap !important;
  font-variant-numeric:tabular-nums !important}
.opr-ca .opr-ca-pasadas li span{min-width:0 !important; overflow-wrap:anywhere !important}
.opr-ca .opr-ca-fechas-quitar{background:transparent !important; border:0 !important; color:rgba(255,255,255,.6) !important;
  font-size:.8125rem !important; cursor:pointer !important; text-decoration:underline !important; padding:10px !important;
  min-height:40px !important; align-self:center !important}
.opr-ca .opr-ca-fechas-quitar:hover{color:#fff !important}


/* --- fijar el examen desde una convocatoria --- */
.opr-ca .opr-ca-fijar{display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; gap:16px !important; align-items:center !important;
  background:var(--superficie) !important; border:1px solid var(--borde) !important; border-radius:var(--radio) !important;
  padding:16px 20px !important; margin-bottom:18px !important}
.opr-ca .opr-ca-fijar-texto b{display:block !important; font-size:.9375rem !important; font-weight:700 !important; color:var(--tinta) !important}
.opr-ca .opr-ca-fijar-texto span{display:block !important; font-size:.8125rem !important; color:var(--tenue) !important; margin-top:4px !important;
  line-height:1.5 !important; max-width:62ch !important}
.opr-ca .opr-ca-fijar-control{display:flex !important; gap:8px !important; align-items:center !important; flex-wrap:wrap !important}
.opr-ca .opr-ca-fijar select{min-height:42px !important; padding:0 12px !important; border-radius:var(--radio-s) !important;
  background:var(--p50) !important; box-shadow:inset 0 0 0 1.5px var(--borde) !important; color:var(--tinta) !important;
  font-size:.875rem !important; max-width:100% !important}


/* --- el cuerpo: solo el mes --- v1.0.14
   La columna de al lado —el día, el formulario y la leyenda— se fue el 24 de
   septiembre de 2026: ahora todo eso se abre pegado a la casilla. El mes se
   queda con el ancho entero, que es lo que hace que una casilla quepa dos
   apuntes en vez de uno. */
.opr-ca .opr-ca-cuerpo{min-width:0 !important}
.opr-ca .opr-ca-cal{background:var(--superficie) !important; border:1px solid var(--borde) !important;
  border-radius:var(--radio) !important; padding:clamp(14px,1.8vw,20px) !important; min-width:0 !important}

/* SIN `flex-wrap`. Esa es la corrección: con él, un mes largo empujaba las
   flechas a la línea de abajo y la barra cambiaba de alto según el mes. Ahora
   lo que cede es el desplegable, que se estrecha; los botones no. */
.opr-ca .opr-ca-barra{display:flex !important; align-items:center !important; justify-content:space-between !important;
  margin-bottom:14px !important; gap:12px !important; flex-wrap:nowrap !important}
.opr-ca .opr-ca-elegir{display:flex !important; gap:8px !important; align-items:center !important; min-width:0 !important; flex:1 1 auto !important}

/* La flecha se dibuja aquí, y no es un capricho: el núcleo lleva
   `appearance:none` en todo lo que sea un control, así que un `select` se
   queda sin la punta de flecha del navegador y deja de parecer un desplegable.
   Va como imagen de fondo —una punta, monocroma, del color de la tinta— y el
   hueco se hace con el relleno de la derecha.

   Y SIN `;charset=utf-8` DENTRO DE LA URL. `blindar()` reparte los `!important`
   partiendo el cuerpo de la regla por los puntos y coma, así que un punto y
   coma dentro de una `url()` la corta por la mitad y la flecha no aparece:
   pasó a la primera. El `build.py` ahora se planta si encuentra uno. */
/* `width:auto` NO SOBRA, y esto costó una subida al sitio.
   Astra trae un `width:100%` para todo `select` en su hoja. Aquí no se declaraba ancho
   ninguno —se daba por hecho que un `select` se ajusta a su texto—, así que
   mandaba el tema: el año ocupaba la barra entera y el mes se quedaba en 40 px,
   con la flecha sola. En la vista previa no salía porque allí no hay tema; por
   eso desde hoy la vista previa carga una imitación de Astra.
   Lo que no se declara, lo declara otro. */
.opr-ca .opr-ca-elegir select{
  width:auto !important;
  min-height:40px !important; padding:0 30px 0 10px !important; border-radius:var(--radio-s) !important; cursor:pointer !important;
  box-shadow:inset 0 0 0 1.5px var(--borde) !important;
  color:var(--tinta) !important; font-size:1rem !important; font-weight:700 !important; letter-spacing:-.014em !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23121A22' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 10px center !important;
  background-size:11px 8px !important;
  background-color:transparent !important;
}
.opr-ca .opr-ca-elegir select:hover{background-color:var(--p100) !important}
.opr-ca .opr-ca-elegir select:focus-visible{box-shadow:inset 0 0 0 1.5px var(--p500) !important}

/* El mes cede sitio; el año no, que son cuatro cifras y no se recortan. */
.opr-ca #opr-ca-mes-sel{width:auto !important; min-width:0 !important; flex:1 1 auto !important; max-width:172px !important}
.opr-ca #opr-ca-anio-sel{width:auto !important; flex:none !important}
.opr-ca .opr-ca-nav{display:flex !important; gap:6px !important; flex:none !important}
.opr-ca .opr-ca-nav button{width:40px !important; height:40px !important; border-radius:var(--radio-s) !important; background:transparent !important;
  box-shadow:inset 0 0 0 1.5px var(--borde) !important; color:var(--tinta) !important; cursor:pointer !important;
  display:grid !important; place-items:center !important; font-size:1rem !important; line-height:1 !important}
.opr-ca .opr-ca-nav button:hover{background:var(--p100) !important}


/* OJO CON EL SELECTOR, QUE AQUÍ ESTABA EL «Hoy» DESCUADRADO
   ---------------------------------------------------------------------
   Estaba escrito `.opr-ca-hoy-btn`, que después de anidar pesa (0,2,0), y
   enfrente tenía `.opr-ca .opr-ca-nav button`, que pesa (0,2,1) por el nombre
   de etiqueta. Ganaba la de arriba y su `width:40px` aplastaba el `width:auto`:
   la palabra «Hoy» no cabía y salía cortada. Entre dos `!important` manda la
   especificidad, y una etiqueta suma. Con el padre delante pesa (0,3,0) y gana.
   Es la misma trampa del `[hidden]` del banner de cookies, de otra manera. */
.opr-ca .opr-ca-nav .opr-ca-hoy-btn{padding:0 14px !important; width:auto !important; min-width:56px !important;
  font-size:.875rem !important; font-weight:600 !important}
.opr-ca .opr-ca-dias, .opr-ca .opr-ca-rejilla{display:grid !important; grid-template-columns:repeat(7,minmax(0,1fr)) !important; gap:5px !important}
.opr-ca .opr-ca-dias div{text-align:center !important; font-size:.6875rem !important; font-weight:700 !important; color:var(--tenue) !important;
  padding-bottom:8px !important; letter-spacing:.02em !important}


/* EL NÚMERO, SIEMPRE ARRIBA (v1.0.21). Era un `display:block` dentro de un
   botón, y un botón centra en vertical lo que lleva: el día vacío salía con el
   número en medio y el día con tareas, arriba. Con las tiras en el móvil la
   diferencia saltaba a la vista. En columna y pegado arriba, como un
   calendario. */
.opr-ca .opr-ca-celda{position:relative !important; min-height:84px !important; border-radius:var(--radio-s) !important;
  background:var(--p50) !important; border:1.5px solid transparent !important; padding:7px 7px 6px !important;
  text-align:left !important; cursor:pointer !important; display:flex !important; flex-direction:column !important;
  justify-content:flex-start !important; align-items:stretch !important; width:100% !important; min-width:0 !important; overflow:hidden !important;
  transition:border-color .12s, background .12s !important}
.opr-ca .opr-ca-celda:hover{border-color:var(--borde2) !important}
.opr-ca .opr-ca-celda.es-fuera{background:transparent !important; cursor:default !important}
.opr-ca .opr-ca-celda.es-fuera .opr-ca-n{color:var(--p300) !important}
.opr-ca .opr-ca-celda.es-hoy{background:var(--superficie) !important; border-color:var(--tinta) !important}
.opr-ca .opr-ca-celda[aria-pressed="true"]{background:var(--superficie) !important; border-color:var(--p500) !important;
  box-shadow:0 0 0 3px var(--p100) !important}
.opr-ca .opr-ca-n{font-size:.8125rem !important; font-weight:700 !important; color:var(--suave) !important; display:block !important; margin-bottom:5px !important}
.opr-ca .opr-ca-celda.es-hoy .opr-ca-n{color:var(--tinta) !important}
.opr-ca .opr-ca-chip{display:block !important; font-size:.6875rem !important; line-height:1.3 !important; border-radius:5px !important;
  padding:2px 5px !important; margin-bottom:3px !important; overflow:hidden !important; text-overflow:ellipsis !important;
  white-space:nowrap !important; font-weight:600 !important}
.opr-ca .opr-ca-chip.es-hecho{opacity:.5 !important; text-decoration:line-through !important}
.opr-ca .opr-ca-mas{font-size:.625rem !important; color:var(--tenue) !important; font-weight:600 !important}
.opr-ca .opr-ca-mas .es-corto{display:none !important}


/* --- arrastrar una tarea a otro día · v1.0.21 ---
   La tarea se coge con el ratón o manteniendo el dedo. Sin selección de texto
   ni menú del navegador al mantener pulsado: estorbarían al coger. */
.opr-ca .opr-ca-chip[data-id]{cursor:grab !important; -webkit-user-select:none !important; user-select:none !important;
  -webkit-touch-callout:none !important}
.opr-ca .opr-ca-chip.es-cogida{opacity:.3 !important}
.opr-ca .opr-ca-panel.es-arrastrando, .opr-ca .opr-ca-panel.es-arrastrando *{cursor:grabbing !important; -webkit-user-select:none !important; user-select:none !important}

/* El día sobre el que se va a soltar. El borde de tinta es el del día
   elegido, así que se distingue por el fondo. */
.opr-ca .opr-ca-celda.es-destino{border-color:var(--tinta) !important; background:var(--p100) !important}
.opr-ca .opr-ca-marca{position:absolute !important; top:6px !important; right:6px !important; width:8px !important; height:8px !important; border-radius:50% !important;
  background:var(--tinta) !important}


/* EL LÁPIZ. Solo en la casilla elegida y al pasar por encima, y NUNCA en las
   de fuera del mes. Si saliera en las 42 casillas, el mes se llenaría de
   iconos y dejaría de leerse como un mes.

   Va abajo a la derecha y no arriba: arriba a la derecha está la marca del día
   de examen, y dos cosas en la misma esquina se pisan el día que coinciden.
   Mide 26 px de caja aunque el dibujo sea de 13: es lo que hace que se pueda
   pulsar con el dedo. */
.opr-ca .opr-ca-lapiz{position:absolute !important; right:4px !important; bottom:4px !important; width:26px !important; height:26px !important;
  border-radius:7px !important; display:none !important; place-items:center !important; color:var(--tenue) !important;
  background:var(--superficie) !important; box-shadow:0 0 0 1px var(--borde) !important}
.opr-ca .opr-ca-celda[aria-pressed="true"] .opr-ca-lapiz{display:grid !important}
.opr-ca .opr-ca-celda:hover .opr-ca-lapiz{display:grid !important}
.opr-ca .opr-ca-lapiz:hover{color:var(--tinta) !important}


/* =====================================================================
   LA CAJA DEL DÍA · v1.0.14
   ---------------------------------------------------------------------
   Se coloca desde el guion con `position:fixed` y las coordenadas de la
   casilla. Por debajo de 700 px se convierte en una hoja pegada abajo: una
   burbuja de 320 px apuntando a una casilla de 44 en un móvil no apunta a
   nada.

   EL VELO NO ES DECORACIÓN: es lo que permite cerrar tocando fuera sin poner
   un escuchador en todo el documento que se pelee con los clics de la rejilla.
   Va casi transparente en pantalla ancha —la caja está pegada a su día y
   oscurecer el mes entero sería perder de vista de qué día se está hablando— y
   con más cuerpo en móvil, donde la hoja sí tapa.
   ===================================================================== */
/* LAS DOS VENTANAS VAN EN EL CENTRO, en cualquier ancho. Lo pidió Sergio el 25
   de septiembre y sustituye a lo de antes: la caja pegada a su casilla en el
   escritorio y subiendo desde abajo en el móvil.

   Centrar con `top:50%` y `translate(-50%,-50%)` y no con `inset:0` y márgenes
   automáticos: así la ventana crece hacia los dos lados desde el centro cuando
   se apuntan notas, en vez de crecer hacia abajo y acabar con el botón de
   «Apuntar» fuera de la pantalla. El techo lo pone `max-height`, y lo que no
   quepa se desliza por dentro.

   Y EL VELO SE OSCURECE IGUAL EN TODAS LAS PANTALLAS. Iba casi transparente en
   el escritorio porque la caja estaba pegada a su día y había que seguir viendo
   el mes; ahora la ventana está en medio y lleva la fecha escrita en su
   cabecera, así que el mes de detrás ya no es la referencia. */
.opr-ca .opr-ca-velo{position:fixed !important; inset:0 !important; z-index:40 !important; background:rgba(5,31,32,.34) !important}
.opr-ca .opr-ca-caja{position:fixed !important; z-index:41 !important; top:50% !important; left:50% !important;
  transform:translate(-50%,-50%) !important; width:min(340px,calc(100vw - 20px)) !important;
  max-height:min(560px,calc(100vh - 20px)) !important; overflow:auto !important; overscroll-behavior:contain !important;
  background:var(--superficie) !important; border:1px solid var(--borde2) !important;
  border-radius:var(--radio) !important; padding:14px 16px 16px !important; box-shadow:var(--sombra) !important}

/* La ventana recibe el foco al abrirse —para el tabulador y para la tecla de
   escape— y eso le pintaría el anillo del navegador alrededor de todo. No es un
   control: no se pulsa, solo recoge el foco. */
.opr-ca .opr-ca-caja:focus, .opr-ca .opr-ca-ajustes:focus{outline:none !important}
.opr-ca .opr-ca-caja-cab{display:flex !important; align-items:flex-start !important; justify-content:space-between !important;
  gap:10px !important; margin-bottom:12px !important}
.opr-ca .opr-ca-caja-cab b{display:block !important; font-size:.9375rem !important; font-weight:800 !important;
  letter-spacing:-.012em !important; color:var(--tinta) !important}
.opr-ca .opr-ca-caja-cab span{display:block !important; font-size:.75rem !important; color:var(--tenue) !important; margin-top:1px !important}
.opr-ca .opr-ca-cerrar{width:34px !important; height:34px !important; flex:0 0 auto !important; border-radius:9px !important; border:0 !important;
  background:transparent !important; color:var(--tenue) !important; cursor:pointer !important; font-size:1.25rem !important;
  display:grid !important; place-items:center !important}
.opr-ca .opr-ca-cerrar:hover{background:var(--p100) !important; color:var(--tinta) !important}
.opr-ca .opr-ca-lista{display:grid !important; gap:6px !important; margin-bottom:12px !important}
.opr-ca .opr-ca-lista:empty{display:none !important; margin-bottom:0 !important}
.opr-ca .opr-ca-nota{display:grid !important; grid-template-columns:auto minmax(0,1fr) auto !important; gap:10px !important;
  align-items:start !important; padding:8px 9px !important; border-radius:var(--radio-s) !important; background:var(--p50) !important}
.opr-ca .opr-ca-punto{width:10px !important; height:10px !important; border-radius:3px !important; margin-top:6px !important}
.opr-ca .opr-ca-nota p{font-size:.875rem !important; line-height:1.45 !important; color:var(--tinta) !important; word-break:break-word !important}
.opr-ca .opr-ca-nota.es-hecho p{color:var(--tenue) !important; text-decoration:line-through !important}
.opr-ca .opr-ca-acciones{display:flex !important; gap:2px !important}
.opr-ca .opr-ca-acciones button{width:34px !important; height:34px !important; border-radius:8px !important; background:transparent !important;
  border:0 !important; cursor:pointer !important; color:var(--tenue) !important; display:grid !important; place-items:center !important; font-size:.9375rem !important}
.opr-ca .opr-ca-acciones button:hover{background:var(--p200) !important; color:var(--tinta) !important}
.opr-ca .opr-ca-form textarea{width:100% !important; padding:9px 11px !important; min-height:52px !important; border-radius:var(--radio-s) !important;
  background:var(--p50) !important; box-shadow:inset 0 0 0 1.5px var(--borde) !important; font-size:.9375rem !important;
  color:var(--tinta) !important; resize:vertical !important; line-height:1.5 !important}
.opr-ca .opr-ca-form textarea:focus{background:var(--superficie) !important; box-shadow:inset 0 0 0 1.5px var(--p500) !important}


/* LAS FICHAS DE TEMÁTICA LLEVAN EL NOMBRE, y ahí está media petición de Sergio.
   Antes eran seis cuadrados de color y la leyenda que decía qué era cada uno
   vivía al final de la página: para escribir había que bajar, leer y volver.
   Con el nombre dentro de la ficha, la leyenda ya no hace falta en ninguna
   parte. */
.opr-ca .opr-ca-colores{display:flex !important; gap:6px !important; margin:10px 0 12px !important; flex-wrap:wrap !important}
.opr-ca .opr-ca-color{display:inline-flex !important; align-items:center !important; gap:7px !important; min-height:34px !important;
  padding:0 11px 0 9px !important; border-radius:999px !important; cursor:pointer !important;
  border:1.5px solid var(--borde) !important; background:var(--p50) !important; color:var(--suave) !important;
  font-size:.8125rem !important; font-weight:600 !important; max-width:100% !important}
.opr-ca .opr-ca-color i{width:10px !important; height:10px !important; border-radius:3px !important; flex:0 0 auto !important}
.opr-ca .opr-ca-color span{overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important}
.opr-ca .opr-ca-color[aria-pressed="true"]{border-color:var(--tinta) !important; color:var(--tinta) !important;
  background:var(--superficie) !important}
.opr-ca .opr-ca-form-pie{display:flex !important; align-items:center !important; gap:10px !important; justify-content:space-between !important}
.opr-ca .opr-ca-form-pie .opr-btn{flex:1 1 auto !important; min-height:42px !important}
.opr-ca .opr-ca-mini{min-height:38px !important; padding:0 12px !important; border-radius:999px !important; cursor:pointer !important;
  border:1px solid var(--borde2) !important; background:transparent !important; color:var(--suave) !important;
  font-size:.8125rem !important; font-weight:600 !important; white-space:nowrap !important}
.opr-ca .opr-ca-mini:hover{color:var(--tinta) !important; border-color:var(--tinta) !important}
.opr-ca .opr-ca-mini[disabled]{opacity:.45 !important; cursor:default !important}


/* El aviso de que algo no ha salido. Ámbar, que en este sistema es aviso. */
.opr-ca .opr-ca-aviso{margin-top:12px !important; font-size:.8125rem !important; line-height:1.45 !important; color:#8A5A00 !important;
  background:#FFF7E6 !important; border-radius:var(--radio-s) !important; padding:10px 12px !important}


/* =====================================================================
   EL ENGRANAJE Y SUS AJUSTES
   ===================================================================== */
.opr-ca .opr-ca-engranaje{display:grid !important; place-items:center !important; color:var(--suave) !important}
.opr-ca .opr-ca-engranaje:hover{color:var(--tinta) !important}
.opr-ca .opr-ca-ajustes{position:fixed !important; z-index:41 !important; top:50% !important; left:50% !important;
  transform:translate(-50%,-50%) !important; width:min(420px,calc(100vw - 24px)) !important;
  max-height:min(620px,calc(100vh - 32px)) !important; overflow:auto !important; overscroll-behavior:contain !important;
  background:var(--superficie) !important; border:1px solid var(--borde2) !important;
  border-radius:var(--radio) !important; padding:16px 18px 18px !important; box-shadow:var(--sombra) !important}
.opr-ca .opr-ca-temas{display:grid !important; gap:6px !important; margin-bottom:10px !important}
.opr-ca .opr-ca-tema{padding:5px 9px !important; border-radius:var(--radio-s) !important; background:var(--p50) !important}
.opr-ca .opr-ca-tema-arriba{display:grid !important; grid-template-columns:auto minmax(0,1fr) auto !important;
  gap:10px !important; align-items:center !important}

/* El punto de color es ahora un botón: abre y cierra la paleta de su temática.
   Se le da tamaño de dedo —34 px— aunque el punto siga midiendo doce. */
.opr-ca .opr-ca-tono{width:34px !important; height:34px !important; flex:0 0 auto !important; border:0 !important; background:transparent !important;
  border-radius:9px !important; cursor:pointer !important; display:grid !important; place-items:center !important}
.opr-ca .opr-ca-tono:hover{background:var(--p200) !important}
.opr-ca .opr-ca-tono[aria-expanded="true"]{background:var(--p200) !important}
.opr-ca .opr-ca-tema .opr-ca-punto{width:12px !important; height:12px !important; border-radius:4px !important; margin-top:0 !important}
.opr-ca .opr-ca-tema-nombre{font-size:.875rem !important; color:var(--tinta) !important; background:transparent !important;
  border:0 !important; border-bottom:1px dashed var(--borde2) !important; padding:7px 0 !important; width:100% !important; min-height:36px !important}
.opr-ca .opr-ca-tema-nombre:focus{border-bottom-color:var(--tinta) !important; background:var(--superficie) !important}
.opr-ca .opr-ca-quitar{width:34px !important; height:34px !important; border-radius:8px !important; border:0 !important; background:transparent !important;
  color:var(--tenue) !important; cursor:pointer !important; font-size:1.125rem !important; display:grid !important; place-items:center !important}
.opr-ca .opr-ca-quitar:hover{background:var(--no100) !important; color:var(--no600) !important}

/* Las doce muestras, EN REJILLA Y NO EN FILA CON SALTO. Con `flex-wrap` caben
   once y la doceava baja sola a una segunda línea: la caja parece rota y el
   último color parece otra cosa. En rejilla se reparten el ancho que haya, sea
   el que sea, y en móvil pasan a dos filas de seis a propósito. */
.opr-ca .opr-ca-muestras{display:grid !important; grid-template-columns:repeat(12,minmax(0,1fr)) !important;
  gap:5px !important; margin-top:9px !important}
.opr-ca .opr-ca-muestra{aspect-ratio:1 !important; min-height:22px !important; border-radius:7px !important; border:0 !important;
  cursor:pointer !important; position:relative !important}
.opr-ca .opr-ca-muestra[aria-pressed="true"]::after{content:'' !important; position:absolute !important; inset:-3px !important;
  border-radius:10px !important; box-shadow:0 0 0 2px var(--tinta) !important}
.opr-ca .opr-ca-nota-pie{font-size:.75rem !important; color:var(--tenue) !important; line-height:1.5 !important; margin-top:10px !important}
.opr-ca .opr-ca-ajustes-pie{margin-top:14px !important}
.opr-ca .opr-ca-ajustes-pie .opr-btn{width:100% !important; min-height:44px !important}


/* --- estrecho --- */
/* EN ESTRECHO YA NO HAY PUNTITOS: SE VE UN POCO DEL TEXTO (v1.0.21).
   Lo pidió Sergio el 27 de octubre de 2026, «que se vea como en Apple
   Calendar», para poder coger la tarea con el dedo y llevarla a otro día. Los
   puntitos no se podían coger y no decían qué había. Ahora cada casilla lleva
   hasta dos tiras con el principio del texto, cortadas sin puntos suspensivos
   (en 40 px tres puntos se comen media palabra), y «+1» si hay más. */

@media (max-width:900px){
.opr-ca .opr-ca-celda{min-height:74px !important; padding:6px 4px 5px !important}
.opr-ca .opr-ca-chip{font-size:.625rem !important; padding:2px 4px !important; border-radius:4px !important; margin-bottom:2px !important}
.opr-ca .opr-ca-fijar{grid-template-columns:minmax(0,1fr) !important}
.opr-ca .opr-ca-fijar select{width:100% !important}
}
@media (max-width:560px){
.opr-ca .opr-ca-celda{min-height:68px !important; border-radius:6px !important}
.opr-ca .opr-ca-n{font-size:.75rem !important; margin:0 0 3px 2px !important}
.opr-ca .opr-ca-chip{font-size:.5625rem !important; line-height:1.25 !important; padding:1px 3px !important; border-radius:3px !important;
    margin-bottom:2px !important; text-overflow:clip !important; letter-spacing:-.01em !important}
.opr-ca .opr-ca-mas{font-size:.5625rem !important; margin-left:2px !important}
.opr-ca .opr-ca-mas .es-largo{display:none !important}
.opr-ca .opr-ca-mas .es-corto{display:inline !important}
}


/* --- EN EL ORDENADOR, LAS VENTANAS SON MÁS GRANDES ---
   Lo pidió Sergio: los mismos 340 y 420 píxeles que en el móvil llenan la
   pantalla y en un portátil se quedan en una pastilla en medio de un mes que
   ocupa 1.200. Aquí no hay que apretar nada, así que se les da ancho, techo y
   aire, y al campo de escribir tres renglones en vez de dos: casi todo lo que
   se apunta un día cabe en uno, pero lo que no, se lee entero sin deslizar. */

@media (min-width:700px){
.opr-ca .opr-ca-caja{width:min(460px,calc(100vw - 48px)) !important;
    max-height:min(680px,calc(100vh - 48px)) !important; padding:18px 20px 20px !important}
.opr-ca .opr-ca-form textarea{min-height:76px !important}
.opr-ca .opr-ca-ajustes{width:min(580px,calc(100vw - 48px)) !important;
    max-height:min(760px,calc(100vh - 48px)) !important; padding:20px 22px 22px !important}
.opr-ca .opr-ca-tema{padding:8px 11px !important}
.opr-ca .opr-ca-temas{gap:8px !important}
}
@media (max-width:699px){

  /* Y EL CAMPO, A 16 PÍXELES CLAVADOS. Es la otra mitad de lo del zoom: el
     navegador del móvil amplía la página él solo en cuanto se enfoca un campo
     que mide menos de 16 px, y los nuestros iban a 15. Con el foco fuera del
     campo ya no pasa al abrir, pero pasaría igual al tocarlo para escribir. No
     es una preferencia de tamaño: por debajo de esa cifra el navegador hace
     zoom y no hay forma de pedirle que no lo haga. */
.opr-ca .opr-ca-form textarea{font-size:16px !important}
.opr-ca .opr-ca-tema-nombre{font-size:16px !important}


  /* Fuera el lápiz: en una casilla de 37 px ocupa 26 y no deja sitio a pulsar
     «el día» sin pulsarlo a él. Ahí abajo el toque abre la hoja y ya está. */
.opr-ca .opr-ca-lapiz{display:none !important}
.opr-ca .opr-ca-celda[aria-pressed="true"] .opr-ca-lapiz{display:none !important}
.opr-ca .opr-ca-celda:hover .opr-ca-lapiz{display:none !important}

  /* LAS VENTANAS NO SE COMEN LA PANTALLA. Iban a 78vh y 88vh y en un móvil eso
     es casi todo: se leían como un cambio de pantalla, no como algo abierto
     encima del calendario. Con estos topes siempre queda calendario alrededor,
     y lo que no cabe se desliza por dentro, que para eso llevan
     `overflow:auto`. */
.opr-ca .opr-ca-caja{width:calc(100vw - 20px) !important; max-height:min(64vh,470px) !important}
.opr-ca .opr-ca-ajustes{width:calc(100vw - 20px) !important; max-height:min(76vh,580px) !important}
}
@media (max-width:560px){

  /* Doce muestras en 360 px salen a 24 px y el dedo falla. A seis por fila
     miden el doble y son dos filas, que es lo que hay. */
.opr-ca .opr-ca-muestras{grid-template-columns:repeat(6,minmax(0,1fr)) !important; gap:6px !important}


  /* LA BARRA DEL MES, EN DOS FILAS AQUÍ ABAJO Y SOLO AQUÍ. Y hay que explicar
     por qué, porque contradice a medias una decisión del 2 de septiembre.

     Aquella decía «nunca en dos líneas», y lo que arreglaba era que las flechas
     se cayeran SOLAS y de forma distinta según el mes: con «septiembre de 2026»
     bajaban y con «mayo de 2026» no, así que la barra cambiaba de alto al pasar
     de mes. Eso seguiría estando mal.

     Lo de aquí es otra cosa: dos filas SIEMPRE por debajo de 560 px, midan lo
     que midan los desplegables. La barra tiene ahora cinco controles —dos
     desplegables, dos flechas, «Hoy» y el engranaje— y en 390 px no caben en
     una fila: medido, el desplegable del mes se quedaba en 30 px y no se leía
     ni una letra del nombre. Entre un mes ilegible y dos filas estables, dos
     filas. */
.opr-ca .opr-ca-barra{gap:8px !important; flex-wrap:wrap !important}
.opr-ca .opr-ca-elegir{flex:1 1 100% !important}
.opr-ca .opr-ca-elegir select{flex:1 1 auto !important}
.opr-ca .opr-ca-nav{flex:1 1 100% !important; justify-content:space-between !important}
.opr-ca .opr-ca-elegir{gap:6px !important}
.opr-ca .opr-ca-elegir select{padding:0 24px 0 7px !important; font-size:.9375rem !important;
    background-position:right 7px center !important}
.opr-ca #opr-ca-mes-sel{max-width:none !important}
.opr-ca .opr-ca-nav{gap:4px !important}
.opr-ca .opr-ca-fechas{padding:16px !important}
.opr-ca .opr-ca-fechas li{grid-template-columns:auto minmax(0,1fr) !important; row-gap:8px !important}
.opr-ca .opr-ca-fechas-quitar{grid-column:1 / -1 !important; justify-self:start !important; padding-left:0 !important}

  /* El mes, casi de borde a borde (v1.0.21): para que se lea un poco del
     texto de cada tarea hacen falta los píxeles que se comían los dos
     márgenes. Diez de cada lado salen del relleno del panel. */
.opr-ca .opr-ca-cal{padding:12px 6px !important; margin-left:-10px !important; margin-right:-10px !important}
.opr-ca .opr-ca-dias, .opr-ca .opr-ca-rejilla{gap:3px !important}
.opr-ca .opr-ca-celda{padding:4px 2px 3px !important}
}


/* =====================================================================
   v1.0.23 · EL MES CABE EN LA PANTALLA, COMO UN APPLE O UN GOOGLE CALENDAR
   ---------------------------------------------------------------------
   Lo pidió Sergio el 27 de octubre de 2026. Una sola rejilla con filetes
   finos en vez de 42 baldosas sueltas, el número arriba y el de hoy en un
   círculo de tinta. Y EL ALTO DE CADA FILA SALE DE LA PANTALLA: seis filas
   caben en lo que queda después de la barra del mes, con suelo y techo para
   que en un monitor enorme no salgan casillas de un palmo ni en un portátil
   bajo se queden sin sitio para las dos tiras.
   ===================================================================== */
.opr-ca .opr-ca-cuerpo{margin-bottom:18px !important}
.opr-ca .opr-ca-dias{gap:0 !important}
.opr-ca .opr-ca-rejilla{gap:0 !important; border-top:1px solid var(--borde) !important; border-left:1px solid var(--borde) !important;
  border-radius:12px !important; overflow:hidden !important}
.opr-ca .opr-ca-celda{height:clamp(64px,calc((100vh - 230px) / 6),112px) !important; min-height:0 !important;
  border-radius:0 !important; border:0 !important; border-right:1px solid var(--borde) !important; border-bottom:1px solid var(--borde) !important;
  background:var(--superficie) !important; padding:6px 6px 4px !important}
.opr-ca .opr-ca-celda:hover{background:var(--p50) !important; border-color:var(--borde) !important}
.opr-ca .opr-ca-celda.es-fuera{background:var(--p50) !important}
.opr-ca .opr-ca-celda.es-hoy{background:var(--superficie) !important; border-color:var(--borde) !important}
.opr-ca .opr-ca-celda[aria-pressed="true"]{background:var(--superficie) !important; border-color:var(--borde) !important;
  box-shadow:inset 0 0 0 2px var(--p500) !important}
.opr-ca .opr-ca-celda.es-destino{background:var(--p100) !important; border-color:var(--borde) !important;
  box-shadow:inset 0 0 0 2px var(--tinta) !important}
.opr-ca .opr-ca-n{display:grid !important; place-items:center !important; width:24px !important; height:24px !important; margin:0 0 3px !important;
  border-radius:999px !important; font-size:.75rem !important}
.opr-ca .opr-ca-celda.es-hoy .opr-ca-n{background:var(--p950) !important; color:#fff !important}


/* Los botones del mes, en oscuro. El engranaje no: es otra cosa. */
.opr-ca .opr-ca-nav button{background:var(--p950) !important; color:#fff !important; box-shadow:none !important}
.opr-ca .opr-ca-nav button:hover{background:var(--p800) !important}
.opr-ca .opr-ca-nav .opr-ca-engranaje{background:transparent !important; color:var(--suave) !important;
  box-shadow:inset 0 0 0 1.5px var(--borde) !important}
.opr-ca .opr-ca-nav .opr-ca-engranaje:hover{background:var(--p100) !important; color:var(--tinta) !important}
@media (max-width:900px){
.opr-ca .opr-ca-celda{height:clamp(62px,calc((100vh - 250px) / 6),96px) !important; padding:5px 3px 3px !important}
}
@media (max-width:560px){
.opr-ca .opr-ca-celda{height:clamp(58px,calc((100vh - 300px) / 6),84px) !important; padding:3px 2px 2px !important}
.opr-ca .opr-ca-n{width:20px !important; height:20px !important; font-size:.6875rem !important; margin:0 0 2px 1px !important}
.opr-ca .opr-ca-rejilla{border-radius:8px !important}
}


/* =====================================================================
   v1.0.24 · EL MES Y SU RESUMEN, Y LA VENTANA DE APUNTAR
   ---------------------------------------------------------------------
   Sergio mandó la captura de un calendario con el resumen del mes a la
   derecha y una ventana de «Nueva tarea» en medio con el fondo difuminado.
   El color es el del sistema: tinta, no verde. Los desplegables, los
   interruptores y la luz de los botones los pone `bravozulu-progreso`, que está
   en la misma página (documento 01, §5.7).
   ===================================================================== */
.opr-ca .opr-ca-cuerpo{display:grid !important; grid-template-columns:minmax(0,1fr) 330px !important; gap:18px !important; align-items:stretch !important}
.opr-ca .opr-ca-cal{border:0 !important; border-radius:22px !important; background:#fff !important;
  box-shadow:inset 0 1px 0 #fff, 0 1px 3px rgba(5,31,32,.06), 0 14px 34px rgba(5,31,32,.07) !important}


/* La barra: el mes como título, las flechas, la etiqueta y el +. */
.opr-ca .opr-ca-barra{gap:10px !important}
.opr-ca .opr-ca-elegir{gap:2px !important}
.opr-ca .opr-ca-elegir .opr-ui-sel{display:inline-block !important; width:auto !important}
.opr-ca .opr-ca-elegir .opr-ui-sel-btn{min-height:44px !important; padding:0 8px 0 10px !important; border:0 !important; background:transparent !important;
  box-shadow:none !important; font-size:1.375rem !important; font-weight:800 !important; letter-spacing:-.02em !important; gap:6px !important}
.opr-ca .opr-ca-elegir .opr-ui-sel-btn:hover{background:var(--p100) !important; box-shadow:none !important}
.opr-ca .opr-ca-nav{gap:6px !important}
.opr-ca .opr-ca-nav button{border-radius:999px !important}
.opr-ca .opr-ca-acc{display:flex !important; gap:8px !important; flex:none !important}
.opr-ca .opr-ca-icono-btn, .opr-ca .opr-ca-mas-btn{display:grid !important; place-items:center !important; width:42px !important; height:42px !important; padding:0 !important;
  border-radius:999px !important; cursor:pointer !important}
.opr-ca .opr-ca-mas-btn{background-color:var(--p950) !important; color:#fff !important; border:0 !important;
  background-image:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 60%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.35),
             0 2px 4px rgba(5,31,32,.26), 0 8px 18px rgba(5,31,32,.24) !important;
  transition:transform .14s !important}
.opr-ca .opr-ca-mas-btn:hover{transform:translateY(-1px) !important}


/* El resumen. */
.opr-ca .opr-ca-resumen{display:flex !important; flex-direction:column !important; min-height:0 !important; max-height:100% !important; overflow:hidden !important;
  background:#fff !important; border-radius:22px !important; padding:20px 18px 16px !important;
  box-shadow:inset 0 1px 0 #fff, 0 1px 3px rgba(5,31,32,.06), 0 14px 34px rgba(5,31,32,.07) !important}
.opr-ca .opr-ca-r-cab{margin-bottom:16px !important}
.opr-ca .opr-ca-r-cab b{display:block !important; font-size:1.125rem !important; font-weight:800 !important; letter-spacing:-.015em !important; color:var(--tinta) !important}
.opr-ca .opr-ca-r-cab span{display:block !important; margin-top:2px !important; font-size:.8125rem !important; color:var(--tenue) !important}
.opr-ca .opr-ca-r-lista{flex:1 1 auto !important; min-height:0 !important; overflow:auto !important; margin:0 -6px !important; padding:0 6px !important}
.opr-ca .opr-ca-r-dia + .opr-ca-r-dia{margin-top:14px !important}
.opr-ca .opr-ca-r-dcab{display:flex !important; align-items:baseline !important; justify-content:space-between !important; gap:10px !important; margin-bottom:4px !important}
.opr-ca .opr-ca-r-dcab b{font-size:.875rem !important; font-weight:800 !important; color:var(--tinta) !important}
.opr-ca .opr-ca-r-dcab.es-hoy b{color:var(--tinta) !important; text-decoration:underline !important; text-underline-offset:3px !important; text-decoration-thickness:2px !important}
.opr-ca .opr-ca-r-dcab span{font-size:.75rem !important; font-weight:700 !important; color:var(--tenue) !important; font-variant-numeric:tabular-nums !important}
.opr-ca .opr-ca-r-t{display:grid !important; grid-template-columns:38px 4px minmax(0,1fr) !important; gap:8px !important; align-items:center !important;
  min-height:42px !important; border-bottom:1px solid var(--borde) !important}
.opr-ca .opr-ca-r-t:last-child{border-bottom:0 !important}

/* El círculo mide 24, pero el botón 38: es el mínimo para el dedo. */
.opr-ca .opr-ca-r-check{position:relative !important; width:38px !important; height:38px !important; padding:0 !important; border:0 !important; border-radius:999px !important;
  cursor:pointer !important; background:transparent !important; margin-left:-7px !important}
.opr-ca .opr-ca-r-check::before{content:"" !important; position:absolute !important; left:7px !important; top:7px !important; width:24px !important; height:24px !important;
  border-radius:999px !important; background:#fff !important; border:1.5px solid var(--borde2) !important; box-sizing:border-box !important;
  box-shadow:inset 0 1px 2px rgba(5,31,32,.08) !important}
.opr-ca .opr-ca-r-check:hover::before{border-color:var(--tinta) !important}
.opr-ca .opr-ca-r-check[aria-pressed="true"]::before{background-color:var(--p950) !important; border-color:var(--p950) !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.4 8.4 13.8 15 6.6' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:center !important; background-size:14px 14px !important}
.opr-ca .opr-ca-r-raya{display:block !important; width:4px !important; height:22px !important; border-radius:2px !important}
.opr-ca .opr-ca-r-txt{min-width:0 !important; padding:8px 0 !important; border:0 !important; background:transparent !important; text-align:left !important; cursor:pointer !important;
  font-size:.9375rem !important; color:var(--tinta) !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important}
.opr-ca .opr-ca-r-txt:hover{text-decoration:underline !important}
.opr-ca .opr-ca-r-t.es-hecho .opr-ca-r-txt{color:var(--tenue) !important; text-decoration:line-through !important}
.opr-ca .opr-ca-r-nada{font-size:.875rem !important; color:var(--tenue) !important; line-height:1.5 !important}
.opr-ca .opr-ca-r-mas{align-self:center !important; margin-top:10px !important; min-height:40px !important; padding:0 18px !important; border-radius:999px !important;
  font-size:.875rem !important; font-weight:700 !important}
.opr-ca .opr-ca-r-mas[hidden]{display:none !important}


/* La ventana de apuntar y la de las temáticas: en medio, con el fondo
   difuminado, y con su animación al entrar y al salir. */
.opr-ca .opr-ca-velo{z-index:99990 !important; background:rgba(5,31,32,.26) !important;
  -webkit-backdrop-filter:blur(10px) saturate(.9) !important; backdrop-filter:blur(10px) saturate(.9) !important;
  animation:opr-ca-entra-velo .24s ease-out both !important}
.opr-ca .opr-ca-caja, .opr-ca .opr-ca-ajustes{z-index:99991 !important; border:0 !important; border-radius:24px !important; background:#fff !important;
  box-shadow:inset 0 1px 0 #fff, 0 2px 8px rgba(5,31,32,.08), 0 30px 80px rgba(5,31,32,.28) !important;
  animation:opr-ca-entra .32s cubic-bezier(.2,.8,.2,1) both !important}
.opr-ca .opr-ca-velo.es-saliendo{animation:opr-ca-sale-velo .18s ease-in both !important}
.opr-ca .opr-ca-caja.es-saliendo, .opr-ca .opr-ca-ajustes.es-saliendo{animation:opr-ca-sale .18s ease-in both !important}
@keyframes opr-ca-entra{from{opacity:0; transform:translate(-50%,-50%) translateY(18px) scale(.96)}
  to{opacity:1; transform:translate(-50%,-50%)}}
@keyframes opr-ca-sale{from{opacity:1; transform:translate(-50%,-50%)}
  to{opacity:0; transform:translate(-50%,-50%) translateY(12px) scale(.97)}}
@keyframes opr-ca-entra-velo{from{opacity:0} to{opacity:1}}
@keyframes opr-ca-sale-velo{from{opacity:1} to{opacity:0}}
.opr-ca .opr-ca-caja-cab b{font-size:1.375rem !important; letter-spacing:-.02em !important}
.opr-ca .opr-ca-caja-cab span{font-size:.875rem !important; margin-top:3px !important}
.opr-ca .opr-ca-cerrar{width:40px !important; height:40px !important; border-radius:999px !important; background:#fff !important; color:var(--tinta) !important;
  border:1px solid rgba(5,31,32,.08) !important; box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(5,31,32,.07), 0 6px 14px rgba(5,31,32,.07) !important}
.opr-ca .opr-ca-campo{display:grid !important; gap:6px !important; min-width:0 !important}
.opr-ca .opr-ca-campo label{font-size:.8125rem !important; font-weight:700 !important; color:var(--suave) !important}
.opr-ca .opr-ca-form textarea, .opr-ca .opr-ca-form input[type="date"]{width:100% !important; min-height:46px !important; padding:11px 14px !important;
  border-radius:14px !important; background:#fff !important; color:var(--tinta) !important; font-size:1rem !important; line-height:1.4 !important;
  border:1px solid rgba(5,31,32,.1) !important;
  box-shadow:inset 0 1px 2px rgba(5,31,32,.06) !important}
.opr-ca .opr-ca-form textarea:focus, .opr-ca .opr-ca-form input[type="date"]:focus{border-color:var(--p500) !important;
  box-shadow:0 0 0 3px var(--p100) !important}
.opr-ca .opr-ca-form{display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:16px !important}
.opr-ca .opr-ca-form-pie{margin-top:4px !important}
.opr-ca .opr-ca-form-pie .opr-btn{min-height:48px !important; border-radius:999px !important; font-weight:700 !important}
@media (min-width:700px){
.opr-ca .opr-ca-caja{width:min(720px,calc(100vw - 48px)) !important; padding:26px 28px 28px !important}
.opr-ca .opr-ca-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; column-gap:20px !important}
.opr-ca .opr-ca-campo.es-texto{grid-column:1 / -1 !important}
.opr-ca .opr-ca-form-pie{grid-column:1 / -1 !important}
.opr-ca .opr-ca-ajustes{padding:26px 28px 28px !important}
}
@media (max-width:1100px){
.opr-ca .opr-ca-cuerpo{grid-template-columns:minmax(0,1fr) !important}
.opr-ca .opr-ca-resumen{max-height:none !important}
.opr-ca .opr-ca-r-lista{max-height:420px !important}
}
@media (max-width:560px){
.opr-ca .opr-ca-elegir .opr-ui-sel-btn{font-size:1.125rem !important}
.opr-ca .opr-ca-nav{flex:1 1 auto !important; justify-content:flex-start !important}
.opr-ca .opr-ca-icono-btn, .opr-ca .opr-ca-mas-btn{width:40px !important; height:40px !important}
}
@media (prefers-reduced-motion:reduce){
.opr-ca .opr-ca-velo, .opr-ca .opr-ca-caja, .opr-ca .opr-ca-ajustes{animation:none !important}
}


/* =====================================================================
   v1.0.26 · EL MÓVIL, BIEN (27 de octubre de 2026)
   ---------------------------------------------------------------------
   Sergio: «en la versión móvil se ve horroroso». Lo que se veía mal y cómo
   queda:
   - El mes y el año salían como dos cajas enormes y el año se salía de la
     tarjeta: ahora son un título sin caja (`data-ui-plano`, de bravozulu-ui).
   - La barra, en dos filas fijas: arriba el mes con la etiqueta y el +,
     debajo ‹ Hoy ›.
   - La tarjeta del mes tenía márgenes negativos y empujaba la página dos
     píxeles a la derecha: fuera.
   - Las casillas, más bajas: el mes entero en una pantalla de móvil.
   ===================================================================== */
.opr-ca .opr-ca-elegir .opr-ui-sel{width:auto !important; flex:none !important}
@media (max-width:560px){
.opr-ca .opr-ca-cal{margin-left:0 !important; margin-right:0 !important; padding:14px 10px 10px !important; border-radius:20px !important}
.opr-ca .opr-ca-barra{display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; grid-template-areas:"mes acc" "nav nav" !important;
    gap:8px 8px !important; margin-bottom:10px !important}
.opr-ca .opr-ca-elegir{grid-area:mes !important; flex:none !important; gap:0 !important; min-width:0 !important}
.opr-ca .opr-ca-acc{grid-area:acc !important}
.opr-ca .opr-ca-nav{grid-area:nav !important; justify-content:flex-start !important; gap:6px !important}
.opr-ca .opr-ca-nav button{width:38px !important; height:38px !important}
.opr-ca .opr-ca-nav .opr-ca-hoy-btn{min-width:64px !important}
.opr-ca .opr-ca-icono-btn, .opr-ca .opr-ca-mas-btn{width:40px !important; height:40px !important}
.opr-ca .opr-ca-celda{height:clamp(54px,calc((100vh - 330px) / 6),74px) !important}
.opr-ca .opr-ca-resumen{padding:18px 16px 14px !important; border-radius:20px !important}
}


/* --- lo que se esconde, se esconde ---
   Y esto va al final del fichero a propósito. El atributo `hidden` pesa lo
   mismo que una clase, así que empata con cualquier regla de sección que ponga
   `display` y decide el orden. Con la raíz delante y la clase pegada, estas
   dos pesan (0,3,0) y ganan siempre. Se comprueba mirando el `display`
   calculado, nunca el atributo: el atributo puede estar puesto y la caja
   verse igual. */
.opr-ca .opr-ca-fechas[hidden]{display:none !important}
.opr-ca .opr-ca-pasadas[hidden]{display:none !important}
.opr-ca .opr-ca-fijar[hidden]{display:none !important}
.opr-ca .opr-ca-aviso[hidden]{display:none !important}

/* Y las tres capas de la v1.0.14. Sin esto, la caja del día y los ajustes se
   quedan puestos encima de la página desde que carga: es la trampa nº 4 del
   documento 02, y ya ha mordido en cookies, en el diccionario y en entrevista.
   Se comprueba mirando el `display` calculado, no el atributo. */
.opr-ca .opr-ca-muestras[hidden]{display:none !important}
.opr-ca .opr-ca-velo[hidden]{display:none !important}
.opr-ca .opr-ca-caja[hidden]{display:none !important}
.opr-ca .opr-ca-ajustes[hidden]{display:none !important}


/* --- el plan de estudio --- v1.0.20
   Lo pide el alumno: una caja como la de fijar el examen, plegada. Al abrirla
   sale el formulario. Con un plan hecho, la caja dice cuál es y se borra. */
.opr-ca .opr-ca-plan{margin-bottom:18px !important}
.opr-ca .opr-ca-plan-aviso{border-radius:var(--radio-s) !important; padding:12px 16px !important; margin-bottom:12px !important; font-size:.9375rem !important; line-height:1.45 !important}
.opr-ca .opr-ca-plan-aviso.es-bien{background:var(--ok100) !important; color:var(--ok900) !important}
.opr-ca .opr-ca-plan-aviso.es-mal{background:var(--no100) !important; color:var(--no900) !important}
.opr-ca .opr-ca-plan-caja, .opr-ca .opr-ca-plan-hay{background:var(--superficie) !important; border:1px solid var(--borde) !important; border-radius:var(--radio) !important}
.opr-ca .opr-ca-plan-hay{display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; gap:16px !important; align-items:center !important; padding:16px 20px !important}
.opr-ca .opr-ca-plan-caja > summary{display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; gap:16px !important; align-items:center !important;
  padding:16px 20px !important; cursor:pointer !important; list-style:none !important}
.opr-ca .opr-ca-plan-caja > summary::-webkit-details-marker{display:none !important}
.opr-ca .opr-ca-plan-caja > summary::marker{content:"" !important}
.opr-ca .opr-ca-plan-caja[open] .opr-ca-plan-abrir{display:none !important}
.opr-ca .opr-ca-plan-abrir{pointer-events:none !important; min-height:44px !important; display:inline-flex !important; align-items:center !important}
.opr-ca .opr-ca-plan-form{display:flex !important; flex-direction:column !important; gap:16px !important; padding:4px 20px 20px !important; border-top:1px solid var(--borde) !important; padding-top:18px !important}
.opr-ca .opr-ca-plan-fila{display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important}
.opr-ca .opr-ca-plan-fila label{display:flex !important; flex-direction:column !important; gap:6px !important; min-width:0 !important}
.opr-ca .opr-ca-plan-fila span, .opr-ca .opr-ca-plan-semana legend{font-size:.875rem !important; font-weight:700 !important; color:var(--tinta) !important}
.opr-ca .opr-ca-plan-fila input, .opr-ca .opr-ca-plan-fila select{min-height:44px !important; padding:0 12px !important; border-radius:var(--radio-s) !important;
  background:var(--p50) !important; box-shadow:inset 0 0 0 1.5px var(--borde) !important; color:var(--tinta) !important; font-size:1rem !important; width:100% !important}
.opr-ca .opr-ca-plan-nota{font-size:.8125rem !important; color:var(--tenue) !important; margin-top:-6px !important}
.opr-ca .opr-ca-plan-semana legend{margin-bottom:8px !important}
.opr-ca .opr-ca-plan-semana > div{display:grid !important; grid-template-columns:repeat(7,minmax(0,1fr)) !important; gap:6px !important}
.opr-ca .opr-ca-plan-dia{position:relative !important; cursor:pointer !important}
.opr-ca .opr-ca-plan-dia input{position:absolute !important; opacity:0 !important; width:1px !important; height:1px !important}
.opr-ca .opr-ca-plan-dia span[aria-hidden]{display:flex !important; align-items:center !important; justify-content:center !important; min-height:44px !important; border-radius:var(--radio-s) !important;
  box-shadow:inset 0 0 0 1.5px var(--borde2) !important; font-size:.9375rem !important; font-weight:700 !important; color:var(--tenue) !important}
.opr-ca .opr-ca-plan-dia input:checked + span{background:var(--p950) !important; color:#fff !important; box-shadow:none !important}
.opr-ca .opr-ca-plan-dia input:focus-visible + span{outline:2px solid var(--p950) !important; outline-offset:2px !important}
.opr-ca .opr-ca-plan-check{display:flex !important; align-items:center !important; gap:12px !important; min-height:44px !important; font-size:.9375rem !important; color:var(--tinta) !important; cursor:pointer !important}
.opr-ca .opr-ca-plan-check input{width:20px !important; height:20px !important; flex:none !important; border-radius:6px !important; box-shadow:inset 0 0 0 1.5px var(--borde2) !important; background:var(--superficie) !important;
  display:grid !important; place-content:center !important}
.opr-ca .opr-ca-plan-check input:checked{background:var(--p950) !important; box-shadow:none !important}
.opr-ca .opr-ca-plan-check input:checked::after{content:"" !important; width:10px !important; height:6px !important; margin-top:-3px !important; border-left:2px solid #fff !important; border-bottom:2px solid #fff !important; transform:rotate(-45deg) !important}
.opr-ca .opr-ca-plan-form .opr-btn{align-self:flex-start !important}
.opr-ca .opr-ca-de-plan{display:inline-block !important; font-size:.6875rem !important; font-weight:700 !important; color:var(--tenue) !important; box-shadow:inset 0 0 0 1px var(--borde2) !important;
  border-radius:999px !important; padding:1px 7px !important; margin-left:4px !important; vertical-align:1px !important}
@media (max-width:560px){
.opr-ca .opr-ca-plan-hay, .opr-ca .opr-ca-plan-caja > summary{grid-template-columns:minmax(0,1fr) !important}
.opr-ca .opr-ca-plan-fila{grid-template-columns:minmax(0,1fr) !important}
.opr-ca .opr-ca-plan-form .opr-btn{align-self:stretch !important; justify-content:center !important}
}