* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

body {
  font-family: var(--texto);
  background: var(--azul);
  color: var(--crema);
  min-height: 100vh;
  padding-bottom: 128px;
  overflow-x: hidden;
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gap); }

/* ---------- Cenefa de papel picado ---------- */
.cenefa { width:100%; height:54px; display:block; }
.cenefa.abajo { transform: rotate(180deg); }

/* ---------- Encabezado ---------- */
header { text-align:center; padding: 4px 0 22px; position:relative; }
.kicker {
  font-size:.82rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color: var(--lila); margin-bottom:6px;
}
h1 { font-family: var(--display); line-height:.9; letter-spacing:.01em; }
h1 .l1 { display:block; font-size: min(12.5vw, 4.2rem); color: var(--crema); white-space: nowrap; }
h1 .l2 { display:block; font-size: min(16.5vw, 5rem); color: var(--rojo); white-space: nowrap;
         text-shadow: 0 3px 0 rgba(0,0,0,.18); }
.cinta {
  display:inline-block; background: var(--naranja); color: var(--azul);
  font-family: var(--display); font-size: 1rem; letter-spacing:.02em;
  padding: 9px 22px; border-radius: 999px; margin-top:14px;
  box-shadow: 0 5px 0 rgba(0,0,0,.16);
}
.lugar { font-size:.9rem; margin-top:10px; color: rgba(243,233,218,.82); font-weight:500; }

/* ---------- Tarjetas de producto ---------- */
.menu { display:grid; gap: 18px; margin-top: 8px; }

.card {
  background: var(--crema); border-radius: var(--radio);
  overflow:hidden; box-shadow: var(--sombra);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card.pop { transform: scale(1.018); box-shadow: var(--sombra-alta); }
.card.off { opacity:.62; }

.foto { position:relative; aspect-ratio: 16/10; overflow:hidden; background:#ddd; }
.foto img { width:100%; height:100%; object-fit:cover; display:block; }
.card.off .foto img { filter: grayscale(.85); }

.badge {
  position:absolute; top:12px; right:12px;
  display:flex; align-items:center; gap:7px;
  background: rgba(5,5,119,.9); backdrop-filter: blur(6px);
  color:#fff; font-size:.8rem; font-weight:700;
  padding: 7px 13px; border-radius: 999px;
}
.dot { width:9px; height:9px; border-radius:50%; background: var(--hay); }
.dot.poco    { background: var(--poco); }
.dot.ultimos { background: var(--ultimos); animation: latir 1.1s infinite; }
.dot.agotado { background: var(--agotado); }
@keyframes latir { 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.45; transform:scale(.82);} }

.precio {
  position:absolute; left:12px; bottom:12px;
  font-family: var(--display); font-size:1.5rem; color: var(--azul);
  background: var(--naranja); padding: 4px 15px; border-radius: 999px;
  box-shadow: 0 4px 0 rgba(0,0,0,.16);
}

.info { padding: 15px 17px 17px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.nombre { font-family: var(--display); font-size: 1.72rem; color: var(--azul); line-height:1; }
.sub { font-size:.78rem; color:#6a6a80; font-weight:500; margin-top:4px; }

/* ---------- Stepper ---------- */
.stepper { display:flex; align-items:center; gap:11px; flex-shrink:0; }
.stepper button {
  width:46px; height:46px; border:none; border-radius:50%;
  background: var(--azul); color: var(--crema);
  font-size:1.7rem; font-weight:700; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: transform .12s ease, background .12s ease;
  font-family: var(--texto);
}
.stepper button:active { transform: scale(.86); }
.stepper button:disabled { background:#c9c9d6; cursor:not-allowed; }
.stepper button.mas { background: var(--rojo); }
.stepper button.mas:disabled { background:#c9c9d6; }
.qty { font-family: var(--display); font-size:1.7rem; color: var(--azul); min-width:34px; text-align:center; }

.agotado-tag {
  background: var(--agotado); color:#fff; font-weight:700; font-size:.85rem;
  padding: 12px 20px; border-radius: 999px; letter-spacing:.04em;
}

/* ---------- Barra de pago ---------- */
.barra {
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background: var(--crema); border-radius: 26px 26px 0 0;
  box-shadow: 0 -8px 34px rgba(0,0,0,.3);
  padding: 15px var(--gap) calc(15px + env(safe-area-inset-bottom));
  transform: translateY(115%); transition: transform .32s cubic-bezier(.22,1,.36,1);
}
.barra.ver { transform: translateY(0); }
.barra-in { max-width: var(--maxw); margin:0 auto; display:flex; align-items:center; gap:14px; }
.tot-lbl { font-size:.72rem; color:#6a6a80; font-weight:600; text-transform:uppercase; letter-spacing:.1em; }
.tot-val { font-family: var(--display); font-size:2.1rem; color: var(--azul); line-height:1; }
.tot-val.brinca { animation: brinco .32s ease; }
@keyframes brinco { 0%,100%{transform:scale(1);} 45%{transform:scale(1.14);} }
.resumen { font-size:.72rem; color:#6a6a80; margin-top:3px; font-weight:500; }

.pagar {
  flex:1; border:none; border-radius: 999px; cursor:pointer;
  background: var(--rojo); color:#fff;
  font-family: var(--display); font-size:1.22rem; letter-spacing:.02em;
  padding: 17px 20px; box-shadow: 0 5px 0 #A81E15;
  transition: transform .12s ease;
}
.pagar:active { transform: translateY(4px); box-shadow: 0 1px 0 #A81E15; }

/* ---------- Boton de audio ---------- */
.audio {
  position:fixed; top:14px; right:14px; z-index:50;
  width:46px; height:46px; border-radius:50%; border:2px solid rgba(243,233,218,.4);
  background: rgba(5,5,119,.72); backdrop-filter: blur(8px);
  color: var(--crema); font-size:1.15rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.audio.on { border-color: var(--naranja); }
.audio.on .ico { animation: bailar 1.5s ease-in-out infinite; }
@keyframes bailar { 0%,100%{transform:rotate(-9deg);} 50%{transform:rotate(9deg);} }

/* ---------- Modal ---------- */
.modal {
  position:fixed; inset:0; z-index:100; display:none;
  align-items:center; justify-content:center; padding:20px;
  background: rgba(3,3,79,.82); backdrop-filter: blur(5px);
}
.modal.ver { display:flex; }
.modal-caja {
  background: var(--crema); color: var(--azul); border-radius: var(--radio);
  max-width: 400px; width:100%; padding: 26px 22px 0; text-align:center;
  box-shadow: var(--sombra-alta); animation: subir .3s cubic-bezier(.22,1,.36,1);
  /* Con los avisos de pago el modal crecio y los botones se salian de la
     pantalla sin forma de llegar a ellos. Ahora el centro hace scroll y
     el boton de pagar queda clavado abajo, siempre a la vista. */
  max-height: calc(100dvh - 40px);
  display:flex; flex-direction:column;
}
.modal-cuerpo { flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  margin-right:-8px; padding-right:8px; }
.modal-pie { flex:0 0 auto; padding:14px 0 22px; background:var(--crema);
  position:relative; }
/* degradado corto para que se note que arriba hay mas texto */
.modal-pie::before { content:''; position:absolute; left:0; right:0; top:-22px;
  height:22px; pointer-events:none;
  background:linear-gradient(to top, var(--crema), rgba(243,233,218,0)); }
@keyframes subir { from{transform:translateY(26px); opacity:0;} to{transform:translateY(0); opacity:1;} }
.modal h2 { font-family: var(--display); font-size:1.65rem; margin-bottom:6px; }
.codigo {
  font-family: var(--display); font-size:2.5rem; color: var(--rojo);
  background:#fff; border: 3px dashed var(--naranja); border-radius: var(--radio-sm);
  padding: 13px; margin: 15px 0; letter-spacing:.04em;
}
.lista { text-align:left; margin: 14px 0; font-size:.95rem; }
.lista div { display:flex; justify-content:space-between; padding: 7px 0; border-bottom:1px solid rgba(5,5,119,.13); font-weight:500; }
.lista div.tot { border:none; font-weight:700; font-size:1.15rem; padding-top:11px; }
.aviso { font-size:.8rem; color:#6a6a80; margin: 12px 0 16px; line-height:1.45; }
.btns { display:flex; gap:10px; }
.btn-ok, .btn-no {
  flex:1; border:none; border-radius:999px; cursor:pointer;
  font-family: var(--display); font-size:1.02rem; padding: 15px;
}
.btn-ok { background: var(--rojo); color:#fff; box-shadow: 0 4px 0 #A81E15; }
.btn-no { background: rgba(5,5,119,.1); color: var(--azul); }

footer { text-align:center; padding: 26px var(--gap) 8px; font-size:.75rem; color: rgba(243,233,218,.5); }

@media (min-width: 620px) { .menu { grid-template-columns: 1fr 1fr; } .menu .card:first-child { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }

/* Renglones del ticket */
.tr { display:flex; align-items:center; gap:11px; padding:13px 0;
      border-bottom:1px solid rgba(5,5,119,.12); text-align:left; }
.tr:last-child { border:none; }
.tr .mark { font-size:1.4rem; flex-shrink:0; }
.tr .qq { font-family: var(--display); font-size:1.5rem; color: var(--azul);
          min-width:32px; text-align:center; }
.tr .nn { font-weight:700; color: var(--azul); font-size:1rem; }
.tr .uu { font-size:.78rem; color:#6a6a80; font-weight:500; margin-top:2px; }
.tr.listo .nn, .tr.listo .qq { color:#1F7A1F; text-decoration:line-through; }
.tr.listo .uu { color:#1F7A1F; text-decoration:none; }
.todo-listo { background:#D4EDDA; color:#1F5C2E; border-radius: var(--radio-sm);
              padding:14px; font-weight:800; margin-top:12px; }

.extra-tag { position:absolute; top:12px; left:12px; background:var(--rojo); color:#fff;
             font-family:var(--display); font-size:.85rem; padding:5px 13px; border-radius:999px;
             box-shadow:0 3px 0 rgba(0,0,0,.2); letter-spacing:.02em; }

/* Copiar código */
.copiar { width:100%; border:none; border-radius:999px; cursor:pointer;
          background: var(--azul); color: var(--crema); font-family: var(--texto);
          font-weight:800; font-size:.95rem; padding:15px; margin-bottom:16px;
          box-shadow:0 4px 0 var(--azul-hondo); transition:background .16s ease; }
.copiar:active { transform:translateY(3px); box-shadow:0 1px 0 var(--azul-hondo); }
.copiar.listo { background:#1F7A1F; box-shadow:0 4px 0 #145214; font-size:.86rem; }

/* Instrucciones de captura */
.instru { background:#fff; border:2px dashed var(--naranja); border-radius: var(--radio-sm);
          padding:14px; margin-bottom:14px; text-align:left; }
.instru-t { font-size:.72rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
            color:#6a6a80; margin-bottom:9px; text-align:center; }
.ins-fila { display:flex; justify-content:space-between; align-items:center;
            padding:9px 0; border-bottom:1px solid rgba(5,5,119,.1);
            font-weight:600; color:var(--azul); font-size:.95rem; }
.ins-fila:last-child { border:none; }
.ins-n { font-family:var(--display); font-size:1.7rem; color:var(--rojo); line-height:1; }
.ins-cod { font-family:var(--display); font-size:1.15rem; color:var(--rojo);
           letter-spacing:.03em; }
.ins-fila.cod { background:rgba(255,155,0,.14); margin:4px -14px; padding:9px 14px;
                border-bottom:none; }
.ins-fila.tot { border-top:2px solid var(--azul); border-bottom:none; margin-top:4px;
                padding-top:10px; font-weight:800; }

/* ============================================================
   AVISOS DE PAGO PENDIENTE
   La mitad de la gente armaba el pedido y creia que ya estaba.
   Estos dos bloques existen para que eso no vuelva a pasar.
   ============================================================ */
.falta-pago { background:rgba(229,48,35,.1); border:2px solid var(--rojo);
  border-radius:var(--radio-sm); padding:12px 14px; margin:0 0 14px;
  font-size:.88rem; line-height:1.5; color:var(--azul); text-align:left; }
.falta-pago b { display:block; color:var(--rojo); font-size:.95rem; margin-bottom:3px; }

/* El error mas comun: dejar las cantidades vacias en Shelby.
   De 26 correos sin cantidades, solo 1 termino pagando. Por eso las
   cantidades se muestran con el mismo peso visual que el codigo:
   antes parecian un resumen y la gente no sabia que habia que copiarlas. */
.ojo { background:rgba(255,155,0,.16); border:2px solid var(--naranja);
  border-radius:var(--radio-sm); padding:11px 13px; margin:0 0 16px;
  font-size:.85rem; line-height:1.5; color:var(--azul); text-align:left; }
.ojo b { color:var(--rojo); }

/* Etiqueta de paso: 1 cantidades, 2 codigo */
.paso-lbl { display:flex; align-items:center; gap:7px; margin:0 0 7px;
  font-size:.76rem; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:#6a6a80; text-align:left; }
.paso-n { flex:0 0 auto; width:20px; height:20px; border-radius:50%;
  background:var(--azul); color:#fff; font-family:var(--texto);
  font-size:.75rem; font-weight:800; display:flex;
  align-items:center; justify-content:center; letter-spacing:0; }

/* Las cantidades, con la misma caja punteada que el codigo */
.cantidades { background:#fff; border:3px dashed var(--naranja);
  border-radius:var(--radio-sm); padding:6px 14px; margin:0 0 15px; text-align:left; }
.cantidades .ins-fila { padding:11px 0; font-size:1rem; }
.cantidades .ins-n { font-size:2.1rem; }

/* Total, como renglon suelto debajo del codigo */
.tot-pagar { display:flex; justify-content:space-between; align-items:baseline;
  margin:13px 2px 16px; font-weight:700; color:var(--azul); font-size:.95rem; }
.tot-pagar b { font-family:var(--display); font-size:1.5rem; color:var(--rojo); }
.sp-ojo { font-size:.8rem; line-height:1.5; color:var(--azul);
  margin:0 0 11px; font-weight:600; }
.sp-ojo b { color:var(--rojo); }
/* las cantidades tambien resaltan aqui */
.sp-nums .ins-n { font-size:1.9rem; }

/* En el ticket, cuando el pago no se completó */
.sin-pagar { background:rgba(229,48,35,.1); border:2px solid var(--rojo);
  border-radius:var(--radio-sm); padding:14px; margin:0 0 15px; text-align:left; }
.sin-pagar[hidden] { display:none; }
.sp-t { font-family:var(--display); font-size:1.35rem; color:var(--rojo);
  text-align:center; margin-bottom:6px; }
.sp-p { font-size:.85rem; line-height:1.5; color:var(--azul); margin:0 0 11px; }
.sp-nums { background:#fff; border-radius:10px; padding:10px 12px; margin-bottom:11px; }
.sp-nums .ins-fila { font-size:.9rem; padding:7px 0; }
/* la fila del codigo se sangra al ancho de ESTA caja, no al del modal */
.sp-nums .ins-fila.cod { margin:4px -12px; padding:9px 12px; }
.sp-btn { width:100%; border:none; border-radius:999px; cursor:pointer;
  background:var(--rojo); color:#fff; font-family:var(--display);
  font-size:1.05rem; letter-spacing:.03em; padding:14px;
  box-shadow:0 4px 0 #A81C13; }
.sp-btn:active { transform:translateY(2px); box-shadow:0 2px 0 #A81C13; }

/* "Mi pedido": dos piezas SEPARADAS. Antes eran dos mitades pegadas
   compartiendo borde y la costura se veia rota en algunos telefonos. */
.mipedido-wrap { position:fixed; top:14px; left:14px; z-index:50;
                 display:flex; align-items:center; gap:7px; }
.mipedido-wrap[hidden] { display:none; }

.mipedido {
  display:inline-flex; align-items:center; gap:7px;
  border:2px solid var(--naranja); border-radius:999px;
  background:var(--azul-hondo); color:var(--crema);
  padding:10px 16px; font-size:.85rem; font-weight:700;
  font-family:var(--texto); cursor:pointer; white-space:nowrap;
  box-shadow:0 3px 0 rgba(0,0,0,.22);
}
.mipedido:active { transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.22); }

.mipedido-x {
  flex:0 0 auto; width:38px; height:38px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--naranja); border-radius:50%;
  background:var(--azul-hondo); color:var(--naranja);
  font-family:var(--texto); font-size:1.3rem; font-weight:700; line-height:1;
  cursor:pointer; box-shadow:0 3px 0 rgba(0,0,0,.22);
}
.mipedido-x:active { background:var(--rojo); color:#fff; border-color:var(--rojo);
                     transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.22); }

/* Vaciar el carrito */
.limpiar { flex:0 0 auto; width:46px; height:46px; border:2px solid rgba(5,5,119,.2);
  background:none; color:var(--suave, #6a6a80); border-radius:50%; font-size:1.5rem;
  line-height:1; cursor:pointer; font-family:var(--texto); }
.limpiar:active { background:rgba(5,5,119,.08); }

/* Soltar el pedido desde el ticket */
.soltar { width:100%; margin-top:12px; border:2px solid rgba(5,5,119,.18); background:none;
  color:#6a6a80; border-radius:999px; padding:11px; font-size:.85rem; font-weight:700;
  cursor:pointer; font-family:var(--texto); }
.soltar:hover { border-color:var(--rojo); color:var(--rojo); }
.soltar[hidden] { display:none; }

/* ============================================================
   Reloj de apartado. Los platillos quedan reservados unos
   minutos; si no paga en ese rato vuelven a la venta.
   ============================================================ */
.reloj { background:rgba(5,5,119,.05); border-radius:var(--radio-sm);
  padding:13px 15px 15px; margin:-4px 0 15px; }
.reloj[hidden] { display:none; }
.reloj-lbl { font-size:.76rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#6a6a80; }
.reloj-num { font-family:var(--display); font-size:2.3rem; line-height:1.1;
  color:var(--azul); font-variant-numeric:tabular-nums; margin:2px 0 8px; }
.reloj-barra { height:7px; border-radius:999px; background:rgba(5,5,119,.13); overflow:hidden; }
.reloj-barra i { display:block; height:100%; width:100%; border-radius:999px;
  background:var(--naranja); transition:width .95s linear, background .3s; }
.reloj-pie { font-size:.76rem; color:#6a6a80; margin-top:9px; line-height:1.4; }

/* Último tramo: se pone rojo y late */
.reloj.urge .reloj-num { color:var(--rojo); }
.reloj.urge .reloj-barra i { background:var(--rojo); }
.reloj.urge .reloj-num { animation:latido 1s ease-in-out infinite; }
@keyframes latido { 0%,100%{opacity:1} 50%{opacity:.45} }

/* Se acabó el tiempo */
.reloj.fuera { background:rgba(229,48,35,.08); }
.reloj.fuera .reloj-num { color:var(--rojo); animation:none; font-size:1.5rem; }
.reloj.fuera .reloj-barra { display:none; }

/* Ya pagó: el reloj se apaga y queda el sello */
.reloj.pagado { background:rgba(31,138,74,.09); }
.reloj.pagado .reloj-num { color:#1F8A4A; font-size:1.6rem; animation:none; }
.reloj.pagado .reloj-barra { display:none; }

@media (prefers-reduced-motion: reduce) {
  .reloj-barra i { transition:none; }
  .reloj.urge .reloj-num { animation:none; }
}

/* ============================================================
   PANTALLAS ANGOSTAS (iPhone SE, navegador dentro de WhatsApp,
   o cuando el sistema tiene texto grande). Antes se salían del
   borde el titulo, el boton + y el de pagar.
   ============================================================ */
html, body { max-width: 100%; overflow-x: hidden; }
.cenefa { overflow: hidden; }

/* El titulo se achica para caber; NUNCA se parte la palabra. */
h1 .l1, h1 .l2 { max-width: 100%; }

@media (max-width: 400px) {
  :root { --gap: 12px; }

  .cinta { font-size: .88rem; padding: 8px 16px; }
  .lugar { font-size: .82rem; }

  /* La tarjeta: que el nombre ceda espacio antes que el stepper */
  .info { padding: 12px 13px 14px; gap: 8px; }
  .info > div:first-child { min-width: 0; flex: 1; }
  .nombre { font-size: 1.35rem; overflow-wrap: break-word; }
  .sub { font-size: .72rem; }

  .stepper { gap: 7px; }
  .stepper button { width: 40px; height: 40px; font-size: 1.45rem; }
  .qty { font-size: 1.4rem; min-width: 26px; }

  .precio { font-size: 1.2rem; padding: 3px 11px; }
  .badge { font-size: .72rem; padding: 6px 10px; }
  .extra-tag { font-size: .72rem; padding: 4px 10px; }

  /* Barra de pago: que quepan las tres piezas */
  .barra-in { gap: 9px; }
  .tot-val { font-size: 1.7rem; }
  .resumen { font-size: .68rem; }
  .limpiar { width: 38px; height: 38px; font-size: 1.25rem; }
  .pagar { font-size: 1rem; padding: 14px 12px; }

  .mipedido { font-size: .76rem; padding: 8px 13px; }
  .mipedido-x { width: 34px; height: 34px; font-size: 1.15rem; }
  .audio { width: 40px; height: 40px; }

  .codigo { font-size: 2rem; padding: 11px; }
  .ins-n { font-size: 1.4rem; }
  .modal-caja { padding: 20px 16px; }
}

/* Muy angosto de verdad (320px y abajo) */
@media (max-width: 340px) {
  .nombre { font-size: 1.2rem; }
  .stepper button { width: 36px; height: 36px; }
}

/* El boton de pagar del ticket, ahora en el pie fijo */
.modal-pie .sp-btn { margin-bottom:10px; }
.modal-pie .sp-btn[hidden] { display:none; }

/* ============================================================
   BUSCAR MI PEDIDO POR CÓDIGO
   Antes "Mi pedido" solo servia en el mismo telefono donde se
   compro. Si compro la esposa, o limpiaron el navegador, no
   habia forma de encontrarlo el dia del evento.
   ============================================================ */
.buscar-ped { text-align:left; }
.buscar-ped[hidden] { display:none; }
.bp-t { font-size:.9rem; font-weight:600; color:var(--azul);
  margin:4px 0 11px; line-height:1.45; text-align:center; }
#t-buscar-in {
  width:100%; border:3px dashed var(--naranja); border-radius:var(--radio-sm);
  background:#fff; color:var(--rojo); font-family:var(--display);
  font-size:1.9rem; text-align:center; padding:14px 10px;
  text-transform:uppercase; letter-spacing:.04em;
}
#t-buscar-in:focus { outline:none; border-color:var(--rojo); border-style:solid; }
#t-buscar-in::placeholder { color:rgba(229,48,35,.28); }
.bp-btn { width:100%; margin-top:12px; border:none; border-radius:999px;
  cursor:pointer; background:var(--rojo); color:#fff;
  font-family:var(--display); font-size:1.05rem; padding:15px;
  box-shadow:0 4px 0 #A81C13; }
.bp-btn:active { transform:translateY(2px); box-shadow:0 2px 0 #A81C13; }
.bp-btn:disabled { background:#c9c9d6; box-shadow:0 4px 0 #b0b0c0; }
.bp-err { margin-top:11px; padding:10px 12px; border-radius:var(--radio-sm);
  background:rgba(229,48,35,.1); border:2px solid var(--rojo);
  color:var(--azul); font-size:.85rem; font-weight:600; line-height:1.45; }
.bp-err[hidden] { display:none; }
.bp-pie { font-size:.78rem; color:#6a6a80; margin-top:12px; text-align:center; line-height:1.45; }
#t-ficha[hidden] { display:none; }
.modal-pie .soltar[hidden] { display:none; }