/* ================= CORAL · Mystery Shopper ================= */
:root{
  --coral:#fa5d5d;            /* coral de marca (logo) */
  --green:#8ca89a;            /* verde salvia principal (acciones / acentos) */
  --green-d:#7a9788;          /* salvia para estados activos */
  --green-ink:#46685b;        /* verde oscuro para textos y acentos legibles */
  --green-tint:#d8e4dd;       /* verde claro de marca (fondos suaves) */
  --on-green:#20342b;         /* texto oscuro sobre salvia */
  --navy:#003366;             /* azul de marca (acento) */
  --yellow:#ffde59;           /* SOLO para resaltar */
  --ink:#3f3f3f; --muted:#8a8a86;
  --bg:#f5f4f1; --card:#ffffff; --line:#e4e6e1; --ok:#1f9d55; --pend:#c47d00;
  --danger:#c0392b; --radius:14px;
  --sh:0 1px 3px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.04);
}
*{box-sizing:border-box}
/* overscroll-behavior evita el "tirar para refrescar" del navegador (que recargaba
   la app y borraba un arqueo/auditoría a medio cargar). */
html,body{margin:0; overscroll-behavior-y:contain}
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.4;
  -webkit-text-size-adjust:100%; padding-bottom:env(safe-area-inset-bottom);
}
#app{max-width:560px; margin:0 auto; padding:16px}

/* Tipografía de marca: Barlow para títulos/acciones */
h1,h2,h3,legend,.hi,.brand,.btn,fieldset.hilite legend{
  font-family:"Barlow","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
h1,h2,h3{margin:.2em 0}
h3{font-size:1.3rem; font-weight:700}
.brand{font-size:2.4rem; letter-spacing:.15em; color:var(--coral); font-weight:800; margin:0}
.logo-brand{width:70%; max-width:230px; height:auto; margin:6px auto 2px; display:block}
.form.login{text-align:left; margin-top:18px}
.form.login label{margin-top:14px}
.login-error{background:#fdecea; color:var(--danger); border-radius:10px; padding:10px 12px; font-size:.9rem; font-weight:600; margin:12px 0 0}
.sub{color:var(--muted); margin:.2em 0 1.4em}
.muted{color:var(--muted); font-size:.9rem}
.center{text-align:center}
code{background:var(--green-tint); padding:2px 6px; border-radius:6px; font-family:"Anonymous Pro",ui-monospace,SFMono-Regular,Menlo,monospace}

/* Cards */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--sh); padding:18px; margin:14px 0}
.card.center{padding:28px 18px}

/* Topbar */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 2px 2px}
.hi{font-weight:700; font-size:1.15rem; text-transform:capitalize}
.date{color:var(--muted); font-size:.85rem; text-transform:capitalize}
.link{background:none; border:none; color:var(--green-ink); font-weight:600; font-size:.95rem; padding:6px; cursor:pointer}

/* Botones */
.btn{display:block; width:100%; padding:14px 16px; border-radius:12px; border:1px solid var(--line);
  background:#fff; font-size:1rem; font-weight:600; cursor:pointer; color:var(--ink)}
.btn:active{transform:scale(.99)}
.btn-lg{padding:18px; font-size:1.1rem}
.btn-xl{padding:18px; font-size:1.15rem; margin:10px 0}
.btn-primary{background:var(--green); color:var(--on-green); border-color:var(--green)}
.btn-primary:active{background:var(--green-d)}
.btn-danger{background:#fff; color:var(--danger); border-color:var(--danger); font-weight:700}
.btn-danger:active{background:#fdecea}
.stack{display:flex; flex-direction:column; gap:10px}

/* Sync badge */
.sync{font-size:.85rem; font-weight:600; padding:8px 12px; border-radius:10px; text-align:center; margin:8px 0}
.sync-ok{background:var(--green-tint); color:var(--green-ink)}
.sync-pend{background:#fdf3e0; color:var(--pend)}
.sync-run{background:#e7f0fb; color:#1f6fc4}
.sync-fail{background:#fdecea; color:var(--danger)}

/* Aviso del supervisor al auditor */
.aviso{background:#fff7d6; border:1px solid var(--yellow); border-radius:12px; padding:14px; margin:10px 0}
.aviso strong{display:block; margin-bottom:6px}
.aviso p{margin:6px 0}
.aviso .btn{margin-top:10px}
.aviso a.btn, a.btn.enlace{text-align:center; text-decoration:none}
a.btn.enlace{margin:16px 0 8px}

/* Items lista */
.count{background:var(--green-ink); color:#fff; border-radius:20px; padding:1px 9px; font-size:.8rem; margin-left:6px}
/* Encabezado de mes (agrupación en la lista del equipo) */
.mes-hdr{margin:16px 0 6px; padding-bottom:4px; border-bottom:2px solid var(--green);
  font-weight:700; font-size:.95rem; display:flex; justify-content:space-between; align-items:center}
.mes-hdr:first-child{margin-top:2px}
/* Selectores de filtro (Mes / Ubicación) */
.fsel{font-size:.8rem; color:var(--muted)}
/* Arqueo de caja — líneas dinámicas y totales */
.arq-item{border:1px solid var(--line); border-radius:10px; padding:10px; margin-bottom:8px; background:#fff}
.arq-item-top{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.arq-item-top .l-concepto{flex:1 1 auto; min-width:0; margin:0}
.arq-item-lbl{flex:1 1 auto; font-weight:700; font-size:.9rem; color:var(--green-ink)}
.l-del,.z-del{flex:0 0 auto; width:38px; height:38px; padding:0; margin:0; background:#fff; color:var(--danger); border:1px solid var(--line); border-radius:8px; font-weight:700; line-height:1}
.arq-row{display:flex; gap:6px; align-items:center}
.arq-row input,.arq-row select{margin:0; padding:10px; min-width:0}
.arq-row .l-monto,.arq-row .z-monto{flex:1 1 auto}
.arq-row .l-moneda,.arq-row .z-moneda{flex:0 0 76px; padding-right:4px}
.arq-row .l-tc,.arq-row .z-tc{flex:0 0 68px}
.l-total-wrap{text-align:right; margin-top:8px; padding-top:6px; border-top:1px dashed var(--line)}
.l-total,.z-total{font-weight:700; font-size:.95rem}
.arq-foto{margin-top:8px; padding-top:8px; border-top:1px solid var(--line)}
.arq-foto-lbl{font-size:.85rem; font-weight:600}
/* Dato del ticket que la IA no pudo leer y hay que completar a mano */
.falta-dato{background:#fff7d6; border-color:var(--yellow)}
/* Viaje del día (resumen en el home de Mystery) */
.item-sub.via-tramo{white-space:normal; overflow:visible; text-overflow:clip; margin:3px 0; line-height:1.35}
.foto-thumbs{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.foto-thumbs:empty{display:none}
.foto-th{position:relative; width:72px; height:72px}
.foto-th img{width:72px; height:72px; object-fit:cover; border-radius:8px; border:1px solid var(--line); display:block}
.foto-th button{position:absolute; top:-6px; right:-6px; width:26px; height:26px; padding:0; margin:0; border-radius:50%;
  border:1px solid var(--line); background:#fff; color:var(--danger); font-weight:700; font-size:.8rem; line-height:1; cursor:pointer}
.foto-btns{display:flex; gap:8px; margin-top:8px}
.btn-foto{position:relative; flex:1 1 0; min-width:0; margin:0; padding:10px 6px; text-align:center; font-size:.9rem; color:var(--green-ink)}
.foto-proc{margin-top:6px}
.foto-input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.l-aviso{background:#fff7d6; border-radius:8px; padding:6px 10px; margin:0 0 8px; font-size:.82rem; font-weight:600}
/* Aviso de versión nueva */
.upd-bar{position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); max-width:480px; margin:0 auto; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--navy); color:#fff;
  border-radius:12px; padding:10px 10px 10px 14px; font-size:.9rem; font-weight:600; box-shadow:0 4px 16px rgba(0,0,0,.2)}
.upd-btn{flex:0 0 auto; border:none; border-radius:8px; background:#fff; color:var(--navy); font-weight:700; font-size:.9rem; padding:9px 14px; cursor:pointer}
/* Calculadora de montos */
.arq-row .monto-wrap{flex:1 1 auto; position:relative; min-width:0}
.arq-row .monto-wrap input{width:100%; padding-right:42px}
.calc-btn{position:absolute; right:3px; top:50%; transform:translateY(-50%); width:36px; height:36px; margin:0; padding:0;
  border:none; border-radius:8px; background:var(--green-tint); color:var(--green-ink); line-height:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center}
.calc-tit{display:flex; align-items:center; gap:6px; color:var(--green-ink)}
.calc-back{position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:50; display:flex; align-items:flex-end; justify-content:center}
.calc{background:var(--card); width:100%; max-width:420px; border-radius:18px 18px 0 0; padding:14px 16px 18px; box-shadow:0 -4px 20px rgba(0,0,0,.15)}
.calc-top{display:flex; justify-content:space-between; align-items:center; font-family:Barlow,sans-serif}
.calc-x{width:38px; height:38px; border:1px solid var(--line); border-radius:8px; background:#fff; font-weight:700; cursor:pointer}
.calc-cinta{margin-top:10px; min-height:1.4em; text-align:right; font-family:"Anonymous Pro",ui-monospace,monospace; font-size:1rem; color:var(--muted); word-break:break-all}
.calc-res{text-align:right; font-family:"Anonymous Pro",ui-monospace,monospace; font-size:1.6rem; font-weight:700; min-height:1.3em; margin:2px 0 10px}
.calc-keys{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px}
.calc-keys button{height:52px; border:1px solid var(--line); border-radius:10px; background:#fff; font-size:1.3rem; font-weight:600; color:var(--ink); cursor:pointer}
.calc-keys button:active{background:var(--green-tint)}
.calc-keys .k-fn{color:var(--danger)}
.calc-keys .k-op{background:var(--green-tint); color:var(--green-ink)}
.calc-keys .k-eq{grid-row:span 2; height:auto; background:var(--green); color:var(--on-green); border-color:var(--green)}
.calc-keys .k-cero{grid-column:span 2}
.firma{width:100%; height:180px; border:1px dashed var(--line); border-radius:10px; background:#fff; touch-action:none; display:block; margin-top:6px}
.arq-thumbs{display:flex; flex-wrap:wrap; gap:8px}
.arq-thumb{margin:0; width:96px}
.arq-thumb img{width:96px; height:96px; object-fit:cover; border-radius:8px; border:1px solid var(--line)}
.arq-thumb figcaption{font-size:.72rem; color:var(--muted); text-align:center; margin-top:2px}
.firma-det img{display:block; width:100%; max-width:320px; border:1px solid var(--line); border-radius:8px; background:#fff; margin-top:4px}
.arq-total{display:flex; justify-content:space-between; align-items:center; padding:8px 4px; font-weight:600; margin-top:6px}
.arq-dif{display:flex; gap:10px; background:var(--green-tint); border-radius:12px; padding:12px; margin:10px 0}
.arq-dif > div{flex:1; display:flex; flex-direction:column; gap:2px}
.arq-dif.dif-mal{background:#fdf3e0}
/* Catálogo de ubicaciones y barras */
.cat-ubic{border:1px solid var(--line); border-radius:12px; padding:10px; margin-bottom:12px}
.cat-ubic-hdr{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px; font-size:1rem}
.cat-ubic .item{margin-bottom:6px}
.cat-ubic .add-barra{margin-top:8px; font-size:.85rem; padding:10px}
.item{display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid var(--line); border-radius:12px; padding:12px}
.item-main{display:flex; flex-direction:column; min-width:0}
.item-main strong{font-size:.98rem}
.item-sub{color:var(--muted); font-size:.82rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.item-tap{cursor:pointer}
.item-tap:active{background:var(--green-tint)}
.chev{color:var(--muted); font-size:1.4rem; line-height:1; margin-left:2px}
.tag{font-size:.72rem; font-weight:700; padding:3px 8px; border-radius:20px; white-space:nowrap}
.tag-ok{background:#e6f5ec; color:var(--ok)}
.tag-pend{background:#fdf3e0; color:var(--pend)}
.tag-inc{background:#fdecea; color:var(--danger)}
.tags{display:flex; flex-direction:column; gap:4px; align-items:flex-end}
/* Fila de la papelera: info arriba, botones (restaurar / eliminar) abajo */
.item-col{flex-direction:column; align-items:stretch}
.item-col .item-sub{white-space:normal}
.item-col .tags{flex-direction:row; align-items:stretch; gap:8px; margin-top:10px}
.item-col .tags .btn{margin:0; font-size:.85rem; padding:10px 8px}

/* Detalle de auditoría (supervisor) */
.drow{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line)}
.drow:last-child{border-bottom:none}
.dk{color:var(--muted); font-size:.85rem; flex:0 0 auto}
.dv{font-weight:600; text-align:right; word-break:break-word}

/* Formulario */
.form{margin:8px 0 40px}
fieldset{border:1px solid var(--line); border-radius:var(--radius); background:#fff; margin:12px 0; padding:14px; box-shadow:var(--sh)}
legend{font-weight:700; color:var(--green-ink); padding:0 6px; font-size:1.22rem}
fieldset.hilite{border:2px solid var(--green); background:var(--green-tint)}
fieldset.hilite legend{background:var(--green); color:var(--on-green); border-radius:8px; padding:3px 10px}
.hint{display:block; font-weight:400; color:var(--muted); font-size:.78rem; margin-top:2px}
/* Tipo de cambio aplicado (se calcula solo en barras que cobran en UYU/USD) */
.tc-info{margin:6px 0 0; padding:8px 10px; border-radius:8px; background:var(--green-tint);
  color:var(--green-ink); font-size:.85rem; font-weight:700}
.req{color:var(--danger); font-weight:700}
label{display:block; font-size:.9rem; font-weight:600; margin:12px 0 0}
input,select,textarea{width:100%; margin-top:6px; padding:12px; font-size:16px; /*evita zoom iOS*/
  border:1px solid var(--line); border-radius:10px; background:#fff; font-family:inherit; color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green-ink); border-color:var(--green-ink)}
textarea{resize:vertical}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px}
.row3 input{padding:12px 8px}
/* Celdas con label + Sí/No: alinear los botones al pie para que queden parejos
   aunque un label tenga subtítulo y el otro no (las celdas estiran a igual altura) */
.row2 > div{display:flex; flex-direction:column}
.row2 > div .segmented{margin-top:auto}
.hidden{display:none !important}

/* Segmented Sí/No */
.segmented{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px}
.seg{padding:12px; border:1px solid var(--line); border-radius:10px; background:#fff; font-weight:700; cursor:pointer}
.seg.active{background:var(--green); color:var(--on-green); border-color:var(--green)}

/* Estrellas */
.stars{display:flex; gap:6px; font-size:2rem; margin-top:6px; user-select:none}
.star{cursor:pointer; color:#d7a600; line-height:1}
.star.on{color:#f5b301}

/* Checks */
.checks{margin-top:10px; display:flex; flex-direction:column; gap:6px}
.chk{display:flex; align-items:center; gap:10px; font-weight:600; margin:0}
.chk input{width:auto; margin:0}

/* Preview foto */
.preview{margin-top:10px; display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.preview img{height:90px; width:auto; max-width:100%; border-radius:10px; border:1px solid var(--line); object-fit:cover}

.foot{text-align:center; color:var(--muted); font-size:.8rem; padding:20px 0}