/**
 * LA ZONA PRIVADA DEL ALUMNO.
 *
 * Mi cuenta, Mis cursos y el panel de afiliado, con el mismo lenguaje que
 * el modo de estudio: contorno de 1 px en vez de sombras, un solo
 * redondeo, rotulos pequenos en mayusculas con la marca roja, arena para
 * lo conseguido y rojo solo para la accion principal.
 *
 * Por que estas pantallas y no otras: el alumno salta de aqui al modo de
 * estudio en dos clics, asi que es donde mas chirriaba el salto. Y es
 * donde no hay riesgo comercial: quien esta aqui ya ha comprado.
 *
 * Aqui no hay ni un color escrito a mano: todo sale de marca.css.
 *
 * Se carga SOLO en estas pantallas (ver modulo.php). Fase 2 de la
 * reforma visual, 24/08/2026.
 *
 * @package FASPRO
 */


/* ==========================================================
   1. EL MENU DE LA IZQUIERDA
   ==========================================================
   Deja de ser una caja con relleno y pasa a ser una lista con una linea
   roja marcando donde estas, igual que los rotulos del modo de estudio.
   Los separadores salen de las tres claves que abren grupo: el dinero
   (pedidos), tus datos (detalles) y la salida. */

.woocommerce-MyAccount-navigation ul{
  list-style:none;margin:0;padding:0;
  border:0;background:0;border-left:1px solid var(--fp-linea)}

.woocommerce-MyAccount-navigation li{position:relative;border:0;background:0;margin:0}

.woocommerce-MyAccount-navigation li a{
  display:block;padding:9px 0 9px 16px;
  color:var(--fp-tinta-3);text-decoration:none;
  font-size:14.5px;font-weight:400;line-height:1.4;
  border:0;background:0;transition:color .15s}

.woocommerce-MyAccount-navigation li a:hover{color:var(--fp-tinta-2);background:0}

.woocommerce-MyAccount-navigation li.is-active > a,
.woocommerce-MyAccount-navigation li.wd-active > a{color:var(--fp-tinta);font-weight:600;background:0}

.woocommerce-MyAccount-navigation li.is-active::before,
.woocommerce-MyAccount-navigation li.wd-active::before{
  content:"";position:absolute;left:-1px;top:9px;bottom:9px;width:2px;background:var(--fp-rojo)}

/* Los tres grupos: estudiar / dinero / tus datos, y la salida aparte. */
.woocommerce-MyAccount-navigation-link--orders,
.woocommerce-MyAccount-navigation-link--edit-account,
.woocommerce-MyAccount-navigation-link--customer-logout{
  margin-top:11px;padding-top:11px}
.woocommerce-MyAccount-navigation-link--orders::after,
.woocommerce-MyAccount-navigation-link--edit-account::after,
.woocommerce-MyAccount-navigation-link--customer-logout::after{
  content:"";position:absolute;left:16px;right:0;top:0;height:1px;background:var(--fp-linea)}

.woocommerce-MyAccount-navigation-link--customer-logout a{font-size:13.5px}


/* ==========================================================
   2. ROTULOS DE SECCION
   ==========================================================
   La misma pieza que en el modo de estudio: marca roja de 3 px, texto
   pequeno en mayusculas. Se usa en el escritorio y donde haga falta. */

.fpc-rot{display:flex;align-items:center;gap:9px;margin:0 0 14px}
.fpc-rot i{width:3px;height:13px;background:var(--fp-rojo);display:block;flex:0 0 auto}
.fpc-rot span{font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fp-tinta-2)}
.fpc-rot em{margin-left:auto;font-style:normal;font-size:12px;color:var(--fp-tinta-3)}
.fpc-zona{margin-bottom:34px}
.fpc-zona:last-child{margin-bottom:0}
.fpc-nota{color:var(--fp-tinta-2);font-size:14.5px;margin:0;max-width:60ch}
.fpc-nota a{color:var(--fp-arena)}


/* ==========================================================
   3. LA TARJETA DEL CURSO EN MARCHA
   ========================================================== */

.fpc-curso{border:1px solid var(--fp-linea);border-radius:var(--fp-radio);
  padding:20px 22px;background:var(--fp-velo)}
.fpc-curso-cab{display:flex;align-items:flex-start;gap:14px;margin-bottom:15px}
.fpc-curso h3{margin:0;font-size:16.5px;font-weight:600;letter-spacing:-.01em;
  flex:1;line-height:1.35;color:var(--fp-tinta)}
.fpc-barra{height:3px;background:rgba(255,255,255,.09);border-radius:2px;
  overflow:hidden;margin-bottom:11px}
.fpc-barra i{display:block;height:100%;background:var(--fp-arena)}
.fpc-barra i.fpc-cero{background:var(--fp-linea-fuerte)}
.fpc-curso-pie{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap}
.fpc-pct{font-size:12.5px;color:var(--fp-tinta-3)}
.fpc-pct b{color:var(--fp-tinta);font-weight:600}


/* ==========================================================
   4. ETIQUETAS Y BOTONES
   ==========================================================
   Un solo boton fuerte por pantalla, y es rojo. El resto, contorno. */

.fpc-eti,.faspro-badge{font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;border:1px solid var(--fp-linea-fuerte);
  border-radius:999px;padding:3px 9px;color:var(--fp-tinta-3);
  white-space:nowrap;flex:0 0 auto;background:0;display:inline-block;line-height:1.5}
.fpc-eti.fpc-pro{color:var(--fp-arena);border-color:rgba(182,173,110,.5)}

.fpc-bot,
body.woocommerce-account .woocommerce-MyAccount-content .faspro-btn{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--fp-linea-fuerte);border-radius:var(--fp-radio-chico);
  padding:8px 16px;font-size:13px;font-weight:600;
  color:var(--fp-tinta);text-decoration:none;background:0;
  transition:border-color .15s,background .15s;cursor:pointer}
.fpc-bot:hover,
body.woocommerce-account .woocommerce-MyAccount-content .faspro-btn:hover{
  border-color:var(--fp-tinta-3);color:var(--fp-tinta)}

.fpc-bot.fpc-fuerte{background:var(--fp-rojo);border-color:var(--fp-rojo);color:#fff}
.fpc-bot.fpc-fuerte:hover{background:#c8000d;border-color:#c8000d;color:#fff}


/* ==========================================================
   5. LOS ACCESOS DEL ESCRITORIO
   ========================================================== */

.fpc-accesos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.fpc-acc{border:1px solid var(--fp-linea);border-radius:var(--fp-radio);
  padding:20px;background:var(--fp-velo);text-decoration:none;display:block;
  transition:border-color .15s,background .15s}
.fpc-acc:hover{border-color:var(--fp-linea-fuerte);background:rgba(255,255,255,.055)}
.fpc-acc b{display:block;font-size:16.5px;font-weight:700;margin-bottom:3px;
  letter-spacing:-.01em;color:var(--fp-tinta)}
.fpc-acc span{font-size:13px;color:var(--fp-tinta-3)}
.fpc-acc .fpc-fl{float:right;color:var(--fp-tinta-3);font-size:15px}


/* ==========================================================
   6. MIS CURSOS
   ==========================================================
   La rejilla la pinta el atajo [faspro_mis_cursos], que trae sus propias
   clases. Aqui solo se le pone el lenguaje de FASPRO encima; el atajo no
   se toca. */

.faspro-grid{display:block !important;margin:0}
.faspro-card{border:1px solid var(--fp-linea) !important;
  border-radius:var(--fp-radio) !important;background:var(--fp-velo) !important;
  box-shadow:none !important;padding:20px 22px !important;margin:0 0 10px !important;
  display:block !important;overflow:visible !important;position:relative !important}

/* La miniatura se quita: en una lista de cuatro cursos que se llaman casi
   igual, la foto no ayuda a elegir y el nombre si. Pero DENTRO de la
   miniatura vive la etiqueta de estado, asi que no se puede esconder el
   bloque entero: se esconde la imagen y la etiqueta se sube a la esquina. */
.faspro-card__media{position:absolute !important;top:19px;right:22px;
  display:block !important;width:auto !important;height:auto !important;
  min-height:0 !important;background:0 !important;border:0 !important;
  margin:0 !important;padding:0 !important;overflow:visible !important;line-height:1}
.faspro-card__media img,.faspro-card__placeholder{display:none !important}

.faspro-card__body{padding:0 !important}
.faspro-card__title{font-size:16.5px !important;font-weight:600 !important;
  letter-spacing:-.01em;line-height:1.35;margin:0 0 13px !important;
  padding-right:104px;color:var(--fp-tinta)}
.faspro-card__title a{color:inherit;text-decoration:none}

.faspro-progress{height:3px !important;background:rgba(255,255,255,.09) !important;
  border-radius:2px !important;overflow:hidden;margin:0 0 11px !important}
.faspro-progress__bar{background:var(--fp-arena) !important;height:100% !important;
  border-radius:0 !important}
.faspro-progress__meta{font-size:12.5px !important;color:var(--fp-tinta-3) !important;
  margin:0 !important}

.faspro-empty{border:1px dashed var(--fp-linea-fuerte);border-radius:var(--fp-radio);
  padding:34px 24px;text-align:center;color:var(--fp-tinta-3);font-size:14px;background:0}


/* ==========================================================
   7. TABLAS: PEDIDOS Y DESCARGAS
   ========================================================== */

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table{
  border:1px solid var(--fp-linea);border-radius:var(--fp-radio);
  border-collapse:separate;border-spacing:0;overflow:hidden;
  background:0;font-size:14px;width:100%}
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table th{
  font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--fp-tinta-3);font-weight:700;background:0;
  padding:13px 14px;border-bottom:1px solid var(--fp-linea)}
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td{
  padding:13px 14px;border-bottom:1px solid var(--fp-linea);
  color:var(--fp-tinta-2);background:0}
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tr:last-child td{
  border-bottom:0}
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td.woocommerce-orders-table__cell-order-number a,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td.woocommerce-orders-table__cell-order-total{
  color:var(--fp-tinta);font-weight:600;font-variant-numeric:tabular-nums}


/* ==========================================================
   8. FORMULARIOS
   ========================================================== */

body.woocommerce-account .woocommerce-MyAccount-content form .form-row label,
body.woocommerce-account .woocommerce-MyAccount-content fieldset legend{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fp-tinta-3);margin-bottom:6px;display:block}

body.woocommerce-account .woocommerce-MyAccount-content input[type=text],
body.woocommerce-account .woocommerce-MyAccount-content input[type=email],
body.woocommerce-account .woocommerce-MyAccount-content input[type=tel],
body.woocommerce-account .woocommerce-MyAccount-content input[type=password],
body.woocommerce-account .woocommerce-MyAccount-content select,
body.woocommerce-account .woocommerce-MyAccount-content textarea{
  border:1px solid var(--fp-linea);border-radius:var(--fp-radio-chico);
  background:transparent;color:var(--fp-tinta);
  padding:10px 13px;font-size:14.5px;box-shadow:none}
body.woocommerce-account .woocommerce-MyAccount-content input:focus,
body.woocommerce-account .woocommerce-MyAccount-content select:focus,
body.woocommerce-account .woocommerce-MyAccount-content textarea:focus{
  border-color:var(--fp-arena);outline:0;box-shadow:none}

body.woocommerce-account .woocommerce-MyAccount-content fieldset{
  border:0;border-top:1px solid var(--fp-linea);
  margin:28px 0 0;padding:24px 0 0}

body.woocommerce-account .woocommerce-MyAccount-content button.woocommerce-Button,
body.woocommerce-account .woocommerce-MyAccount-content button[type=submit]{
  background:var(--fp-rojo);border:1px solid var(--fp-rojo);color:#fff;
  border-radius:var(--fp-radio-chico);padding:9px 18px;
  font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;
  box-shadow:none;transition:background .15s,border-color .15s}
body.woocommerce-account .woocommerce-MyAccount-content button.woocommerce-Button:hover,
body.woocommerce-account .woocommerce-MyAccount-content button[type=submit]:hover{
  background:#c8000d;border-color:#c8000d}


/* ==========================================================
   9. AVISOS
   ========================================================== */

body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-error{
  border:1px solid var(--fp-linea);border-left:2px solid var(--fp-arena);
  border-radius:var(--fp-radio);background:var(--fp-velo);
  color:var(--fp-tinta-2);padding:15px 18px;font-size:14px;box-shadow:none}
body.woocommerce-account .woocommerce-error{border-left-color:var(--fp-rojo)}


/* ==========================================================
   10. MOVIL
   ==========================================================
   La mayoria de los alumnos entran desde el telefono. El menu pasa a ir
   arriba, en horizontal y con desplazamiento lateral, para no comerse
   media pantalla antes del contenido. */

@media (max-width:768px){
  .woocommerce-MyAccount-navigation ul{
    border-left:0;border-bottom:1px solid var(--fp-linea);
    display:flex;gap:4px;overflow-x:auto;padding-bottom:0;
    -webkit-overflow-scrolling:touch}
  .woocommerce-MyAccount-navigation li a{padding:9px 12px;white-space:nowrap}
  .woocommerce-MyAccount-navigation li.is-active::before,
  .woocommerce-MyAccount-navigation li.wd-active::before{
    left:12px;right:12px;top:auto;bottom:0;width:auto;height:2px}
  .woocommerce-MyAccount-navigation-link--orders,
  .woocommerce-MyAccount-navigation-link--edit-account,
  .woocommerce-MyAccount-navigation-link--customer-logout{
    margin-top:0;padding-top:0;margin-left:10px}
  .woocommerce-MyAccount-navigation-link--orders::after,
  .woocommerce-MyAccount-navigation-link--edit-account::after,
  .woocommerce-MyAccount-navigation-link--customer-logout::after{
    left:0;right:auto;top:11px;bottom:11px;width:1px;height:auto}
  .fpc-curso-pie{align-items:flex-start;flex-direction:column;gap:12px}
  .fpc-bot{width:100%;justify-content:center}
}


/* La etiqueta de estado venia colgada con coordenadas propias dentro
   de la miniatura. Al quitar la foto, esas coordenadas la dejaban fuera
   de la tarjeta. Se le quitan y se deja que caiga donde esta su caja. */
.faspro-card .faspro-badge{position:static !important;
  top:auto !important;left:auto !important;right:auto !important;bottom:auto !important;
  transform:none !important;margin:0 !important}


/* ==========================================================
   11. QUITARLE AL TEMA LO QUE YA NO TOCA
   ==========================================================
   Woodmart pinta por su cuenta tres cosas de estas pantallas: la caja
   del menu, el relleno del enlace activo y el color de los enlaces. Con
   el diseno nuevo sobran las tres.

   Van todas con "body" delante por la misma razon de siempre: las hojas
   del tema y las de Elementor no siempre cargan antes que la nuestra, y
   cuando dos reglas pesan lo mismo gana la ultima en llegar. Con "body"
   la nuestra pesa mas y gana siempre. */

body .woocommerce-MyAccount-navigation{
  border:0;background:0;padding:0;border-radius:0;box-shadow:none}

body .woocommerce-MyAccount-navigation li a,
body .woocommerce-MyAccount-navigation li.is-active > a,
body .woocommerce-MyAccount-navigation li.wd-active > a{
  background:0;border:0;border-radius:0;box-shadow:none}

/* El boton fuerte es rojo con letra blanca. El tema le ponia la letra
   del mismo rojo del fondo y se leia un rectangulo vacio. */
body .fpc-bot{color:var(--fp-tinta)}
body .fpc-bot.fpc-fuerte,
body .fpc-bot.fpc-fuerte:hover,
body .fpc-bot.fpc-fuerte:focus{color:#fff}

body .fpc-acc b{color:var(--fp-tinta)}
body .fpc-acc span{color:var(--fp-tinta-3)}
body .fpc-acc:hover b{color:var(--fp-tinta)}


/* ==========================================================
   12. LO MISMO, PERO GANANDO
   ==========================================================
   Las reglas de arriba no bastaban. Elementor guarda el aspecto de cada
   pieza de la pagina con un nombre larguisimo que pesa mas que
   cualquier regla normal, asi que la caja del menu, el relleno del
   enlace activo y el color del boton seguian siendo los suyos.

   Contra eso solo hay dos caminos: escribir un nombre todavia mas largo
   -que se rompe en cuanto se edita la pagina- o marcar estas cuatro
   cosas como prioritarias. Se elige lo segundo, que es lo estable.
   Son cuatro reglas, todas de quitar decoracion, ninguna de inventar
   color: el color sigue saliendo de marca.css. */

body .woocommerce-MyAccount-navigation{
  border:0 !important;background:0 !important;padding:0 !important;
  border-radius:0 !important;box-shadow:none !important}

body .woocommerce-MyAccount-navigation li a,
body .woocommerce-MyAccount-navigation li.is-active > a,
body .woocommerce-MyAccount-navigation li.wd-active > a{
  background:0 !important;border:0 !important;border-radius:0 !important;
  box-shadow:none !important}

body .fpc-bot.fpc-fuerte,
body .fpc-bot.fpc-fuerte:hover,
body .fpc-bot.fpc-fuerte:focus{color:#fff !important}

body .fpc-bot{color:var(--fp-tinta)}