/* ============================================================
   CONFIRMACIONES PROPIAS
   ============================================================ */
.velo--conf{z-index:200;align-items:center;justify-content:center;padding:24px}
.conf{background:var(--bg2);border:1px solid var(--linea);border-radius:20px;padding:30px 28px 24px;
  width:min(430px,100%);text-align:center;box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
  animation:confEntra .22s cubic-bezier(.22,.8,.28,1)}
@keyframes confEntra{from{opacity:0;transform:translateY(14px) scale(.96)}}
.conf__ico{width:52px;height:52px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;
  background:rgba(242,180,95,.14);color:var(--oro)}
.conf__ico.peligro{background:rgba(229,72,77,.14);color:#F09098}
.conf__ico svg{width:25px;height:25px}
.conf h3{margin:0 0 8px;font-size:1.08rem;line-height:1.35}
.conf p{margin:0 0 22px;font-size:.88rem;line-height:1.6;color:var(--txt2)}
.conf__botones{display:flex;gap:10px}
.conf__botones .btn{flex:1;justify-content:center;padding:12px}
.btn.rojo-solido{background:linear-gradient(145deg,#F0666B,#D03A3F);color:#fff;border-color:transparent}
.btn.rojo-solido:hover{filter:brightness(1.07);color:#fff}
body.claro .conf{background:#FFFFFF;box-shadow:0 40px 90px -34px rgba(105,85,55,.5)}
@media(max-width:520px){.conf{padding:26px 20px 20px}.conf__botones{flex-direction:column-reverse}}

/* ============================================================
   PANEL EN TELÉFONO
   ============================================================ */
@media (max-width: 760px) {
  .top{flex-wrap:wrap; gap:10px; padding:12px 16px; min-height:auto}
  .top .der{margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    max-width:100%; justify-content:flex-end}
  .top .der .btn{padding:9px 13px; font-size:.82rem}
  .top .der span{font-size:.82rem}
  .top h1{font-size:1.15rem}
  .top p{font-size:.8rem}

  .cuerpo{padding:16px 14px 90px}
  .tarjeta{padding:18px 16px; border-radius:15px}
  .rejilla.r2, .rejilla.r3, .rejilla.r4{grid-template-columns:1fr}
  .cifras{grid-template-columns:repeat(2,1fr); gap:10px}
  .cifra{padding:15px 16px}
  .cifra b{font-size:1.5rem}

  /* cabeceras de tarjeta: el título ocupa su línea */
  .tarjeta > div[style*="display:flex"]{flex-wrap:wrap}
  .tarjeta h3{flex:1 1 100% !important; margin-bottom:4px !important}
  .tarjeta h3 + p{flex:1 1 100%}

  /* las filas se apilan en vez de comprimirse */
  .item{flex-wrap:wrap; gap:11px; padding:14px}
  .item .info{flex:1 1 100%; order:2; min-width:0}
  .item .acc{order:3; flex:1 1 100%; display:flex; gap:8px; justify-content:flex-end}
  .item .mini, .item .arrastre, .item .punto{order:1}
  .item .acc .btn{min-height:42px}

  /* botones y campos, tamaño de dedo */
  .btn{min-height:44px; padding:11px 16px}
  .btn.chico{min-height:40px; padding:9px 13px}
  input, textarea{font-size:16px; padding:12px 14px}
  select{font-size:16px; padding:12px 38px 12px 14px}
  .sw i{width:48px; height:28px}
  .sw i::after{width:22px; height:22px}
  .sw input:checked + i::after{left:23px}

  /* tablas que no caben: se deslizan a lo ancho */
  .tabla-env{overflow-x:auto; -webkit-overflow-scrolling:touch; margin-inline:-16px; padding-inline:16px}
  table{min-width:520px}

  /* pestañas deslizables */
  .tabs{overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:0 0 auto; padding:11px 14px; font-size:.86rem}

  /* ventanas a pantalla casi completa */
  .modal{width:calc(100vw - 20px) !important; max-height:calc(100dvh - 40px)}
  .modal footer{position:sticky; bottom:0; background:var(--bg2)}
  .modal footer .btn{flex:1; justify-content:center; min-height:46px}

  /* el encuadre, en columna */
  .encuadre{flex-direction:column}
  .encuadre__lienzo{width:100%; max-width:320px; margin:0 auto}

  /* el chat del panel, en dos pantallas */
  .ch-marco{height:auto; grid-template-columns:1fr}
  /* La lista lleva su propio tope y se desplaza por dentro: sin él, con
     muchas conversaciones empujaba la caja de escribir fuera de la pantalla. */
  .ch-lista{max-height:46vh; border-right:0; border-bottom:1px solid var(--linea)}
  .ch-hilo{min-height:260px; max-height:52vh}
  .ch-msg{max-width:86%}

  /* el informe */
  .grafico{height:120px}
  .gcol{min-width:13px}
}

@media (max-width: 420px) {
  .cifras{grid-template-columns:1fr}
  .top .der span{display:none}
  .cuerpo{padding:14px 12px 90px}
  .tarjeta{padding:16px 14px}
}
/* ---------- arrastrar las fotos de la galería ---------- */
.gal__f{cursor:grab; transition:transform .16s, box-shadow .16s, opacity .16s}
.gal__f:active{cursor:grabbing}
.gal__f.cogida{opacity:.45; transform:scale(.94) rotate(-2deg)}
.gal__f.hueco{box-shadow:-3px 0 0 0 var(--oro)}
.gal__f::after{content:'⠿'; position:absolute; top:4px; left:5px; font-size:.72rem;
  color:rgba(255,255,255,.75); text-shadow:0 1px 3px rgba(0,0,0,.7); opacity:0; transition:.16s}
.gal__f:hover::after{opacity:1}