/* Control Wash - estilos de tareas, cronómetro, agenda, informes, modal y logo.
   Archivo independiente que se carga después de app.css. */

/* ============================ Pills extra ============================ */
.pill.run{background:rgba(225,29,42,.16);color:var(--red)}
.pill.err{background:rgba(225,29,42,.16);color:var(--red)}
.pill-sm{padding:2px 8px;font-size:11px}
.adm-table.compact th,.adm-table.compact td{padding:8px 10px;font-size:13px}
.col{display:flex;flex-direction:column;gap:18px}

/* ============================ Marca / logo ============================ */
.brand-logo{height:34px;width:auto;vertical-align:middle;margin-right:9px}
.brand{display:flex;align-items:center}
.brand-logo-lg{height:86px;width:auto;display:block;margin:0 auto 18px}

/* ============================ Chips segmentados (Semana / Día) ============================ */
.agenda-toolbar .chips{display:inline-flex;gap:0;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:3px}
.agenda-toolbar .chip{display:inline-block;padding:7px 16px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;border-radius:8px;transition:background .15s,color .15s;cursor:pointer;line-height:1}
.agenda-toolbar .chip:hover{color:var(--text)}
.agenda-toolbar .chip.on{background:var(--red);color:#fff}

/* ============================ Orden: cronómetro ============================ */
.orden-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.orden-cron{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 18px;min-width:240px;display:grid;grid-template-columns:auto 1fr;grid-gap:2px 12px;align-items:center}
.orden-cron .cron-label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.orden-cron .cron-time{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;grid-row:2;grid-column:1}
.orden-cron .cron-obj{color:var(--muted);font-size:12px;grid-row:2;grid-column:2}
.orden-cron .cron-bar{grid-column:1/3;height:6px;background:var(--bg-2);border-radius:99px;overflow:hidden;margin-top:6px}
.orden-cron .cron-bar span{display:block;height:100%;width:0;background:var(--green);transition:width .5s linear}
.orden-cron .cron-bar span.over{background:var(--red)}
.orden-cron .cron-prog{grid-column:1/3;color:var(--muted);font-size:12px;margin-top:4px}

.tareas{display:flex;flex-direction:column;gap:10px}
.tarea{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--line);border-radius:10px;padding:12px 14px}
.tarea-en_curso{border-left-color:var(--red);box-shadow:0 0 0 1px rgba(225,29,42,.25)}
.tarea-pausada{border-left-color:var(--amber)}
.tarea-finalizada{border-left-color:var(--green);opacity:.85}
.tarea-main{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.tarea-nombre{display:block;font-size:15px}
.tarea-meta{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.tarea-op{color:var(--text)}
.tarea-cron{text-align:right;white-space:nowrap}
.tarea-time{display:block;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.tarea-bar{height:5px;background:var(--bg);border-radius:99px;overflow:hidden;margin:8px 0}
.tarea-bar-fill{display:block;height:100%;width:0;background:var(--green);transition:width .5s linear}
.tarea-bar-fill.warn{background:var(--amber)}
.tarea-bar-fill.over{background:var(--red)}
.tarea-acciones{display:flex;gap:6px;flex-wrap:wrap}
.btn.btn-sm{padding:6px 12px;font-size:13px}
.btn[disabled]{opacity:.4;cursor:not-allowed}

/* ============================ Agenda visual ============================ */
.agenda-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.agenda-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.agenda-toolbar .spacer{flex:1}
.agenda-title{font-size:16px;font-weight:700;min-width:180px;text-align:center;text-transform:capitalize}
.agenda-legend{display:flex;gap:14px;color:var(--muted);font-size:12px;flex-wrap:wrap;margin-bottom:10px;align-items:center}
.agenda-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:middle}
.lg-res{background:var(--red)}.lg-free{background:rgba(34,197,94,.5)}.lg-closed{background:var(--line)}
.agenda-grid{display:grid;gap:8px;overflow-x:auto}
.agenda-day{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px;min-width:150px}
.agenda-day.today{border-color:var(--red)}
.agenda-day.clickable{cursor:pointer}
.agenda-day.clickable:hover{border-color:var(--red)}
.agenda-dayhead{text-align:center;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:8px}
.agenda-dayhead b{display:block;color:var(--text);font-size:18px}
.agenda-cap{font-size:11px;color:var(--muted)}
.agenda-slots{display:flex;flex-direction:column;gap:6px}
.agenda-res{background:linear-gradient(180deg,rgba(225,29,42,.22),rgba(225,29,42,.12));border:1px solid rgba(225,29,42,.5);border-radius:8px;padding:7px 9px;font-size:12px;cursor:pointer}
.agenda-res:hover{border-color:var(--red)}
.agenda-res.manual{background:linear-gradient(180deg,rgba(245,158,11,.20),rgba(245,158,11,.10));border-color:rgba(245,158,11,.5)}
.agenda-res b{font-size:13px}
.agenda-res .r-meta{color:var(--muted);display:block;margin-top:2px}
.agenda-res .r-notas{display:block;margin-top:3px;color:var(--text);font-style:italic;opacity:.8}
.agenda-res .r-time{font-weight:700;color:var(--red)}
.agenda-res.manual .r-time{color:var(--amber)}
.agenda-res .r-pago{display:block;margin-top:4px;font-size:11px;line-height:1.5}
.agenda-res .pg{display:inline-block;padding:1px 7px;border-radius:99px;font-weight:600;font-size:10px;letter-spacing:.3px}
.pg-ok{background:rgba(34,197,94,.18);color:var(--green)}
.pg-senal{background:rgba(245,158,11,.18);color:var(--amber)}
.pg-pend{background:rgba(225,29,42,.16);color:var(--red)}
.agenda-res .r-dif{display:block;margin-top:2px;color:var(--text);font-weight:600}
.agenda-free{background:rgba(34,197,94,.10);border:1px dashed rgba(34,197,94,.4);border-radius:8px;padding:5px 9px;font-size:12px;color:var(--green);cursor:default}
.agenda-closed{color:var(--muted);font-size:12px;text-align:center;padding:18px 0}
.agenda-empty{color:var(--muted);font-size:12px;text-align:center;padding:8px 0}

/* ============================ Informes ============================ */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.kpi .k-n{font-size:26px;font-weight:800}
.kpi .k-l{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.bars{display:flex;flex-direction:column;gap:9px}
.bar-row{display:grid;grid-template-columns:200px 1fr 120px;align-items:center;gap:12px;font-size:13px}
@media(max-width:700px){.bar-row{grid-template-columns:120px 1fr 90px}}
.bar-track{height:16px;background:var(--bg-2);border-radius:99px;overflow:hidden;position:relative}
.bar-fill{height:100%;background:var(--green);border-radius:99px}
.bar-fill.over{background:var(--red)}
.bar-fill.warn{background:var(--amber)}
.bar-val{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.desv-pos{color:var(--red)}.desv-neg{color:var(--green)}

/* Verificación de presupuesto en recepción */
.ia-verif{display:flex;flex-wrap:wrap;gap:14px;margin:6px 0;padding:8px 10px;background:var(--bg-2);border:1px solid var(--line);border-radius:8px;font-size:13px}
.ia-verif span{white-space:nowrap}

/* ============================ Modal reserva ============================ */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal[hidden]{display:none!important}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px;width:100%;max-width:420px}
.modal-card.modal-wide{max-width:680px;max-height:92vh;overflow:auto}
.modal-card h3{margin:0 0 14px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
@media(max-width:560px){.form-grid{grid-template-columns:1fr}}
.modal-card label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.modal-card label.full{margin-top:10px}
.modal-card input,.modal-card select,.modal-card textarea{background:var(--bg-2);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:9px 10px;font-size:14px;width:100%}
.modal-card textarea{resize:vertical}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.modal-actions .spacer{flex:1}

/* ============================ Agenda responsive + vistas ============================ */
/* La agenda ocupa todo el ancho disponible (anula el límite de .content y .page). */
.content:has(.page-agenda){max-width:none}
.page-agenda{max-width:none}
.agenda-grid{overflow-x:auto}
.agenda-day{min-width:0}
@media(max-width:820px){ #agGrid.agenda-grid{grid-template-columns:repeat(7,minmax(150px,1fr))!important} }

/* Botón anular (peligro) */
.btn-danger{background:transparent;border:1px solid var(--red);color:var(--red)}
.btn-danger:hover{background:var(--red);color:#fff}

/* ---- Vista mes ---- */
.agenda-mes{display:block}
.agenda-mes .mes-head{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:8px}
.agenda-mes .mes-head span{text-align:center;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.agenda-mes .mes-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.mes-cell{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px 7px;min-height:96px;display:flex;flex-direction:column;gap:3px}
.mes-cell.fuera{opacity:.4}
.mes-cell.cerrado{background:var(--bg-2);opacity:.6}
.mes-cell.today{border-color:var(--red)}
.mes-cell.clickable{cursor:pointer}
.mes-cell.clickable:hover{border-color:var(--red)}
.mes-num{font-weight:700;font-size:14px}
.mes-cap{font-size:10px;color:var(--muted)}
.mes-libre{font-size:10px;color:var(--green)}
.mes-cits{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.mes-cit{font-size:10px;padding:1px 5px;border-radius:5px;background:rgba(225,29,42,.18);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;border-left:3px solid var(--red)}
.mes-cit.manual{background:rgba(245,158,11,.16);border-left-color:var(--amber)}
.mes-cit.pg-ok{border-left-color:var(--green)}
@media(max-width:780px){ .mes-cell{min-height:66px} .mes-cit{font-size:9px} }

/* ---- Vista lista (agenda) ---- */
.agenda-lista{display:flex;flex-direction:column;gap:14px}
.lista-dia{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.lista-fecha{background:var(--bg-2);padding:8px 14px;font-weight:700;text-transform:capitalize;border-bottom:1px solid var(--line)}
.lista-cit{display:grid;grid-template-columns:130px 1fr auto;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.lista-cit:last-child{border-bottom:none}
.lista-cit:hover{background:var(--bg-2)}
.lista-cit.manual{border-left:3px solid var(--amber)}
.lc-hora{font-weight:700;color:var(--red);font-variant-numeric:tabular-nums}
.lc-main{display:flex;flex-direction:column}
.lc-main small{color:var(--muted)}
.lc-pago{text-align:right}
@media(max-width:620px){ .lista-cit{grid-template-columns:1fr;gap:4px} .lc-pago{text-align:left} }

/* Presupuesto -> cita: banner y bloque de cobro en el modal */
.presup-banner{margin:10px 0;padding:8px 12px;border-radius:8px;background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.25);color:var(--blue,#2563eb);font-weight:600;font-size:14px}
.cobro-box{margin:8px 0 2px;padding:12px;border:1px solid var(--border,#e5e7eb);border-radius:10px;background:var(--bg-2,#f8fafc)}
.cobro-title{font-weight:700;margin-bottom:8px}
.cobro-opts{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:8px}
.cobro-op{display:flex;align-items:center;gap:6px;font-weight:500;cursor:pointer}
.cobro-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cobro-fields label{display:flex;flex-direction:column;font-size:13px;gap:4px}
.cobro-help{margin:8px 0 0}
@media(max-width:620px){ .cobro-fields{grid-template-columns:1fr} .cobro-opts{flex-direction:column;gap:8px} }

/* Branding coherente: enlaces sin azul por defecto (02-11-2026) */
.tile{color:var(--text);text-decoration:none}
.tile:hover{color:var(--text)}
.tile b{color:var(--text)}
.admin-tiles a,.admin-tiles a b{color:var(--text)}
.content a:not(.btn):not(.chip):not(.tile):not(.brand){color:var(--red);text-decoration:none}
.content a:not(.btn):not(.chip):not(.tile):not(.brand):hover{color:var(--red-2);text-decoration:underline}