/* HUE Customer Thinking · estilos propios sobre el kit de la Guía (upgrade_estetica.css) · v1.1.0 */

/* ===== Customer Thinking: lo propio de esta app, sobre el kit de la Guía v3 ===== */
:root { --borde-campo:#c9d0d6; }
[hidden] { display:none !important; }
body { color:#fff; -webkit-tap-highlight-color: transparent; }
.upg-card { color: var(--texto); padding: 18px 20px; }
.upg-card + .upg-card { margin-top: 16px; }
.lista > .upg-card { margin-top: 0; }
.upg-card h3 { font-size: 1.1rem; }

/* barra superior */
.upg-navbar { flex-wrap: nowrap; }
.upg-navbar a.logo-cli img { height: 46px; display: block; }
.upg-navbar .titulos { min-width: 0; }
.upg-navbar .app, .upg-navbar .pantalla { color:#fff; text-shadow: 0 1px 3px rgba(0,0,0,.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upg-navbar .pantalla { font-size: 14px; }
.upg-navbar .usuario { color:#fff; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.upg-avatar { display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg,#46525f,#222c36); color:#fff; font-weight:700; font-size: .95rem; flex: 0 0 auto; }
.logo-upg-top { display:block; background:#fff; border-radius:8px; padding:3px 5px; line-height:0; box-shadow: 0 2px 6px rgba(0,0,0,.35); flex: 0 0 auto; }
.logo-upg-top img { height: 34px; }

/* inicio */
.saludo { font-size: 1.6rem; font-weight: 600; margin: 6px 0 2px; }
.saludo-sub { opacity: .9; margin: 0 0 4px; }
.upg-modulos-grupo { margin-top: 8px; }
.upg-modulo { padding: 0 14px; color: inherit; }
.upg-modulo .alerta { position:absolute; top:-8px; right:-8px; z-index:2; min-width:24px; height:24px; padding:0 7px; border-radius:8px; background:#b42318; color:#fff; font:700 13px/24px var(--f-cuerpo); }
.upg-modulo .cuenta { position:absolute; top:-8px; right:-8px; z-index:2; min-width:24px; height:24px; padding:0 7px; border-radius:8px; background:linear-gradient(180deg,#46525f,#222c36); color:#fff; font:700 13px/24px var(--f-cuerpo); }
.local-trabajo { margin-top: 18px; }

/* encabezado de cada pantalla, sobre el fondo */
.cab { display:flex; align-items:flex-end; gap: 12px; margin: 6px 0 14px; flex-wrap: wrap; }
.cab h2 { margin: 0; font-size: 1.5rem; font-weight: 700; }
.cab p { margin: 2px 0 0; opacity: .9; }
.cab .der { margin-left: auto; display:flex; gap: 8px; }

/* campos */
.campo { margin-bottom: 14px; }
.campo > label, .rot { display:block; font-size: .8rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #4b5663; margin: 0 0 6px; }
.campo > label.obligatorio, .rot.obligatorio { color: var(--negro); }
.campo input[type=text], .campo input[type=email], .campo input[type=tel], .campo input[type=password], .campo input[type=search],
.campo input:not([type]), .campo textarea, .campo select, .buscador {
  width: 100%; background:#fff; color:#1f2831; border:1px solid var(--borde-campo); border-radius: 8px;
  padding: 12px 12px; font-size: 16px; color-scheme: light;
}
.campo textarea { min-height: 70px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus, .buscador:focus { outline: 2px solid rgba(70,82,95,.35); border-color:#46525f; }
.campo input::placeholder, .campo textarea::placeholder, .buscador::placeholder { color:#8a949f; }
.fila2 { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ayuda-campo { font-size: .85rem; color: #4b5663; margin-top: 5px; }
.falta > label, .falta.rot, .falta > .rot { color: var(--rojo-alerta) !important; }
.falta input, .falta textarea, .falta select { border-color: var(--rojo-alerta) !important; background: #fff7f6 !important; }
.falta .chips { outline: 2px solid var(--rojo-alerta); outline-offset: 4px; border-radius: 8px; }
.cartel-faltan { margin-top: 12px; }

/* chips: rectángulos redondeados grandes, fáciles de tocar */
.chips { display:grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.chips.chicos { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.chip { min-height: 46px; padding: 8px 10px; background:#fff; color:#1f2831; border:1px solid var(--borde-campo); border-radius: 8px;
  font-size: 15px; font-weight: 600; cursor: pointer; text-align: center; line-height: 1.15; }
.chip:hover { background: #f1f3f5; }
.chip.sel { background: linear-gradient(180deg, var(--grafito-1), var(--grafito-2)); color:#fff; border-color: var(--grafito-borde); }
.chip.sel-ok { background: var(--verde); color:#fff; border-color:#246b3b; }
.chip small { display:block; font-weight: 500; font-size: 12px; opacity: .8; margin-top: 2px; }

/* botones */
.upg-btn { font-size: 16px; padding: 12px 18px; }
.upg-btn:disabled { background:#c9d0d6 !important; color:#6b7785 !important; border-color:#c9d0d6 !important; cursor: default; }
.acciones { display:flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.acciones .upg-btn { flex: 1 1 160px; }
.upg-btn-vidrio { font-weight: 600; }

/* sugerencia de talle */
.sugerencia { background: #f1f3f5; border: 1px solid #dfe4e9; border-radius: 8px; padding: 10px 12px; font-size: 14px; color:#1f2831; margin-top: 8px; }
.sugerencia b { color:#000; }
.sugerencia table { border-collapse: collapse; width: 100%; margin-top: 6px; }
.sugerencia td, .sugerencia th { text-align: left; padding: 4px 6px; border-bottom: 1px solid #dfe4e9; font-size: 14px; }
.sugerencia th { background: #173b5c; color:#fff; font-weight: 600; }

/* listas de pedidos y encargos */
.lista { display:grid; gap: 12px; align-items: start; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.item { display:block; width:100%; text-align:left; cursor:pointer; border: 1px solid rgba(255,255,255,.55); }
.item:hover { transform: translate(-1px,-1px); }
.item .t { font-size: 1.12rem; font-weight: 700; color:#000; margin-bottom: 4px; }
.item .d { color:#4b5663; font-size: .95rem; }
.item .p { display:flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: .9rem; color:#1f2831; }
.etq { display:inline-block; border-radius: 6px; padding: 2px 8px; font-size: .8rem; font-weight: 700; letter-spacing: .03em; background:#e8ecf0; color:#1f2831; }
.etq.ok { background: rgba(47,138,76,.12); color:#1d6b3e; }
.etq.no { background: rgba(180,35,24,.08); color:#8f1c13; }
.vencido { color: var(--rojo-alerta); font-weight: 700; }
.vacio { text-align:center; padding: 22px 12px; color:#4b5663; }
.seg { display:flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.seg .upg-btn-vidrio.sel { background:#fff; color:#1f2831; border-color:#fff; }
.buscador { margin-bottom: 14px; }
.subtitulo-fondo { font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.88);
  margin: 26px 0 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.25); }

/* encuesta: caritas con relieve */
.pregunta { padding: 12px 0; border-bottom: 1px solid #e3e7eb; }
.pregunta:last-child { border-bottom: 0; }
.pregunta .q { font-weight: 600; color:#1f2831; margin-bottom: 8px; font-size: 1rem; }
.caritas { display:flex; gap: 8px; justify-content: space-between; max-width: 360px; }
.carita-btn { width: 56px; height: 56px; border-radius: 50% !important; border: 0; padding: 0; background: none; cursor: pointer; opacity: .55; transition: transform .12s, opacity .12s; }
.carita-btn svg { width:100%; height:100%; display:block; }
.carita-btn.sel { opacity: 1; transform: scale(1.12); box-shadow: 0 0 0 3px #fff, 0 0 0 6px #46525f; }
.caritas-ref { display:flex; justify-content: space-between; max-width: 360px; font-size: 12px; color:#6b7785; margin-top: 4px; }

/* tabla de regalos */
.upg-tabla-caja { border-radius: 10px; }
.upg-tabla th.ord { cursor: pointer; }
.upg-tabla th.ord:hover { background:#21517a; }
.upg-tabla td.num, .upg-tabla th.num { text-align: right; }

/* ventanas */
.velo { position: fixed; inset: 0; z-index: 80; background: rgba(3,6,10,.62); display:flex; align-items: center; justify-content: center; padding: 16px; }
.ventana { background: rgba(255,255,255,.97); color:#1f2831; border-radius: 14px; box-shadow: var(--sombra-cuadro); width: min(520px, 100%); max-height: 92vh; overflow: auto; padding: 20px 20px 18px; }
.ventana h3 { margin: 0 0 10px; color:#000; font-size: 1.2rem; }
.ventana .acciones { margin-top: 18px; }

/* avisos */
.toast { position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%); z-index: 90; max-width: min(520px, 92vw);
  background: rgba(14,20,27,.92); color:#fff; border-radius: 8px; padding: 12px 16px; font-size: 15px; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.toast.ok { border-left: 4px solid #59c27c; }
.toast.no { border-left: 4px solid #e5534b; }
.upg-aviso-ok, .upg-aviso-no { margin-top: 12px; }

/* ingreso */
.upg-login .marca img { height: 70px; }
.upg-login .marca h1 { margin: 12px 0 2px; font-size: 1.8rem; font-weight: 700; }
.upg-login .marca p { margin: 0; opacity: .9; }
.upg-login .pie-login { color:#fff; text-shadow: 0 1px 3px rgba(0,0,0,.45); font-size: .9rem; display:flex; align-items:center; gap: 8px; }
.upg-login .pie-login img { height: 40px; background:#fff; border-radius: 6px; padding: 2px 5px; }

/* barra de estado */
.upg-pie-upg { display:flex; align-items:center; gap: 6px; color: rgba(232,236,240,.85); text-decoration: none; }
.upg-pie-upg img { background:#fff; border-radius: 6px; padding: 2px 5px; height: 28px; }
#estado-version { color: rgba(232,236,240,.8); }

@media (max-width: 768px) {
  .upg-navbar a.logo-cli img { height: 34px; }
  .logo-upg-top img { height: 30px; }
  .upg-navbar .btn-salir { display:none; }
  .cab h2 { font-size: 1.3rem; }
  .lista { grid-template-columns: 1fr; }
  .chips { grid-template-columns: 1fr 1fr; }
  .chips.chicos { grid-template-columns: 1fr 1fr 1fr; }
  .upg-card { padding: 16px 16px; }
  .carita-btn { width: 50px; height: 50px; }
  .upg-modulos-grupo h3 { max-width: 300px; margin-left: auto; margin-right: auto; }
  .local-trabajo { max-width: 100%; }
}
@media (max-width: 768px) {
  .upg-navbar .titulos { flex: 1 1 auto; overflow: hidden; }
  .upg-navbar .app { display: none; }
  .upg-pie-upg img { height: 32px; }
  .upg-navbar .pantalla { font-size: 1rem; font-weight: 700; opacity: 1; }
  #pantalla-local { display: none; }
  .upg-navbar .der { gap: 8px; flex: 0 0 auto; }
  .upg-navbar .upg-btn-vidrio { padding: 7px 10px; }
  .upg-avatar { width: 36px; height: 36px; }
}
@media (max-width: 400px) {
  .upg-navbar { gap: 8px; padding: 10px 10px; }
  .upg-navbar a.logo-cli img { height: 26px; }
  .logo-upg-top { padding: 2px 3px; }
  .logo-upg-top img { height: 26px; }
  .upg-navbar .pantalla { font-size: .92rem; }
  .upg-avatar { width: 32px; height: 32px; font-size: .85rem; }
  .carita-btn { width: 44px; height: 44px; }
}

/* ===== agregados de la versión 1.1 (24/10/2026) ===== */
.ct-av { border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.85); display:inline-flex; align-items:center; justify-content:center; flex: 0 0 auto; }
.ct-av-ini { background: linear-gradient(180deg,#46525f,#222c36); color:#fff; font-weight:700; }
.ventana .ct-av, .upg-card .ct-av, .upg-tabla .ct-av { border-color: #c9d0d6; }
.upg-avatar img.ct-av { width:100%; height:100%; border: 0; }
.mc-cab { display:flex; gap: 14px; align-items:center; margin-bottom: 10px; }
.consent { display:flex !important; gap:10px; align-items:flex-start; font-size:15px !important; text-transform:none !important; letter-spacing:0 !important; font-weight:500 !important; color:#1f2831 !important; }
.consent input { width:24px; height:24px; flex:0 0 auto; margin-top:1px; accent-color:#222c36; }
.ventana-ancha { width: min(760px, 100%); }
.fam-fila { display:grid; grid-template-columns: 105px 1fr 145px 78px 78px 78px auto; gap: 6px; margin-bottom: 6px; }
.fam-fila input, .fam-fila select { width:100%; background:#fff; color:#1f2831; border:1px solid #c9d0d6; border-radius:8px; padding:9px 8px; font-size:15px; }
.fam-fila .upg-btn { padding: 8px 10px; font-size: 14px; }
.campo select { appearance: auto; }
.tb-barra { display:flex; gap: 8px; align-items:center; flex-wrap: wrap; margin-bottom: 10px; }
.tb-barra .buscador { flex: 1 1 220px; margin: 0; }
.tb-cuenta { color:#4b5663; font-size: .9rem; white-space: nowrap; }
.tb-barra .upg-btn { padding: 9px 12px; font-size: 14px; }
.upg-tabla tr.clic { cursor: pointer; }
.upg-tabla td.vacio { text-align:center; color:#4b5663; padding: 18px; }
.upg-tabla td { vertical-align: middle; }
.cliente-pedido { background:#f1f3f5; border:1px solid #dfe4e9; border-radius:8px; padding: 6px 10px; margin-top: 8px; color:#1f2831; font-size: .95rem; }
.cliente-pedido b { color:#000; }
.pregunta .si-no, .pregunta .opc { max-width: 520px; }
.nps { display:grid; grid-template-columns: repeat(11, 1fr); gap: 4px; max-width: 560px; }
.nps .chip { min-height: 42px; padding: 4px 0; }
.nps-ref { display:flex; justify-content:space-between; max-width: 560px; font-size:12px; color:#6b7785; margin-top:4px; }
.idea .t { display:flex; gap: 10px; align-items:flex-start; }
.idea .votar { margin-left:auto; min-width: 86px; }
.idea .votar.sel { background: linear-gradient(180deg, var(--grafito-1), var(--grafito-2)); color:#fff; border-color: var(--grafito-borde); }
.idea .resp { margin-top: 8px; background:#f1f3f5; border-left: 4px solid #46525f; padding: 8px 10px; border-radius: 6px; font-size: .95rem; }
.cumple { display:flex; gap: 12px; align-items:center; flex-wrap: wrap; }
.cumple .acc { margin-left:auto; display:flex; gap: 8px; }
@media (max-width: 768px) {
  .fam-fila { grid-template-columns: 1fr 1fr; }
  .fam-fila .fam-nom { grid-column: span 1; }
  .nps { grid-template-columns: repeat(6, 1fr); }
}
.pregunta.falta .q { color: var(--rojo-alerta); }
.pregunta.falta .caritas, .pregunta.falta .nps, .pregunta.falta .chips { outline: 2px solid var(--rojo-alerta); outline-offset: 4px; border-radius: 8px; }
.ventana { overflow-x: hidden; }
@media (max-width: 560px) { .ventana .fila2 { grid-template-columns: 1fr; } }

/* ===== agregados de la versión 1.2 (25/10/2026) ===== */
.medidas-caja { display:grid; gap: 10px 12px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.medidas-caja .campo { margin: 0; }
.medidas-caja .como { background:none; border:0; padding:0; margin-left:6px; color:#21517a; font-size:.78rem; font-weight:600; text-decoration: underline; cursor:pointer; text-transform:none; letter-spacing:0; }
.medidas-caja .ayuda-medir { font-size: .82rem; color:#4b5663; margin-top: 4px; }
.talle-panel { background:#f1f3f5; border:1px solid #dfe4e9; border-radius: 10px; padding: 12px 14px; color:#1f2831; }
.talle-panel .tp-prod { display:flex; gap: 12px; align-items:center; margin-bottom: 10px; }
.talle-panel .tp-prod img { width: 84px; height: 84px; object-fit: contain; background:#fff; border-radius: 8px; border:1px solid #dfe4e9; }
.talle-panel .tp-consejo { background:#fff8e1; border-left: 4px solid #c99a06; border-radius: 6px; padding: 6px 10px; margin: 6px 0; font-size:.95rem; }
.talle-grande { display:flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.talle-grande .num { font-size: 2.4rem; font-weight: 800; color:#000; line-height: 1; }
.talle-grande .rot2 { font-size: .8rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color:#4b5663; }
.talle-grande .eq { color:#4b5663; font-size: .95rem; }
.tp-pista { background:#fff; border:1px solid #2f8a4c; border-left-width: 5px; border-radius: 8px; padding: 8px 10px; margin: 8px 0; }
.tp-pista b { color:#1d6b3e; }
.tp-avisos { margin: 8px 0 0; padding-left: 18px; font-size: .92rem; }
.tp-avisos li { margin: 2px 0; }
.tp-sec { margin-top: 10px; font-size: .92rem; }
.tp-sec .rot { margin-bottom: 4px; }
.talle-panel details { margin-top: 10px; }
.talle-panel summary { cursor: pointer; font-weight: 600; color:#21517a; }
.talle-panel table { border-collapse: collapse; width: 100%; margin-top: 6px; font-size: .88rem; background:#fff; }
.talle-panel th { background:#173b5c; color:#fff; font-weight:600; text-align:left; padding: 4px 6px; }
.talle-panel td { padding: 4px 6px; border-bottom: 1px solid #dfe4e9; }
.talle-panel tr.sug td { background: rgba(47,138,76,.14); font-weight: 700; }
.prob-item { display:flex; gap: 12px; align-items:flex-start; }
.prob-item img, .prob-item .sin-foto { width: 64px; height: 64px; flex: 0 0 64px; object-fit: contain; background:#fff; border-radius: 8px; border:1px solid #dfe4e9; }
.prob-item .sin-foto { display:flex; align-items:center; justify-content:center; color:#8a949f; font-size: 11px; text-align:center; }
.prob-item .info { flex: 1 1 auto; min-width: 0; }
.upg-card.olvidado { outline: 3px solid var(--rojo-alerta); }
.olvidado-etq { color: var(--rojo-alerta); font-weight: 700; }
.prob-fila { display:grid; grid-template-columns: 120px 1fr 70px 90px 60px auto; gap: 6px; margin-bottom: 6px; align-items: center; }
.prob-fila input { width:100%; background:#fff; color:#1f2831; border:1px solid #c9d0d6; border-radius:8px; padding:9px 8px; font-size:15px; }
.prob-fila .upg-btn { padding: 8px 10px; font-size: 14px; }
.art-prev { display:flex; gap: 10px; align-items:center; margin-top: 6px; font-size: .92rem; color:#1f2831; }
.art-prev img { width: 56px; height: 56px; object-fit: contain; background:#fff; border:1px solid #dfe4e9; border-radius: 6px; }
.caja-beneficio { border-top: 1px solid #e3e7eb; padding-top: 12px; margin-top: 12px; }
.texto-legal { background:#f1f3f5; border-radius: 8px; padding: 8px 10px; font-size: .9rem; color:#1f2831; margin: 8px 0; }
.total-vivo { background:#f1f3f5; border:1px solid #dfe4e9; border-radius: 8px; padding: 8px 10px; font-size: .95rem; }
.total-vivo b { color:#000; }
.fotos-prod { display:grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.fotos-prod .f { position: relative; background:#fff; border:1px solid #dfe4e9; border-radius: 8px; padding: 6px; text-align:center; }
.fotos-prod img { width: 100%; height: 110px; object-fit: contain; }
.fotos-prod .f .acc { display:flex; gap: 4px; justify-content:center; margin-top: 4px; }
.fotos-prod .f button { font-size: 12px; padding: 4px 6px; }
.fotos-prod .f.principal { outline: 3px solid #2f8a4c; }
.grilla-guia { overflow-x: auto; }
.grilla-guia table { border-collapse: collapse; min-width: 100%; }
.grilla-guia th { background:#173b5c; color:#fff; font-weight:600; padding: 5px 6px; font-size: 13px; text-align:left; white-space: nowrap; }
.grilla-guia td { padding: 3px; border-bottom: 1px solid #e3e7eb; }
.grilla-guia input { width: 74px; background:#fff; color:#1f2831; border:1px solid #c9d0d6; border-radius:6px; padding:6px 6px; font-size:14px; }
.grilla-guia input.talle { width: 64px; font-weight: 700; }
.grilla-guia .quitar { font-size: 12px; padding: 5px 8px; }
.mini-foto { width: 40px; height: 40px; object-fit: contain; background:#fff; border:1px solid #dfe4e9; border-radius: 6px; vertical-align: middle; }
.ganador { background:#fff; border:1px solid #2f8a4c; border-left-width: 5px; border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
@media (max-width: 768px) {
  .prob-fila { grid-template-columns: 1fr 1fr; }
  .prob-fila .pf-desc { grid-column: span 2; }
  .medidas-caja { grid-template-columns: 1fr 1fr; }
}
input.falta { border-color: var(--rojo-alerta) !important; background: #fff5f4 !important; }