/* ClockIn – refresco visual: más claro, más amable. Se carga después de suite.css. Creado por Denis. */
:root {
  --gray: #F1F5F9; --line: #e3eaf2; --muted: #5b6b7d;
  --radius: 16px; --shadow: 0 1px 2px rgba(11,45,74,.05), 0 8px 24px rgba(11,45,74,.06);
  --ok-bg: #e4f6ee; --warn-bg: #fff2dc; --bad-bg: #fde9e7; --info-bg: #e3effb;
}
body { font-size: 15.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1 { font-size: 1.7rem; letter-spacing: -.01em; }
h2 { font-size: 1.2rem; }

/* ---------- menú lateral ---------- */
.side { background: linear-gradient(180deg, #0B2D4A 0%, #0a2640 100%); padding: 1.3rem 1rem; }
.side a { padding: .6rem .75rem; margin-bottom: 2px; border-radius: 11px; font-weight: 600; font-size: .93rem; position: relative; }
.side a .ico { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: rgba(255,255,255,.07); opacity: 1; transition: .15s; }
.side a:hover .ico { background: rgba(255,255,255,.14); }
.side a.on { background: rgba(46,196,182,.16); color: #fff; }
.side a.on .ico { background: var(--teal); color: var(--navy); }
.side a.on::before { content: ""; position: absolute; left: -1rem; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--teal); }
.side .sep { margin: 1.3rem .75rem .4rem; font-size: .68rem; letter-spacing: .1em; }
.side .user { background: rgba(255,255,255,.06); border: 0; border-radius: 14px; margin-top: 1.4rem; padding: .9rem; }
.main { padding: 1.8rem 2.2rem 3rem; max-width: 1360px; }

/* ---------- tarjetas, números y avisos ---------- */
.card { border: 1px solid rgba(227,234,242,.8); padding: 1.2rem 1.35rem; }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.stat { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border: 1px solid rgba(227,234,242,.8); transition: .15s; }
a.stat:hover { transform: translateY(-2px); border-color: var(--teal); }
.stat .sico { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex: none; font-style: normal; }
.stat .sico .ico { width: 24px; height: 24px; }
.stat.st-ok .sico { background: var(--ok-bg); color: var(--ok); } .stat.st-warn .sico { background: var(--warn-bg); color: var(--warn); }
.stat.st-bad .sico { background: var(--bad-bg); color: var(--bad); } .stat.st-info .sico { background: var(--info-bg); color: var(--blue); } .stat.st-plain .sico { background: #eef2f6; color: var(--navy); }
.stat b { font-size: 1.9rem; letter-spacing: -.02em; }
.stat.st-ok b { color: var(--ok); } .stat.st-warn b { color: var(--warn); } .stat.st-bad b { color: var(--bad); }
.alert { border-radius: 12px; padding: .85rem 1.1rem; }
.alert.warn::before { content: "⚠ "; }

/* ---------- botones ---------- */
.btn { border-radius: 12px; padding: .65rem 1.2rem; box-shadow: 0 1px 2px rgba(11,45,74,.12); transition: .12s; }
.btn:hover { transform: translateY(-1px); filter: none; box-shadow: 0 4px 12px rgba(30,111,182,.28); }
.btn.alt { box-shadow: none; background: #fff; } .btn.alt:hover { border-color: var(--blue); color: var(--blue); box-shadow: none; }
.btn .ico { width: 18px; height: 18px; }
.btn.sm { padding: .38rem .8rem; border-radius: 10px; }
.btn.icon { padding: .45rem; width: 36px; height: 36px; border-radius: 10px; }
.btn.danger { background: #fff; color: var(--bad); border: 1px solid #f1c7c3; box-shadow: none; } .btn.danger:hover { background: var(--bad-bg); box-shadow: none; }
input, select, textarea { border-radius: 11px; padding: .65rem .8rem; border-color: #d3dde8; }
input:hover, select:hover { border-color: #b9c8d8; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(46,196,182,.28); border-color: var(--teal); }
label { font-size: .82rem; color: #2a4560; }

/* ---------- tablas ---------- */
table { border: 1px solid rgba(227,234,242,.8); }
th { background: #f3f7fb; font-size: .72rem; padding: .7rem .9rem; }
td { padding: .8rem .9rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.tag { display: inline-block; padding: .12rem .55rem; border-radius: 99px; font-size: .72rem; font-weight: 700; background: #e6edf4; color: var(--navy); margin-left: .35rem; vertical-align: middle; }
.tag.ok { background: var(--ok-bg); color: #146346; } .tag.warn { background: var(--warn-bg); color: #7a4c0c; } .tag.bad { background: var(--bad-bg); color: #8d2a23; } .tag.info { background: var(--info-bg); color: #14558f; }

/* ---------- encabezado de página ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.page-head h1 { margin: 0; display: flex; align-items: center; gap: .6rem; }
.page-head h1 .hico { width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(145deg, var(--navy), var(--blue)); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.page-head h1 .hico .ico { width: 22px; height: 22px; }
.page-head p { margin: .35rem 0 0; color: var(--muted); max-width: 70ch; }
.crumb { font-size: .85rem; color: var(--muted); display: inline-block; margin-bottom: .5rem; }

/* =====================  COTIZADOR  ===================== */
.qz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); gap: 1.4rem; align-items: start; }
@media (max-width: 1100px) { .qz { grid-template-columns: 1fr; } }
.qz-steps { display: flex; flex-direction: column; gap: 1rem; }
.qz-step { padding: 0; overflow: hidden; }
.qz-step > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .8rem; padding: 1rem 1.3rem; }
.qz-step > summary::-webkit-details-marker { display: none; }
.qz-step .num-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
.qz-step.opt .num-dot { background: #c3d1df; }
.qz-step h3 { margin: 0; font-size: 1.05rem; } .qz-step .sub { color: var(--muted); font-size: .84rem; font-weight: 500; }
.qz-step .chev { margin-left: auto; width: 20px; height: 20px; transition: .2s; color: var(--muted); } .qz-step[open] .chev { transform: rotate(180deg); }
.qz-body { padding: .2rem 1.3rem 1.3rem; border-top: 1px solid var(--line); }
.seg { display: inline-flex; background: #eaf0f6; border-radius: 13px; padding: 4px; gap: 4px; flex-wrap: wrap; }
.seg label { margin: 0; cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg span { display: flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border-radius: 10px; font-weight: 700; font-size: .9rem; color: var(--muted); transition: .15s; }
.seg span .ico { width: 18px; height: 18px; }
.seg input:checked + span { background: #fff; color: var(--navy); box-shadow: 0 1px 4px rgba(11,45,74,.15); }
.seg input:focus-visible + span { outline: 3px solid rgba(46,196,182,.4); }
.days { display: flex; gap: .4rem; flex-wrap: wrap; }
.days label { margin: 0; cursor: pointer; }
.days input { position: absolute; opacity: 0; width: 0; height: 0; }
.days span { display: flex; align-items: center; justify-content: center; width: 52px; height: 46px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-weight: 700; color: var(--muted); transition: .15s; }
.days input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.days input:focus-visible + span { outline: 3px solid rgba(46,196,182,.4); }
.hint { color: var(--muted); font-size: .82rem; margin: .5rem 0 0; display: flex; gap: .45rem; align-items: flex-start; } .hint .ico { width: 16px; height: 16px; margin-top: 2px; flex: none; color: var(--blue); }
.price-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .9rem; margin-top: .8rem; }
.price-col { border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem 1rem; background: #fafcfe; }
.price-col.first { border-color: #bcd6ee; background: #f3f9ff; }
.price-col h4 { margin: 0 0 .3rem; display: flex; gap: .5rem; align-items: center; font-size: .92rem; color: var(--navy); }
.price-col h4 .ico { width: 18px; height: 18px; color: var(--blue); }
.money { position: relative; } .money::before { content: "$"; position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 700; } .money input { padding-left: 1.6rem; }
.qz-actions { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; position: sticky; bottom: 0; background: linear-gradient(0deg, var(--gray) 70%, transparent); padding: .9rem 0 .4rem; z-index: 5; }
.qz-actions .btn.big { padding: .8rem 1.6rem; font-size: 1.02rem; }

/* resultado */
.qz-result { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; padding-right: 2px; }
.qz-empty { text-align: center; padding: 2.2rem 1.4rem; color: var(--muted); } .qz-empty .ico { width: 56px; height: 56px; color: #b6c6d8; margin-bottom: .5rem; }
.res { padding: 0; overflow: hidden; }
.res-head { padding: 1rem 1.2rem .2rem; display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.res-head h3 { margin: 0; font-size: 1.02rem; } .res-head small { color: var(--muted); }
.kpi { padding: .6rem 1.2rem 1rem; }
.kpi .big { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.kpi .big.pos { color: var(--ok); } .kpi .big.neg { color: var(--bad); } .kpi .big.low { color: var(--warn); }
.kpi .cap { color: var(--muted); font-size: .84rem; }
.meter { height: 12px; border-radius: 99px; background: #e8eef5; margin: .7rem 0 .25rem; overflow: hidden; display: flex; }
.meter i { display: block; height: 100%; } .meter .cost { background: #9fb4c9; } .meter .gain { background: var(--ok); } .meter .gain.low { background: var(--warn); }
.meter-legend { display: flex; justify-content: space-between; font-size: .76rem; color: var(--muted); }
.verdict { margin: 0 1.2rem 1rem; padding: .7rem .9rem; border-radius: 12px; font-size: .88rem; font-weight: 600; display: flex; gap: .6rem; align-items: flex-start; }
.verdict .ico { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.verdict.good { background: var(--ok-bg); color: #146346; } .verdict.mid { background: var(--warn-bg); color: #7a4c0c; } .verdict.bad { background: var(--bad-bg); color: #8d2a23; }
.mini { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.mini div { background: #fff; padding: .75rem 1.2rem; } .mini b { display: block; font-size: 1.05rem; color: var(--navy); } .mini span { font-size: .76rem; color: var(--muted); }
.res details { border-top: 1px solid var(--line); }
.res summary { list-style: none; cursor: pointer; padding: .8rem 1.2rem; font-weight: 700; color: var(--blue); display: flex; align-items: center; justify-content: space-between; font-size: .9rem; }
.res summary::-webkit-details-marker { display: none; } .res summary .ico { width: 18px; height: 18px; transition: .2s; } .res details[open] summary .ico { transform: rotate(180deg); }
.lines { width: 100%; box-shadow: none; border: 0; border-radius: 0; font-size: .87rem; } .lines td { padding: .5rem 1.2rem; } .lines tr:hover td { background: none; }
.lines .sub { color: var(--muted); font-size: .76rem; display: block; }
.lines tr.total td { font-weight: 800; background: #f3f7fb; }
.minprice { padding: .2rem 1.2rem 1rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.minprice div { background: #f3f7fb; border-radius: 11px; padding: .5rem .7rem; font-size: .8rem; color: var(--muted); } .minprice b { display: block; color: var(--navy); font-size: 1rem; }
.saved-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .saved-row:last-child { border-bottom: 0; }

/* =====================  LISTA DE PRECIOS  ===================== */
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1.1rem; margin-top: 1rem; }
.pl-card { padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .8rem; position: relative; }
.pl-card.old { opacity: .6; }
.pl-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.pl-name { font-size: 1.12rem; font-weight: 800; color: var(--navy); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pl-name .ico { width: 20px; height: 20px; color: var(--blue); }
.pl-prices { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.pl-box { border-radius: 13px; padding: .65rem .8rem; background: #f3f7fb; } .pl-box span { display: block; font-size: .72rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pl-box b { font-size: 1.25rem; color: var(--navy); letter-spacing: -.01em; } .pl-box small { color: var(--muted); font-weight: 500; }
.pl-box.sale { background: var(--info-bg); } .pl-box.pay { background: #f1f0fb; } .pl-box.gain { grid-column: 1 / -1; background: var(--ok-bg); display: flex; align-items: center; justify-content: space-between; }
.pl-box.gain b { color: var(--ok); font-size: 1.35rem; }
.pl-meta { display: flex; gap: 1rem; font-size: .8rem; color: var(--muted); flex-wrap: wrap; } .pl-meta span { display: inline-flex; align-items: center; gap: .3rem; } .pl-meta .ico { width: 15px; height: 15px; }
.pl-actions { display: flex; gap: .45rem; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: .8rem; }
.pl-empty { text-align: center; padding: 3rem 1rem; } .pl-empty .ico { width: 60px; height: 60px; color: #b6c6d8; }
dialog.dlg { border: 0; border-radius: 20px; padding: 0; width: min(760px, 94vw); box-shadow: 0 24px 60px rgba(11,45,74,.35); }
dialog.dlg::backdrop { background: rgba(11,45,74,.55); }
.dlg .dlg-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--line); } .dlg .dlg-head h3 { margin: 0; font-size: 1.1rem; }
.dlg form { padding: 1.1rem 1.4rem 1.4rem; }
.dlg-x { background: none; border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--muted); padding: .2rem .5rem; border-radius: 8px; } .dlg-x:hover { background: #eef2f6; }

@media (max-width: 860px) { .main { padding: 1rem; } .qz-result { position: static; max-height: none; } }

/* =====================  EMPLEADOS, CLIENTES Y HORAS  ===================== */
.toolbar { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.1rem; }
.searchbox { position: relative; flex: 1 1 260px; max-width: 380px; } .searchbox .ico { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); } .searchbox input { padding-left: 2.4rem; }
.pills { display: inline-flex; background: #e8eef5; border-radius: 13px; padding: 4px; gap: 4px; flex-wrap: wrap; }
.pills a, .pills button { border: 0; background: none; font: inherit; font-weight: 700; font-size: .85rem; color: var(--muted); padding: .45rem .9rem; border-radius: 10px; cursor: pointer; text-decoration: none; }
.pills a:hover { color: var(--navy); text-decoration: none; } .pills a.on { background: #fff; color: var(--navy); box-shadow: 0 1px 4px rgba(11,45,74,.15); }
.avatar-lg { width: 58px; height: 58px; border-radius: 18px; background: linear-gradient(145deg, var(--navy), var(--blue)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.25rem; flex: none; letter-spacing: .02em; }
.avatar-lg.teal { background: linear-gradient(145deg, #1a9d92, var(--teal)); }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .65rem; border-radius: 99px; background: #eef2f6; color: var(--navy); font-size: .78rem; font-weight: 700; } .chip .ico { width: 14px; height: 14px; }
.chip.blue { background: var(--info-bg); color: #14558f; } .chip.green { background: var(--ok-bg); color: #146346; } .chip.amber { background: var(--warn-bg); color: #7a4c0c; } .chip.red { background: var(--bad-bg); color: #8d2a23; }
.hero-card { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; padding: 1.2rem 1.4rem; margin-bottom: 1.2rem; }
.hero-card h1 { margin: 0; font-size: 1.5rem; } .hero-card .grow { flex: 1 1 260px; min-width: 0; }
.hero-card .sub { color: var(--muted); font-size: .92rem; margin: .15rem 0 .5rem; }
.section-title { display: flex; align-items: center; gap: .6rem; margin: 1.8rem 0 .8rem; font-size: 1.15rem; color: var(--navy); font-weight: 800; }
.section-title .sico2 { width: 34px; height: 34px; border-radius: 11px; background: var(--info-bg); color: var(--blue); display: inline-flex; align-items: center; justify-content: center; } .section-title .sico2 .ico { width: 19px; height: 19px; }
.people tr { cursor: pointer; } .people td:first-child { padding-left: 1.1rem; }
.people .person .avatar { width: 38px; height: 38px; }
.client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.1rem; }
.client-card { padding: 1.15rem 1.25rem; display: flex; flex-direction: column; gap: .85rem; transition: .15s; color: inherit; }
.client-card:hover { transform: translateY(-3px); border-color: var(--teal); text-decoration: none; }
.client-card .top { display: flex; align-items: center; gap: .9rem; } .client-card .name { font-size: 1.1rem; font-weight: 800; color: var(--navy); line-height: 1.2; }
.client-card .avatar-lg { width: 48px; height: 48px; font-size: 1.05rem; border-radius: 15px; }
.numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; } .numbers div { background: #f3f7fb; border-radius: 12px; padding: .5rem .6rem; text-align: center; } .numbers b { display: block; font-size: 1.25rem; color: var(--navy); line-height: 1.1; } .numbers span { font-size: .7rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.client-card .contact { font-size: .84rem; color: var(--muted); }
.new-card { border: 2px dashed #c3d1df; background: transparent; box-shadow: none; align-items: center; justify-content: center; text-align: center; color: var(--blue); font-weight: 800; cursor: pointer; min-height: 170px; width: 100%; font: inherit; }
.new-card:hover { background: #fff; border-color: var(--teal); }
.new-card .ico { width: 34px; height: 34px; }
.range-bar { display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end; padding: 1rem 1.2rem; margin-bottom: 1rem; }
.range-bar > div { flex: 1 1 150px; min-width: 130px; } .range-bar label { margin-top: 0; }
.hours-table .tot { font-weight: 800; } .hours-table td.dim { color: #a3b1c0; }
.status-dot { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .8rem; } .status-dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.status-dot.open::before { background: var(--blue); } .status-dot.closed::before { background: var(--warn); } .status-dot.approved::before { background: var(--ok); } .status-dot.billed::before { background: #8a6bd0; }
.assign-card { padding: 0; margin-bottom: .8rem; overflow: hidden; } .assign-card > summary { list-style: none; cursor: pointer; padding: 1rem 1.2rem; display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.assign-card > summary::-webkit-details-marker { display: none; } .assign-card > summary .grow { flex: 1 1 220px; } .assign-card > summary .chev { width: 20px; height: 20px; color: var(--muted); transition: .2s; } .assign-card[open] > summary .chev { transform: rotate(180deg); }
.assign-card .assign-body { padding: .3rem 1.3rem 1.3rem; border-top: 1px solid var(--line); }
.assign-card.off { opacity: .6; }

.dim { color: #a3b1c0; }
.status-dot { white-space: nowrap; }
.stat b { white-space: nowrap; } .stat > div { min-width: 0; }

/* =====================  CLOCKIN EQUIPO (celular)  ===================== */
body.app { background: #dfe7f0; }
.phone { box-shadow: 0 0 0 1px rgba(11,45,74,.06); }
.app-head { background: linear-gradient(155deg, #0B2D4A 0%, #124a7a 55%, #1E6FB6 100%); position: relative; overflow: hidden; padding: 1rem 1.2rem 3.4rem; }
.app-head::after { content: ""; position: absolute; right: -50px; top: -60px; width: 190px; height: 190px; border-radius: 50%; background: rgba(46,196,182,.16); }
.app-head > * { position: relative; z-index: 1; }
.app-head .appbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.app-head .brand { display: flex; align-items: center; gap: .6rem; } .app-head .brand img { border-radius: 10px; }
.app-head .brand b { display: block; font-size: 1rem; line-height: 1.1; } .app-head .brand small { display: block; opacity: .8; font-size: .74rem; max-width: 220px; }
.app-head .greet { display: block; margin-top: .2rem; }
.app-head .bell { position: relative; width: 42px; height: 42px; border-radius: 13px; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; color: #fff; }
.app-head .bell svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-head .bell .cnt { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: #ff6b5e; color: #fff; font-size: .7rem; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid #124a7a; }
.pull .state-line { font-size: 1.15rem; display: flex; align-items: center; gap: .1rem; } .pull .state-line.working { color: var(--ok); } .pull .state-line.break { color: #b9750f; }
.btn.go-mark { padding: .75rem 1.15rem; border-radius: 14px; font-size: .98rem; box-shadow: 0 6px 16px rgba(30,111,182,.35); } .btn.go-mark svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tile { padding: .85rem .3rem .75rem; gap: .5rem; border: 1px solid rgba(227,234,242,.9); transition: .12s; } .tile:active { transform: scale(.97); }
.tile .tb { width: 46px; height: 46px; border-radius: 15px; display: flex; align-items: center; justify-content: center; } .tile .tb svg { width: 24px; height: 24px; stroke: currentColor; }
.tile .tb.b1 { background: var(--info-bg); color: var(--blue); } .tile .tb.b2 { background: var(--warn-bg); color: #c47a10; } .tile .tb.b3 { background: #dcf5f2; color: #168f84; } .tile .tb.b4 { background: #ece9fb; color: #6a4fc4; }
.bars i { background: linear-gradient(180deg, #3b8fd6, var(--blue)); } .bars .today i { background: linear-gradient(180deg, #5fe0d2, var(--teal)); } .bars .today { color: var(--navy); font-weight: 800; }
.list { box-shadow: var(--shadow); border-radius: 16px; overflow: hidden; } .list > * { border-radius: 0 !important; }
.notice-row { display: flex; gap: .75rem; align-items: flex-start; } .notice-row .nd { width: 10px; height: 10px; border-radius: 50%; background: #cfd9e4; margin-top: .4rem; flex: none; } .notice-row .nd.new { background: var(--teal); box-shadow: 0 0 0 4px rgba(46,196,182,.2); }
.wrow { display: flex; align-items: center; gap: .85rem; } .wrow .grow { flex: 1; min-width: 0; } .wrow .wcl { font-weight: 800; color: var(--navy); }
.wrow .wday { width: 52px; height: 56px; border-radius: 14px; background: #eef3f9; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; } .wrow .wday b { font-size: 1.3rem; line-height: 1; color: var(--navy); } .wrow .wday span { font-size: .62rem; font-weight: 800; color: var(--muted); letter-spacing: .06em; margin-top: 2px; }
.wrow .whrs { font-size: 1.1rem; color: var(--navy); white-space: nowrap; }
.tabbar { border-top: 0; box-shadow: 0 -6px 24px rgba(11,45,74,.1); border-radius: 22px 22px 0 0; padding-top: .45rem; }
.tabbar a { font-size: .68rem; } .tabbar a.on { background: none; color: var(--blue); } .tabbar a.on svg { stroke-width: 2.2; }
.tabbar a.mark-tab { position: relative; } .tabbar a.mark-tab svg { width: 28px; height: 28px; padding: 14px; box-sizing: content-box; margin-top: -26px; border-radius: 50%; background: linear-gradient(145deg, #1E6FB6, #2EC4B6); stroke: #fff; box-shadow: 0 8px 18px rgba(30,111,182,.45); border: 4px solid #fff; }
.tabbar a.mark-tab.on svg { background: linear-gradient(145deg, #0B2D4A, #1E6FB6); }
.big-clock { background: linear-gradient(180deg, var(--navy), #1E6FB6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pull { position: relative; z-index: 2; } .app-head { z-index: 1; }
.phone { padding-bottom: 110px; }
.phone .grid{min-width:0}
.phone .grid>.stat{display:block;min-width:0;padding:.8rem 1rem;overflow:hidden}
.phone .grid>.stat span{display:block;font-size:.72rem;letter-spacing:.04em}
.phone .grid>.stat b{display:inline-block;font-size:1.7rem;margin-right:.3rem}
.phone .grid>.stat b+span{display:inline}
/* Cierre / liquidación / recibos */
.steps-bar{display:flex;gap:.4rem;justify-content:space-between;margin:1rem 0;padding:1rem 1.2rem;position:relative}
.steps-bar .step{flex:1;min-width:100px;text-align:center;font-size:.82rem;color:var(--muted);position:relative}
.steps-bar .step i{display:flex;width:32px;height:32px;margin:0 auto .35rem;border-radius:50%;background:#eef2f6;align-items:center;justify-content:center;font-style:normal;font-weight:700;color:var(--navy);position:relative;z-index:1}
.steps-bar .step::before{content:"";position:absolute;top:16px;left:-50%;width:100%;height:3px;background:#e3eaf2}
.steps-bar .step:first-child::before{display:none}
.steps-bar .step.done i{background:var(--ok);color:#fff}
.steps-bar .step.done::before,.steps-bar .step.now::before{background:var(--ok)}
.steps-bar .step.now i{background:linear-gradient(145deg,var(--navy),var(--blue));color:#fff;box-shadow:0 0 0 4px var(--info-bg)}
.steps-bar .step.now,.steps-bar .step.done{color:var(--navy);font-weight:700}
.check-tile{display:flex;align-items:center;gap:.7rem;padding:.7rem .9rem;border:1px solid var(--line);border-radius:12px;color:inherit;text-decoration:none;font-size:.88rem}
.check-tile b{min-width:2rem;height:2rem;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:#eef2f6;color:var(--navy)}
.check-tile.ok b{background:var(--ok-bg);color:var(--ok)} .check-tile.warn b{background:var(--warn-bg);color:var(--warn)} .check-tile.bad b{background:var(--bad-bg);color:var(--bad)}
.table-wrap .badge{white-space:nowrap}
/* Tablet kiosco */
body.kiosk{background:radial-gradient(circle at 85% 8%,rgba(46,196,182,.28),transparent 42%),linear-gradient(160deg,#0b2a47,#12528a)}
.kiosk .clock{font-size:5.5rem;letter-spacing:-.03em;text-shadow:0 6px 30px rgba(0,0,0,.25)}
.kiosk .panel{border-radius:30px;box-shadow:0 30px 70px rgba(0,0,0,.38)}
.kiosk .panel h2{margin-top:0}
.kiosk input.doc{border-radius:18px;background:#f3f7fb;border:2px solid var(--line)}
.keypad{gap:.7rem}
.keypad button{border-radius:20px;background:#fff;box-shadow:0 2px 0 var(--line);font-size:1.8rem;padding:1.1rem}
.keypad button:active{transform:translateY(2px);box-shadow:none;background:var(--info-bg)}
.keypad button:nth-child(10),.keypad button:nth-child(12){background:#eef2f6;font-size:1.4rem}
.kiosk .btn{border-radius:18px;box-shadow:0 8px 20px rgba(18,82,138,.25)}
.kiosk #where{background:rgba(255,255,255,.12);display:inline-block;padding:.35rem 1rem;border-radius:99px;font-weight:600}
/* Mapa de lugares */
.lp-map{height:260px;border-radius:14px;border:1px solid var(--line);overflow:hidden;z-index:0}
/* Configuración */
.cfg-link{display:flex;gap:.9rem;align-items:center;color:inherit;text-decoration:none}
.cfg-link>.ico{width:38px;height:38px;padding:8px;border-radius:12px;background:var(--info-bg);color:var(--blue);flex:none}
.cfg-link b{display:block} .cfg-link span{font-size:.82rem;color:var(--muted)}
.cfg-link:hover{border-color:var(--blue)}
.side .cfg-tab{margin-top:1.2rem;border-top:1px solid rgba(255,255,255,.12);padding-top:.8rem}
/* Detalle del cálculo del cotizador */
.calc-wrap{padding:.2rem 1.2rem 1.2rem}
.calc-top{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:.6rem}
.calc-title{padding:.6rem .8rem;background:var(--info-bg);border-radius:12px;font-size:.88rem;margin-bottom:.4rem}
.calc-sec{margin-top:1rem}
.calc-sec h4{margin:0 0 .3rem;font-size:1rem;color:var(--navy);padding-bottom:.25rem;border-bottom:2px solid var(--navy)}
.calc-intro{margin:.2rem 0 .5rem;color:var(--muted);font-size:.86rem}
.calc-bul{margin:.3rem 0 0 1.1rem;padding:0;font-size:.86rem;line-height:1.5}
.calc-tbl{width:100%;box-shadow:none;border:0;border-radius:0;font-size:.84rem;border-collapse:collapse}
.calc-tbl th{background:none;text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:.3rem .4rem}
.calc-tbl td{padding:.42rem .4rem;border-top:1px solid var(--line);vertical-align:top}
.calc-tbl td.fx{color:#3b4d60}
.calc-tbl td.num,.calc-tbl th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.calc-tbl tr.b td{font-weight:700;background:#f6f9fc}
.calc-tbl .sub{display:block;font-weight:400;color:var(--muted);font-size:.75rem;margin-top:.1rem}
@media(max-width:700px){.calc-tbl td.fx,.calc-tbl th:nth-child(2){display:none}}
/* Usuarios y permisos */
.lvl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.lvl{display:flex;justify-content:space-between;align-items:center;gap:.8rem;border:1px solid var(--line);border-radius:12px;padding:.6rem .8rem}
.lvl select{width:auto;min-width:9.5rem;flex:none}
@media(max-width:900px){.lvl-grid{grid-template-columns:1fr}}