/* =====================================================================
   FotoYa — paneles (fotografo, administrador, cliente) y documentos legales
   Complementa estilo.css. Mobile first, misma paleta.
   ===================================================================== */

/* ---------- Layout con barra lateral ---------- */
.marco{display:block}
@media(min-width:1024px){
  .marco{display:grid; grid-template-columns:238px minmax(0,1fr); gap:0;
         min-height:70vh}
}

.lateral{
  display:flex; gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border-bottom:1px solid var(--linea); padding:10px 0; margin-bottom:20px;
}
.lateral h4{display:none}
.lateral a{
  display:inline-flex; align-items:center; gap:7px; padding:8px 13px;
  font-size:14px; font-weight:500; color:var(--texto-2); white-space:nowrap;
  border-radius:var(--r-s); transition:.15s;
}
.lateral a:hover{background:var(--linea-2); color:var(--texto)}
.lateral a.act{background:var(--grad-suave); color:var(--azul)}
.lateral .cuenta{
  background:var(--grad); color:#fff; border-radius:var(--r-full); font-size:10.5px;
  font-weight:700; padding:1px 6px; min-width:18px; text-align:center;
}
@media(min-width:1024px){
  .lateral{
    display:block; overflow:visible; border-bottom:0; border-right:1px solid var(--linea);
    padding:20px 0 40px; margin:0; position:sticky;
    top:calc(var(--nav-alto) + 1px); align-self:start;
    max-height:calc(100vh - var(--nav-alto)); overflow-y:auto;
  }
  .lateral h4{
    display:block; font-size:11.5px; font-weight:650; color:var(--texto-3);
    margin:20px 20px 8px; letter-spacing:.02em;
  }
  .lateral a{
    display:flex; justify-content:space-between; border-radius:0;
    border-left:2px solid transparent; padding:9px 20px; margin:0;
  }
  .lateral a.act{border-left-color:var(--azul); background:var(--grad-suave)}
}
.contenido-panel{padding-bottom:48px; min-width:0}
@media(min-width:1024px){ .contenido-panel{padding:20px 0 60px 32px} }

.panel-cab{
  padding:24px 0 18px; display:flex; flex-direction:column; gap:12px;
}
@media(min-width:768px){
  .panel-cab{flex-direction:row; justify-content:space-between;
             align-items:flex-end; padding:32px 0 22px}
}
.panel-cab h1{font-size:clamp(24px,5vw,32px); letter-spacing:-.035em}

/* ---------- Tarjetas de dato ---------- */
.tarjetas{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
@media(min-width:768px){
  .tarjetas{grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px}
}
.dato{
  border:1px solid var(--linea); border-radius:var(--r); padding:16px;
  background:var(--superficie); box-shadow:var(--s1);
}
@media(min-width:768px){ .dato{padding:20px} }
.dato b{font-size:23px; font-weight:700; display:block; letter-spacing:-.03em;
        line-height:1.25}
.dato span{font-size:12.5px; color:var(--texto-3); font-weight:500}
.dato small{display:block; font-size:12.5px; color:var(--texto-2); margin-top:5px}
.dato--alerta{border-color:color-mix(in srgb,var(--peligro) 40%,transparent)}
.dato--ok{border-color:color-mix(in srgb,var(--exito) 40%,transparent)}
.dato--marca b{background:var(--grad); -webkit-background-clip:text;
               background-clip:text; -webkit-text-fill-color:transparent}

/* ---------- Bandas de aviso ---------- */
.banda{
  display:flex; gap:11px; align-items:flex-start;
  border:1px solid var(--linea); border-radius:var(--r); background:var(--superficie);
  padding:14px 16px; margin-bottom:12px; font-size:14px; line-height:1.55;
  box-shadow:var(--s1);
}
.banda::before{content:""; width:3px; align-self:stretch; border-radius:3px;
               background:var(--azul); flex:none}
.banda--critico::before{background:var(--peligro)}
.banda--alto::before{background:var(--fucsia)}
.banda--medio::before{background:var(--violeta)}
.banda--ok::before{background:var(--exito)}
.banda--info::before{background:var(--texto-3)}
.banda b{display:block; margin-bottom:3px; font-weight:600}
.banda code{font-family:var(--mono); font-size:12.5px; background:var(--linea-2);
            padding:2px 6px; border-radius:4px}

/* ---------- Ajustes ---------- */
.ajuste{
  display:grid; gap:10px; padding:16px 0; border-bottom:1px solid var(--linea-2);
}
@media(min-width:900px){
  .ajuste{grid-template-columns:minmax(0,1fr) 280px; gap:28px; align-items:start}
}
.ajuste__info b{font-weight:600; font-size:15px; display:block}
.ajuste__info p{font-size:13px; color:var(--texto-2); margin-top:4px; line-height:1.5}
.ajuste__campo input,.ajuste__campo select,.ajuste__campo textarea{font-size:15px}
.marca-critico{
  display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase;
  color:var(--fucsia); border:1px solid currentColor; border-radius:4px;
  padding:1px 5px; margin-left:7px; vertical-align:middle; letter-spacing:.03em;
}
.marca-defecto{font-size:11.5px; color:var(--texto-3); margin-left:7px}

.interruptor{display:inline-flex; align-items:center; gap:10px; cursor:pointer;
             font-size:14.5px}
.interruptor input{position:absolute; opacity:0; width:0; height:0}
.interruptor__pista{
  width:42px; height:24px; border-radius:var(--r-full); background:var(--linea);
  position:relative; transition:.2s; flex:none;
}
.interruptor__pista::after{
  content:""; position:absolute; top:3px; left:3px; width:18px; height:18px;
  border-radius:50%; background:#fff; transition:.2s;
  box-shadow:0 1px 3px rgba(15,23,42,.3);
}
.interruptor input:checked + .interruptor__pista{background:var(--grad)}
.interruptor input:checked + .interruptor__pista::after{transform:translateX(18px)}
.interruptor input:focus-visible + .interruptor__pista{outline:2px solid var(--azul);
                                                       outline-offset:2px}

/* ---------- Moderacion ---------- */
.revision{
  display:grid; gap:16px; padding:18px 0; border-bottom:1px solid var(--linea);
}
@media(min-width:900px){
  .revision{grid-template-columns:170px minmax(0,1fr) 210px; gap:22px;
            align-items:start}
}
.revision__img{
  aspect-ratio:1; overflow:hidden; border-radius:var(--r); background:var(--linea-2);
  position:relative; max-width:220px;
}
.revision__img img{width:100%; height:100%; object-fit:cover}
.revision__img--riesgo img{filter:blur(16px)}
.revision__img--riesgo:hover img,.revision__img--riesgo:focus-within img{filter:none}
.velo{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  font-size:11.5px; font-weight:600; color:#fff; background:rgba(15,23,42,.5);
  padding:10px; transition:opacity .15s;
}
.revision__img--riesgo:hover .velo{opacity:0}
.senal{display:flex; justify-content:space-between; gap:12px; font-size:13.5px;
       padding:7px 0; border-bottom:1px solid var(--linea-2)}
.barra{height:5px; background:var(--linea); border-radius:var(--r-full);
       overflow:hidden; margin-top:5px}
.barra span{display:block; height:100%; background:var(--grad); border-radius:inherit}
.barra--alto span{background:var(--peligro)}

/* ---------- Referidos ---------- */
.codigo-grande{
  font-family:var(--mono); letter-spacing:.24em; font-size:clamp(22px,6vw,30px);
  font-weight:600; background:var(--grad-suave); padding:16px 22px;
  border-radius:var(--r); display:inline-block; border:1.5px dashed var(--azul);
  cursor:pointer; color:var(--azul);
}
.enlace-copiar{
  display:flex; gap:8px; align-items:center; background:var(--fondo-2);
  border:1px solid var(--linea); border-radius:var(--r-s); padding:11px 14px;
  font-size:12.5px; word-break:break-all; margin-top:12px; cursor:pointer;
  font-family:var(--mono);
}
.enlace-copiar:hover{border-color:var(--azul)}

/* ---------- Grafico ---------- */
.grafico{display:flex; align-items:flex-end; gap:2px; height:110px; margin:16px 0}
.grafico div{flex:1; background:var(--grad); border-radius:3px 3px 0 0; min-height:2px;
             opacity:.85; transition:opacity .15s}
.grafico div:hover{opacity:1}
.grafico__pie{display:flex; justify-content:space-between; font-size:12px;
              color:var(--texto-3)}

/* ---------- Estados extra ---------- */
.chip--rev{border-color:color-mix(in srgb,var(--fucsia) 40%,transparent);
           color:var(--fucsia); background:color-mix(in srgb,var(--fucsia) 8%,transparent)}
.chip--bloq{border-color:color-mix(in srgb,var(--peligro) 40%,transparent);
            color:var(--peligro); background:color-mix(in srgb,var(--peligro) 8%,transparent)}
.chip--cong{background:var(--peligro); border-color:var(--peligro); color:#fff}
.chip--frio{border-color:color-mix(in srgb,var(--azul-claro) 45%,transparent);
            color:var(--azul-claro)}

/* ---------- Pasos de verificacion ---------- */
.pasos-lista{display:grid; gap:9px; margin:16px 0}
.paso-item{
  display:flex; gap:12px; align-items:center; padding:14px 16px;
  border:1px solid var(--linea); border-radius:var(--r); font-size:14.5px;
  background:var(--superficie);
}
.paso-item__marca{
  width:24px; height:24px; border-radius:50%; border:1.5px solid var(--linea);
  display:grid; place-items:center; font-size:12px; font-weight:600; flex:none;
  color:var(--texto-3);
}
.paso-item--hecho{border-color:color-mix(in srgb,var(--exito) 40%,transparent)}
.paso-item--hecho .paso-item__marca{background:var(--exito); border-color:var(--exito);
                                    color:#fff}

/* ---------- Fila editable de foto ---------- */
.fila-foto{
  display:grid; grid-template-columns:64px minmax(0,1fr); gap:12px;
  align-items:center; padding:14px 0; border-bottom:1px solid var(--linea-2);
}
.fila-foto img{width:64px; height:64px; object-fit:cover; border-radius:var(--r-s)}
.fila-foto__campos{display:grid; gap:8px; grid-column:1/-1}
@media(min-width:900px){
  .fila-foto{grid-template-columns:76px minmax(0,1fr) auto; gap:16px}
  .fila-foto img{width:76px; height:76px}
  .fila-foto__campos{grid-column:auto;
                     grid-template-columns:minmax(0,1fr) 120px 100px auto;
                     align-items:center}
}
.fila-foto__acc{display:flex; gap:10px; align-items:center; flex-wrap:wrap;
                grid-column:1/-1}
@media(min-width:900px){ .fila-foto__acc{grid-column:auto} }
.fila-foto input{min-height:38px; padding:8px 11px; font-size:14px}

/* ---------- Documentos legales ---------- */
.documento{max-width:70ch; margin:0 auto; font-size:16px; line-height:1.75}
.documento h2{font-size:22px; margin:36px 0 12px; letter-spacing:-.03em}
.documento h3{font-size:17px; margin:26px 0 8px; font-weight:600}
.documento p{margin-bottom:15px; color:var(--texto-2)}
.documento ul,.documento ol{margin:0 0 16px 20px; color:var(--texto-2)}
.documento li{margin-bottom:7px}
.documento strong{color:var(--texto); font-weight:600}
.documento table{width:100%; border-collapse:collapse; margin:18px 0; font-size:14.5px}
.documento th,.documento td{padding:10px 12px; border-bottom:1px solid var(--linea);
                            text-align:left}
.documento th{font-weight:600; color:var(--texto-3); font-size:12.5px}
.documento a{color:var(--azul)}

/* ---------- CAPTCHA ---------- */
.captcha{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
.captcha img{border:1px solid var(--linea); border-radius:var(--r-s); height:54px;
             flex:none}
.captcha input{text-transform:uppercase; letter-spacing:.2em; text-align:center;
               min-width:120px; flex:1}

/* ---------- Misc ---------- */
.acciones-fila{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.tabla td .mini{width:44px; height:44px; object-fit:cover; border-radius:var(--r-s)}
.subnav{display:flex; gap:4px; overflow-x:auto; border-bottom:1px solid var(--linea);
        padding:8px 0}
.subnav a{padding:7px 12px; font-size:14px; font-weight:500; color:var(--texto-2);
          border-radius:var(--r-s); white-space:nowrap}
.subnav a.act{background:var(--grad-suave); color:var(--azul)}

/* =====================================================================
   Subida por trozos — progreso archivo por archivo

   Una barra global no sirve aqui: cuando fallan tres fotos de trescientas,
   el fotografo necesita saber CUALES, no que el conjunto va al 99 %.
   ===================================================================== */
.subidas{ margin-top:16px; display:flex; flex-direction:column; gap:8px }
.subidas:empty{ display:none }

.subida{
  display:grid; gap:4px 12px; align-items:center;
  grid-template-columns:1fr auto;
  grid-template-areas:"nombre cancelar" "barra barra" "estado estado";
  border:1px solid var(--linea); border-radius:var(--r-s);
  background:var(--superficie); padding:10px 13px; font-size:13.5px;
}
@media(min-width:768px){
  .subida{
    grid-template-columns:minmax(0,1fr) 150px 92px auto;
    grid-template-areas:"nombre barra estado cancelar";
  }
}

.subida__nombre{
  grid-area:nombre; font-weight:500; color:var(--texto);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.subida__estado{
  grid-area:estado; font-size:12.5px; color:var(--texto-3);
  font-variant-numeric:tabular-nums;
}
.subida__cancelar{ grid-area:cancelar; font-size:12.5px }

.subida__barra{
  grid-area:barra; height:6px; border-radius:var(--r-full);
  background:var(--linea-2); overflow:hidden;
}
.subida__barra span{
  display:block; height:100%; width:0; border-radius:var(--r-full);
  background:var(--grad); transition:width .25s ease;
}

/* Los estados no se distinguen SOLO por color: cada uno cambia tambien el
   texto de la derecha, que es lo que lee quien no percibe el matiz. */
.subida--ok{ border-color:color-mix(in srgb, var(--exito) 40%, var(--linea)) }
.subida--ok .subida__barra span{ background:var(--exito) }
.subida--ok .subida__estado{ color:var(--exito) }

.subida--error{ border-color:color-mix(in srgb, var(--peligro) 40%, var(--linea)) }
.subida--error .subida__barra span{ background:var(--peligro) }
.subida--error .subida__estado{ color:var(--peligro) }

.subida--espera .subida__estado,
.subida--reanuda .subida__estado{ color:var(--alerta) }
.subida--espera .subida__barra span{
  background:var(--alerta); animation:subida-late 1.4s ease-in-out infinite;
}
@keyframes subida-late{ 50%{ opacity:.35 } }

@media(prefers-reduced-motion:reduce){
  .subida__barra span{ transition:none }
  .subida--espera .subida__barra span{ animation:none }
}

.subidas__pie{ margin-top:12px }
.subidas__pie:has([data-subida-resumen]:empty){ display:none }
.subida__barra--total{ height:4px }