/* ============================================================
   MELLOS PTY — PANEL
   Hoja autónoma. NO carga assets/estilo.css a propósito:
   el CSS público usa clases genéricas (.panel, .filtros, .datos,
   label, input) que chocaban con el panel. Todo lo del panel
   vive bajo .app o con prefijo, así no puede volver a pasar.
   ============================================================ */
:root{
  --papel:#EEF3F5;
  --blanco:#FFFFFF;
  --pizarra:#2A3B42;
  --gris:#5C757F;
  --tenue:#7B929D;
  --aire:#7FC6DC;
  --ambar:#E8A33D;
  --verde:#1FA855;
  --rojo:#B4402F;
  --linea:rgba(42,59,66,.16);
  --borde:rgba(42,59,66,.10);
  --mono:'Chivo Mono',ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}

body.app{
  margin:0;
  background:var(--papel);
  color:var(--pizarra);
  font-family:'Archivo',system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
.app img{max-width:100%;display:block}
.app a{color:inherit}
.app h1,.app h2,.app h3{letter-spacing:-.02em;margin:0 0 12px;line-height:1.25}

/* ============================================================
   BARRA SUPERIOR
   ============================================================ */
.app-barra{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:clamp(14px,3vw,34px);
  width:100%;
  padding:13px clamp(16px,3vw,32px);
  background:var(--blanco);
  border-bottom:1px solid var(--borde);
}
.app-logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none}
.app-logo svg{width:24px;height:24px;flex:none}
.app-logo span{font-size:14px;font-weight:700;letter-spacing:.24em;text-transform:uppercase}
.app-logo span i{font-style:normal;font-weight:400;color:var(--tenue);margin-left:.24em}

.app-tabs{display:flex;gap:3px;margin-left:auto;flex-wrap:wrap}
.app-tabs a{
  font-size:13px;text-decoration:none;color:var(--gris);
  padding:8px 13px;border-radius:8px;white-space:nowrap;
  transition:background .18s,color .18s;
}
.app-tabs a:hover{background:var(--papel);color:var(--pizarra)}
.app-tabs a.activo{background:var(--pizarra);color:#fff}

.app-usuario{display:flex;gap:13px;font-family:var(--mono);font-size:11px;flex:none}
.app-usuario a{color:var(--tenue);text-decoration:none}
.app-usuario a:hover{color:var(--pizarra)}

@media (max-width:820px){
  .app-barra{flex-wrap:wrap;row-gap:10px}
  .app-tabs{display:none}
  .app-usuario{margin-left:auto}
}
@media (display-mode:standalone){
  .app-barra{padding-top:calc(13px + env(safe-area-inset-top))}
  .app-usuario a[target]{display:none}
}

/* ============================================================
   BARRA INFERIOR (móvil / instalado)
   ============================================================ */
.app-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:none;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(16px);
  border-top:1px solid var(--borde);
  padding:5px 2px calc(5px + env(safe-area-inset-bottom));
  overflow-x:auto;scrollbar-width:none;
}
.app-nav::-webkit-scrollbar{display:none}
.app-nav a{
  flex:1 0 auto;min-width:56px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 2px;text-decoration:none;color:#8DA2AA;border-radius:10px;
  font-family:var(--mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;
  transition:color .18s,background .18s;
}
.app-nav a svg{
  width:21px;height:21px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.app-nav a.activo{color:var(--pizarra)}
.app-nav a.activo svg{stroke:var(--aire);stroke-width:2}
.app-nav a:active{background:var(--papel)}
@media (max-width:820px){ .app-nav{display:flex} }
@media (max-width:390px){
  .app-nav a{font-size:8px;min-width:50px}
  .app-nav a svg{width:19px;height:19px}
}

/* ============================================================
   CUERPO
   ============================================================ */
.app-cuerpo{
  display:block;
  width:100%;max-width:1180px;
  margin:0 auto;
  padding:clamp(20px,3.5vw,36px) clamp(16px,3vw,32px) 40px;
}
@media (max-width:820px){ .app-cuerpo{padding-bottom:104px} }

.app-encabezado{
  display:flex;flex-wrap:wrap;gap:14px;
  align-items:flex-end;justify-content:space-between;margin-bottom:22px;
}
.app-encabezado h1{font-size:clamp(23px,3.2vw,31px);margin:0}
.sutil{font-size:13px;color:var(--tenue);margin:3px 0 0}
.mono{font-family:var(--mono);font-size:11px;color:var(--tenue);display:block}
.fuerte{font-weight:600;text-decoration:none}
.fuerte:hover{text-decoration:underline}
.app-vacio{color:var(--gris);padding:26px 0;margin:0}

.nota-panel{
  background:var(--blanco);border:1px solid var(--borde);
  border-left:3px solid var(--aire);border-radius:10px;
  padding:13px 17px;font-size:14px;color:var(--gris);margin:0 0 22px;
}
.nota-panel code{
  font-family:var(--mono);font-size:12px;
  background:var(--papel);padding:1px 5px;border-radius:4px;
}

.bloque{
  background:var(--blanco);border:1px solid var(--borde);border-radius:14px;
  padding:clamp(17px,2.6vw,25px);margin-bottom:18px;
}
.bloque h2{font-size:16px;margin:0 0 16px}
.bloque h2 .mono{display:inline}

/* ============================================================
   FORMULARIOS
   ============================================================ */
.app label,.app-entrada label{display:block;font-size:13px;color:var(--gris);margin-bottom:6px}
.app label > span:first-child{display:block;margin-bottom:5px}
.app input[type=text],.app input[type=password],.app input[type=number],
.app input[type=email],.app input[type=url],.app input[type=tel],
.app input[type=search],.app input[type=date],.app select,.app textarea,
.app-entrada input[type=text],.app-entrada input[type=password]{
  display:block;width:100%;
  margin-top:5px;padding:11px 13px;
  border:1px solid var(--linea);border-radius:9px;
  font-family:inherit;font-size:15px;color:var(--pizarra);
  background:var(--blanco);
  -webkit-appearance:none;appearance:none;
}
.app select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235C757F' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;
  background-size:11px;padding-right:34px;
}
.app textarea{min-height:120px;resize:vertical;line-height:1.6}
.app input:focus,.app select:focus,.app textarea:focus,
.app-entrada input:focus{
  outline:2px solid var(--aire);outline-offset:1px;border-color:transparent;
}
/* en la tarjeta de entrada los campos van con más aire entre sí */
.app-entrada input[type=text],.app-entrada input[type=password]{margin-bottom:16px}

.rejilla-form{display:grid;gap:18px;grid-template-columns:1.25fr .75fr;align-items:start}
@media (max-width:900px){ .rejilla-form{grid-template-columns:1fr} }
.par{display:grid;gap:13px;grid-template-columns:1fr 1fr}
@media (max-width:620px){ .par{grid-template-columns:1fr} }
.par-fluido{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(205px,1fr))}
.ancho-total{grid-column:1/-1}
.ayuda{display:block;font-style:normal;font-size:12px;color:var(--tenue);margin-top:4px}

.casilla{display:flex;gap:11px;align-items:flex-start;margin-bottom:15px;cursor:pointer}
.casilla input{margin:3px 0 0;width:17px;height:17px;flex:none;accent-color:#2A3B42}
.casilla > span{font-size:14px;color:var(--pizarra);line-height:1.45;margin:0}
.casilla em{display:block;font-style:normal;font-size:12px;color:var(--tenue);margin-top:2px}

.soltar{
  display:block;border:1.5px dashed var(--linea);border-radius:11px;
  padding:16px;text-align:center;cursor:pointer;background:#F8FBFC;
  transition:border-color .18s,background .18s;margin-bottom:13px;
}
.soltar:hover{border-color:var(--aire);background:#F1F8FA}
.soltar input{width:100%;font-size:13px;margin:0;border:0;padding:0;background:none}
.soltar input:focus{outline:none}
.soltar > span{display:block;font-size:12px;color:var(--tenue);margin:8px 0 0}

.acciones-form{display:flex;flex-wrap:wrap;gap:11px;align-items:center;margin:4px 0 30px}

.barra-filtros{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:20px}
.barra-filtros label{margin:0}
.barra-filtros input,.barra-filtros select{min-width:210px;width:auto}
@media (max-width:560px){
  .barra-filtros{flex-direction:column;align-items:stretch}
  .barra-filtros input,.barra-filtros select{min-width:0;width:100%}
}

.fila-nueva{display:flex;flex-wrap:wrap;gap:13px;align-items:flex-end}
.fila-nueva label{margin:0}

/* ============================================================
   BOTONES
   ============================================================ */
.boton{
  display:inline-flex;align-items:center;gap:8px;
  border:0;cursor:pointer;text-decoration:none;
  font-family:var(--mono);font-size:12px;
  letter-spacing:.15em;text-transform:uppercase;
  padding:13px 25px;border-radius:999px;
  background:var(--pizarra);color:#fff;
  transition:background .2s,transform .1s;
}
.boton:hover{background:#1B2A30}
.boton:active{transform:translateY(1px)}
.boton.secundario{background:transparent;color:var(--pizarra);border:1px solid var(--linea)}
.boton.secundario:hover{background:var(--papel)}
.boton:focus-visible,.pastilla:focus-visible,.enlace:focus-visible{
  outline:3px solid var(--ambar);outline-offset:2px;
}

.pastilla{
  border:1px solid var(--linea);background:var(--blanco);cursor:pointer;
  font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;
  padding:7px 13px;border-radius:999px;color:var(--gris);
  transition:background .18s,color .18s,border-color .18s;
}
.pastilla:hover{border-color:var(--pizarra)}
.pastilla.si{background:#E4F3EA;border-color:#B6DFC6;color:#186B39}
.pastilla.no{background:#FBE9E7;border-color:#EFCDC8;color:#9A3627}

.enlace{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;font-size:13px;color:var(--gris);text-decoration:none;
}
.enlace:hover{color:var(--pizarra);text-decoration:underline}
.enlace.peligroso{color:#9A3627}
.enlace.peligroso:hover{color:#7A2A1E}

.interruptor{display:inline-block;margin:0}
.interruptor input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.interruptor > span{
  display:block;width:40px;height:22px;border-radius:999px;
  background:#D3DFE4;position:relative;transition:background .2s;cursor:pointer;margin:0;
}
.interruptor > span::after{
  content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;
  border-radius:50%;background:#fff;transition:transform .2s;
}
.interruptor input:checked + span{background:var(--verde)}
.interruptor input:checked + span::after{transform:translateX(18px)}
.interruptor input:focus-visible + span{outline:2px solid var(--ambar);outline-offset:2px}

.boton-wa{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  padding:10px 15px;border-radius:999px;
  background:var(--verde);color:#fff;white-space:nowrap;border:0;cursor:pointer;
  transition:background .2s;
}
.boton-wa:hover{background:#178C46}
.ico-wa{width:15px;height:15px;fill:currentColor;flex:none}

/* ============================================================
   AVISOS
   ============================================================ */
.aviso{padding:12px 15px;border-radius:9px;font-size:14px;margin:0 0 15px}
.aviso.ok{background:#E4F3EA;color:#186B39}
.aviso.error{background:#FBE9E7;color:#9A3627}

/* ============================================================
   TABLAS
   ============================================================ */
.tabla-envoltura{
  overflow-x:auto;border:1px solid var(--borde);
  border-radius:12px;background:var(--blanco);
}
.tabla{width:100%;border-collapse:collapse;font-size:14px;min-width:800px}
.tabla th{
  text-align:left;font-family:var(--mono);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--tenue);
  padding:12px 14px;border-bottom:1px solid var(--borde);white-space:nowrap;
}
.tabla td{padding:11px 14px;border-bottom:1px solid var(--borde);vertical-align:middle}
.tabla tr:last-child td{border-bottom:0}
.tabla label{margin:0}
.tabla input[type=text],.tabla input[type=number]{margin-top:0}
.celda-orden{width:64px;text-align:center}
.mini{width:44px;height:44px;object-fit:contain;border-radius:8px;background:#fff;
  border:1px solid var(--borde);padding:2px}
span.mini{display:grid;place-items:center;color:#B4C6CD;font-size:13px}
.celda-estado{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.acciones{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* ============================================================
   RESUMEN
   ============================================================ */
.resumen-tarjetas{
  display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  margin-bottom:20px;
}
.tarjeta-dato{
  background:var(--blanco);border:1px solid var(--borde);
  border-radius:13px;padding:15px 17px;
}
.tarjeta-dato b{display:block;font-size:29px;font-weight:700;letter-spacing:-.03em;line-height:1}
.tarjeta-dato span{
  font-family:var(--mono);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--tenue);
}
.tarjeta-dato.alerta{border-left:3px solid var(--ambar)}
.tarjeta-dato.alerta b{color:#A9752A}

/* ============================================================
   CALENDARIO
   ============================================================ */
.dos-paneles{
  display:grid;gap:18px;
  grid-template-columns:minmax(300px,400px) minmax(0,1fr);
  align-items:start;
}
@media (max-width:940px){ .dos-paneles{grid-template-columns:1fr} }

.cal-barra{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.cal-barra h2{margin:0;font-size:16px}
.cal-nav{
  width:36px;height:36px;flex:none;
  display:grid;place-items:center;border-radius:10px;
  text-decoration:none;color:var(--gris);font-size:21px;line-height:1;
  border:1px solid var(--borde);
}
.cal-nav:hover{background:var(--papel);color:var(--pizarra)}

.cal-rejilla{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.cal-encabezado{margin-bottom:5px}
.cal-encabezado span{
  text-align:center;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;color:var(--tenue);padding:4px 0;
}
.cal-dia{
  position:relative;aspect-ratio:1;min-height:42px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border-radius:10px;text-decoration:none;color:var(--pizarra);
  border:1px solid transparent;background:#F6FAFB;
  transition:background .15s,border-color .15s,transform .1s;
}
.cal-dia:hover{background:#E4EFF3}
.cal-dia:active{transform:scale(.95)}
.cal-dia.vacio{background:transparent;pointer-events:none}
.cal-dia.hoy{border-color:var(--pizarra);font-weight:700}
.cal-dia.con-citas{background:#DBEBF1}
.cal-dia.elegido{background:var(--pizarra);color:#fff;border-color:var(--pizarra)}
.cal-dia.elegido .cal-cuenta{color:#C7E4EE}
.cal-numero{font-size:14px;line-height:1}
.cal-cuenta{font-family:var(--mono);font-size:10px;color:var(--gris)}
.cal-puntos{display:flex;gap:3px;position:absolute;bottom:5px}
.punto{width:5px;height:5px;border-radius:50%;display:inline-block;flex:none}
.punto.contrato{background:#1B7F9E}
.punto.urgente{background:var(--rojo)}
.punto.pendiente{background:var(--ambar)}
.cal-leyenda{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin:15px 0 0;font-family:var(--mono);font-size:10px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--tenue);
}
.cal-leyenda .punto{margin-left:9px}
.cal-leyenda .punto:first-child{margin-left:0}

/* ============================================================
   FICHAS DE CITA
   ============================================================ */
.titulo-lista{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;flex-wrap:wrap;font-size:15px;margin:0 0 15px;
}
.cita{
  background:var(--blanco);border:1px solid var(--borde);border-radius:13px;
  padding:17px;margin-bottom:13px;border-left:3px solid var(--linea);
}
.cita.estado-pendiente{border-left-color:var(--ambar)}
.cita.estado-confirmada{border-left-color:var(--verde)}
.cita.estado-hecha{border-left-color:#8DA2AA;opacity:.78}
.cita.estado-cancelada{border-left-color:var(--rojo);opacity:.55}
.cita-cabeza{
  display:flex;align-items:center;justify-content:space-between;
  gap:11px;flex-wrap:wrap;margin-bottom:9px;
}
.cita-tipo,.cita-estado{
  display:inline-block;font-family:var(--mono);font-size:10px;
  letter-spacing:.11em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;margin-right:5px;
}
.cita-tipo{background:var(--papel);color:var(--gris)}
.cita-tipo.tipo-contrato{background:#DDEEF4;color:#155F76}
.cita-tipo.tipo-mantenimiento{background:#E4F3EA;color:#186B39}
.cita-estado{border:1px solid var(--linea);color:var(--tenue)}
.cita-cuando{font-family:var(--mono);font-size:12px;color:var(--pizarra)}
.cita h3{font-size:17px;margin:0 0 3px}
.cita-dir{font-size:14px;color:var(--gris);margin:0 0 4px}
.cita-meta{font-family:var(--mono);font-size:11px;color:var(--tenue);margin:0}
.cita-mensaje{
  font-size:14px;color:var(--gris);margin:11px 0 0;padding:11px 13px;
  background:#F6FAFB;border-radius:9px;line-height:1.55;
}
.cita-contacto{
  display:flex;flex-wrap:wrap;gap:13px;align-items:center;
  margin:13px 0;padding-top:13px;border-top:1px solid var(--borde);
}
.cita-acciones{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cita-nota{margin-top:13px}
.cita-nota summary{
  cursor:pointer;font-family:var(--mono);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--tenue);
}
.cita-nota summary:hover{color:var(--pizarra)}
.cita-nota textarea{margin:10px 0}

/* ============================================================
   IMÁGENES
   ============================================================ */
.rejilla-imagenes{display:grid;gap:15px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.tarjeta-imagen{
  position:relative;margin:0;background:#F8FBFC;
  border:1px solid var(--borde);border-radius:12px;overflow:hidden;
}
.tarjeta-imagen img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;padding:8px}
.tarjeta-imagen .etiqueta{
  position:absolute;top:10px;left:10px;
  background:var(--ambar);color:#2A1D06;
  font-family:var(--mono);font-size:10px;
  letter-spacing:.11em;text-transform:uppercase;padding:4px 10px;border-radius:999px;
}
.tarjeta-imagen figcaption{padding:12px}
.tarjeta-imagen label{font-size:12px;margin-bottom:9px}
.tarjeta-imagen input{margin-top:4px;padding:8px 10px;font-size:13px}

.escena-fila{display:grid;gap:20px;grid-template-columns:minmax(0,250px) minmax(0,1fr);align-items:start}
@media (max-width:820px){ .escena-fila{grid-template-columns:1fr} }
.escena-vista{
  border-radius:11px;overflow:hidden;aspect-ratio:16/9;
  display:grid;place-items:center;border:1px solid var(--borde);
}
.escena-vista img{width:100%;height:100%;object-fit:cover}
.sin-foto{
  font-family:var(--mono);font-size:10px;
  letter-spacing:.15em;text-transform:uppercase;color:#A8BCC4;
}
.escena-campos h2{margin-bottom:14px}

/* ============================================================
   CHEQUEO DE CONFIGURACIÓN
   ============================================================ */
.chequeo{
  list-style:none;margin:0;padding:0;
  border:1px solid var(--borde);border-radius:11px;overflow:hidden;
}
.chequeo li{
  display:flex;justify-content:space-between;gap:14px;align-items:center;
  flex-wrap:wrap;
  padding:13px 15px;font-size:14px;border-bottom:1px solid var(--borde);
  border-left:3px solid transparent;
}
.chequeo li:last-child{border-bottom:0}
.chequeo li.si{border-left-color:var(--verde)}
.chequeo li.no{border-left-color:var(--rojo);background:#FDF5F4}
.chequeo span{color:var(--tenue)}
.chequeo b{font-weight:600;text-align:right;font-family:var(--mono);font-size:12px;word-break:break-all}

/* ============================================================
   PÁGINA DE ENTRADA
   ============================================================ */
body.app-entrada{
  margin:0;min-height:100vh;
  display:grid;place-items:center;padding:24px;
  background:#DDE9EE;color:var(--pizarra);
  font-family:'Archivo',system-ui,sans-serif;line-height:1.6;
}
.app-tarjeta{
  width:100%;max-width:410px;background:var(--blanco);
  border-radius:16px;padding:32px;
  box-shadow:0 24px 50px -30px rgba(22,35,42,.5);
}
.app-tarjeta h1{font-size:22px;margin:0 0 8px}
.app-tarjeta p{font-size:14px;color:var(--gris);margin:0 0 18px}
.app-tarjeta .boton{width:100%;justify-content:center;margin-top:4px}
.app-tarjeta code{
  font-family:var(--mono);font-size:12px;
  background:var(--papel);padding:1px 5px;border-radius:4px;
}

.formulario{display:block}
.mini.vacia{color:#B4C6CD}

/* ============================================================
   REVISIÓN RÁPIDA
   ============================================================ */
.revision{
  background:#FFF8EC;border:1px solid #F0DDBC;border-left:3px solid var(--ambar);
  border-radius:11px;padding:15px 18px;margin:0 0 20px;font-size:14px;
}
.revision b{
  display:block;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:#A9752A;margin-bottom:9px;
}
.revision ul{margin:0;padding-left:19px;display:grid;gap:7px;color:#7A5A22}
.revision code{
  font-family:var(--mono);font-size:12px;
  background:#F6EAD4;padding:1px 5px;border-radius:4px;
}

/* ============================================================
   CAMPO DE CLAVE CON OJO ANIMADO
   ============================================================ */
.campo-clave{position:relative;margin-bottom:16px}
.campo-clave input{margin-bottom:0!important;padding-right:48px}

.ojo{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;padding:0;border:0;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:transparent;color:var(--tenue);
  transition:background .18s,color .18s;
}
.ojo:hover{background:var(--papel);color:var(--pizarra)}
.ojo:active{transform:translateY(-50%) scale(.92)}
.ojo:focus-visible{outline:3px solid var(--ambar);outline-offset:1px}

.ojo svg{overflow:visible}
.ojo svg *{
  fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}

/* el ojo se achata cuando la clave está oculta: el párpado baja */
.ojo-cuerpo{
  transform-origin:12px 12px;
  transition:transform 300ms cubic-bezier(.34,1.4,.5,1);
}
.ojo-pupila{
  transform-origin:12px 12px;
  transition:transform 300ms cubic-bezier(.34,1.5,.5,1), opacity 200ms;
}

/* estado oculto (por defecto): entrecerrado y con la raya dibujada */
.ojo[aria-pressed="false"] .ojo-cuerpo{transform:scaleY(.62)}
.ojo[aria-pressed="false"] .ojo-pupila{transform:scale(.72)}

/* la raya se dibuja de una punta a la otra, no aparece de golpe */
.ojo-raya{
  stroke-dasharray:100;
  transition:stroke-dashoffset 320ms cubic-bezier(.5,0,.2,1);
}
.ojo[aria-pressed="false"] .ojo-raya{stroke-dashoffset:0}
.ojo[aria-pressed="true"]  .ojo-raya{stroke-dashoffset:100}

/* estado visible: el ojo se abre con un pequeño rebote */
.ojo[aria-pressed="true"] .ojo-cuerpo{transform:scaleY(1)}
.ojo[aria-pressed="true"] .ojo-pupila{transform:scale(1)}

.aviso-mayus{
  display:flex;align-items:center;gap:7px;
  margin:-6px 0 16px;font-size:12.5px;color:#A9752A;
}
.aviso-mayus::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--ambar);flex:none;
}

@media (prefers-reduced-motion:reduce){
  .ojo-cuerpo,.ojo-pupila,.ojo-raya{transition-duration:1ms}
}

.pista-clave{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tenue);margin-left:7px;
}

.tabla-medidas{
  width:100%;border-collapse:collapse;margin:0 0 14px;
  font-family:var(--mono);font-size:12px;
}
.tabla-medidas th{
  text-align:left;padding:6px 12px 6px 0;font-weight:600;
  color:var(--tenue);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  border-bottom:1px solid var(--borde);
}
.tabla-medidas td{padding:7px 12px 7px 0;border-bottom:1px solid var(--borde)}
.tabla-medidas tr:last-child td{border-bottom:0}
.tabla-medidas td:first-child{font-family:'Archivo',sans-serif;font-size:13px}

/* ============================================================
   BARRA DE CARGA
   ============================================================ */
.capa-subida{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;padding:24px;
  background:rgba(22,35,42,.55);
  backdrop-filter:blur(3px);
  opacity:0;transition:opacity .2s;
}
.capa-subida.visible{opacity:1}
.capa-caja{
  width:100%;max-width:390px;background:var(--blanco);
  border-radius:16px;padding:26px 28px;
  box-shadow:0 30px 60px -24px rgba(22,35,42,.6);
  text-align:center;
}
.capa-titulo{
  margin:0 0 16px;font-size:16px;font-weight:600;letter-spacing:-.01em;
}
.capa-barra{
  height:8px;border-radius:99px;background:var(--papel);
  overflow:hidden;margin-bottom:12px;
}
.capa-barra i{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--aire),#4FA9C6);
  transition:width .18s linear;
}
/* mientras el servidor redimensiona no hay porcentaje real que mostrar:
   una banda en movimiento dice "sigo trabajando" sin inventar un número */
.capa-barra.trabajando i{
  width:100%!important;
  background:repeating-linear-gradient(115deg,
    var(--aire) 0 14px, #B4DEEB 14px 28px);
  background-size:200% 100%;
  animation:barra-trabajando 1s linear infinite;
}
@keyframes barra-trabajando{
  from{background-position:0 0}
  to{background-position:-56px 0}
}
.capa-barra.falla i{background:var(--rojo);width:100%!important;animation:none}
.capa-detalle{
  margin:0;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.04em;color:var(--tenue);
}

.peso-archivos{
  display:block;margin-top:6px;
  font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gris);
}
.peso-archivos.pesado{color:#A9752A}
.peso-archivos.pesado::after{
  content:" · puede tardar";
}

@media (prefers-reduced-motion:reduce){
  .capa-barra.trabajando i{animation:none}
  .capa-subida{transition:none}
}