/* FICHA DE MÁQUINA — diseño premium CLUB76.

   Estilos del pop-up rediseñado (lo arma js/ficha-diseno.js, que pisa
   fichaHTML). Todo va bajo .fxwrap, así no pisa las clases .fp* de la ficha
   vieja. El fondo oscuro y el centrado los pone el overlay .fichapop (inicio.css).
   Pop-up compacto y apaisado (~760px), con foto casi cuadrada a la izquierda.
   Termina después de la barra de garantía. Va DESPUÉS de inicio.css. */

.fxwrap{
  position:relative;width:100%;max-width:760px;display:flex;
  background:linear-gradient(155deg,#1e1e23 0%,#141416 58%);
  border:1px solid rgba(255,255,255,.09);border-radius:18px;overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.6);
  color:#EDEDF0;font-family:'IBM Plex Sans',sans-serif;
  max-height:calc(100vh - 48px);
}

/* ---- foto a la izquierda, casi cuadrada ---- */
.fxfoto{flex:0 0 46%;position:relative;background:#0e0e10;overflow:hidden;min-height:100%}
.fxfoto img{width:100%;height:100%;object-fit:cover;display:block}
.fxfoto:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 58%,rgba(20,20,22,.9))}
.fxsin{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.32)}

.fxbadge{position:absolute;top:14px;left:14px;z-index:2;display:flex;align-items:center;gap:8px;
  background:rgba(14,14,16,.66);backdrop-filter:blur(7px);
  border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:6px 11px 6px 7px}
.fxbstar{width:24px;height:24px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#f0242b,#c0161c);color:#fff}
.fxbstar svg{width:13px;height:13px}
.fxbtx{display:flex;flex-direction:column;line-height:1.15}
.fxbtx b{font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:.14em;color:#c2c2c8;font-weight:500}
.fxbtx i{font-family:'Days One',sans-serif;font-style:normal;font-size:12px;color:#fff;letter-spacing:.02em}

/* ---- panel de datos ---- */
.fxpanel{flex:1;min-width:0;padding:22px 24px;display:flex;flex-direction:column;gap:15px;overflow-y:auto}

.fxribbon{align-self:flex-start;margin-left:-24px;padding:7px 22px;
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(90deg,#e11b22,#a5121a);color:#fff;
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.16em;
  clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);
  box-shadow:0 6px 18px rgba(225,27,34,.28)}
.fxribbon svg{width:14px;height:14px;flex:none}

.fxtitle{font-family:'Days One',sans-serif;font-weight:400;font-size:23px;line-height:1.08;
  color:#fff;margin:0;letter-spacing:.005em}

.fxgrid{display:grid;grid-template-columns:1fr 1fr;gap:15px 20px}
.fxf{display:flex;flex-direction:column;gap:5px;min-width:0}
.fxl{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:#7c7c85}
.fxv{font-family:'Days One',sans-serif;font-weight:400;font-size:15px;color:#fff;
  letter-spacing:.01em;display:flex;align-items:center;gap:8px;min-width:0}
.fxv>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fxcal svg{width:15px;height:15px;color:#e11b22;flex:none}

.fxpill{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:8px;
  padding:7px 11px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:#ededf0;max-width:100%;line-height:1.3}
.fxpill i{width:7px;height:7px;border-radius:50%;flex:none;background:#e5484d;box-shadow:0 0 8px rgba(229,72,77,.7)}
.fxpill.ok  i{background:#41c273;box-shadow:0 0 8px rgba(65,194,115,.7)}
.fxpill.mal i{background:#e5484d;box-shadow:0 0 8px rgba(229,72,77,.7)}
.fxpill.warn i{background:#e0a020;box-shadow:0 0 8px rgba(224,160,32,.7)}
.fxpill.pend i{background:#e5484d;box-shadow:0 0 8px rgba(229,72,77,.7)}

/* ---- garantía (último bloque: cierra el pop-up) ---- */
.fxwar{display:flex;align-items:center;gap:16px;padding:16px 0 2px;
  border-top:1px solid rgba(255,255,255,.08);margin-top:auto}
.fxwarL{display:flex;align-items:center;gap:11px;flex:none}
.fxshield{width:40px;height:40px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#f0242b,#b3141a);color:#fff;box-shadow:0 8px 18px rgba(225,27,34,.28)}
.fxshield svg{width:21px;height:21px}
.fxwarT{font-family:'Days One',sans-serif;font-size:14px;color:#fff}
.fxwarM{flex:1;min-width:0}
.fxwarLbl{display:block;margin-bottom:5px;font-family:'IBM Plex Mono',monospace;font-size:8.5px;
  letter-spacing:.14em;text-transform:uppercase;color:#7c7c85}
.fxwarE{display:block;margin-bottom:8px;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.fxwar.ok   .fxwarE{color:#3fbf6f}
.fxwar.venc .fxwarE{color:#f0343a}
.fxbar{height:7px;border-radius:5px;background:rgba(255,255,255,.09);overflow:hidden}
.fxbar i{display:block;height:100%;border-radius:5px}
.fxwar.ok   .fxbar i{background:linear-gradient(90deg,#48d07d,#2e9c58)}
.fxwar.venc .fxbar i{background:#55555c}
.fxwar.venc .fxshield{background:#33333a;box-shadow:none}
.fxwarR{flex:none;text-align:right;line-height:1}
.fxwarR b{display:block;font-family:'Days One',sans-serif;font-size:28px;color:#fff}
.fxwarR span{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:.14em;
  text-transform:uppercase;color:#7c7c85}

/* ---- cerrar ---- */
.fxclose{position:absolute;top:12px;right:12px;z-index:6;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);background:rgba(18,18,20,.72);color:#fff;font-size:20px;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.fxclose:hover{background:#e11b22;border-color:#e11b22}

/* ---- pantallas chicas: se apila foto arriba / panel abajo ---- */
@media(max-width:780px){
  .fxwrap{flex-direction:column;max-height:calc(100vh - 28px)}
  .fxfoto{flex:none;height:210px;min-height:0}
  .fxfoto:after{background:linear-gradient(0deg,rgba(20,20,22,.92),transparent 55%)}
  .fxpanel{padding:20px 18px}
  .fxribbon{margin-left:-18px}
  .fxwar{margin-top:6px}
}

/* ---- celular: a pantalla completa ---- */
@media(max-width:520px){
  .fxwrap{max-width:none;min-height:100vh;border-radius:0;border:0}
  .fxwar{flex-wrap:wrap;gap:14px}
  .fxwarM{flex-basis:100%;order:3}
  .fxwarR{margin-left:auto}
}