/* Paquete 19 de Design (11/11/2026): Ofrecimientos -> Cargar, Ofrecidos, Derivados (C).
   Sale de docs/redesign-briefs/19-.../diseno/C-ofrecimientos/nuevo-css-C.css, con
   estos cambios para el CRM real:
   - `.panel` no tiene estilo fuera de `.inm` en styles.css: la tarjeta, el vacío y
     el diálogo se pintan acá (`.of-card`, `.of-vacio`, `.of-dlg`). Las tablas no
     van dentro de un panel: `table.datatable` ya trae fondo y borde.
   - `.of-resumen` ya existe en styles.css (la oferta del Portal, ~14045, pone
     negrita): el cuadro «Por quién lo ofreció» se llama `.of-por-quien`.
   - Mientras sigan las reglas viejas de styles.css (~15421-15450), algunas
     propiedades suyas se pisan acá a propósito (margen de `.of-check` y `.of-sub`,
     versalitas de `.of-grupo-t`, opacidad de `.of-e-concretado`, color de los
     estados) y los selectores de `:has` van con `.of-form` delante para ganarles.
     Al borrarlas, esto sigue igual.
   - El diálogo usa `.web-dlg-que` y `.web-dlg-definitivo` de web-publica-crm.css (G). */

/* ---------- C1 · Cargar ---------- */
.of-form{display:grid;gap:16px;max-width:980px}
.of-form .form-section{margin:0}
.of-form .form-section h3.of-sec-t{margin:0 0 12px;font-size:17px;color:var(--ink)}
.of-persona{display:grid;grid-template-columns:12rem minmax(0,1.4fr) minmax(0,1fr) auto;gap:12px;align-items:end}
@media (max-width:800px){.of-persona{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.of-persona{grid-template-columns:1fr}}
.of-busca{grid-column:1 / -1;font-size:12.5px;color:var(--ink-faint);margin:-4px 0 0;min-height:1.2em}
.of-busca.of-busca-ok{color:var(--ink)}
.of-check{display:flex;align-items:center;gap:8px;font-size:14px;padding:9px 0;margin:0;cursor:pointer;white-space:nowrap}
.of-check input{width:18px;height:18px;margin:0;accent-color:var(--accent)}

.of-que-t{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 4px}
.of-form .of-que-t h3.of-sec-t{margin:0}
.of-grupo{margin-top:14px}
.of-grupo-t{font:700 13px/1.3 var(--font-body);text-transform:none;letter-spacing:0;color:var(--ink-muted);margin:0 0 8px}
.of-servs{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:10px}

.of-form .of-serv{position:relative;display:grid;align-content:start;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:14px 14px 12px 46px;box-shadow:none}
.of-serv-l{display:grid;gap:4px;cursor:pointer}
.of-serv-l::before{content:"";position:absolute;inset:0;border-radius:12px}
.of-serv>input{position:absolute;z-index:1;left:14px;top:15px;width:20px;height:20px;margin:0;accent-color:var(--accent)}
.of-serv-n{font-weight:700;font-size:15px}
.of-serv-d{font-size:13px;color:var(--ink-muted)}
.of-serv-s{font-size:12px;color:var(--ink-faint)}
.of-serv>input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.of-form .of-serv:has(>input[type=checkbox]:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:var(--accent-soft)}
.of-form .of-serv-det{position:relative;z-index:1;display:none;gap:8px;margin-top:8px;padding-top:10px;border-top:1px solid var(--line)}
.of-form .of-serv:has(>input[type=checkbox]:checked) .of-serv-det{display:grid}
.of-resp{display:flex;gap:6px;flex-wrap:nowrap}
.of-resp label{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer}
.of-resp input{accent-color:var(--accent);margin:0}
.of-resp label:has(input:checked){border-color:var(--accent);font-weight:700}
.of-serv-det input[type=text]{font:inherit;font-size:13.5px;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;width:100%}

.of-pie{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.of-pie .muted-note{margin:0}
.of-errores{margin:0;padding:10px 14px 10px 30px;border-left:3px solid var(--bad);background:var(--bad-soft);border-radius:8px;font-size:14px;color:var(--ink)}

/* ---------- Estados de una derivación (los siete, cada uno distinto) ---------- */
.of-estado{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;color:var(--ink);background:transparent;border:1px solid transparent;opacity:1}
.of-e-pendiente{background:var(--warn-soft);border-color:var(--warn);color:var(--ink)}
.of-e-en_curso{background:var(--info-soft);color:var(--ink)}
.of-e-concretado{background:transparent;border:1px dashed var(--good);color:var(--ink);opacity:1}
.of-e-confirmado{background:var(--good);color:var(--surface);font-weight:700}
.of-e-confirmado::before{content:"★";font-size:11px}
.of-e-no_interesa{background:var(--surface-2);color:var(--ink-muted)}
.of-e-ya_tiene{background:transparent;border-color:var(--line);color:var(--ink-muted)}
.of-e-vencido{background:var(--bad-soft);color:var(--ink)}
.of-estado-cuando{display:block;font-size:12px;color:var(--ink-faint);margin-top:3px}

/* ---------- C2 · Ofrecidos ---------- */
.of-por-quien td,.of-por-quien th{text-align:right;font-variant-numeric:tabular-nums}
.of-por-quien td:first-child,.of-por-quien th:first-child{text-align:left}
table.of-por-quien td a{font-weight:600;color:var(--accent);text-decoration:underline}
.of-por-quien .of-cero{color:var(--ink-faint)}
.of-sub{font-size:12.5px;color:var(--ink-faint);display:block;margin:0;font-weight:400}
.of-ofr-primera td{border-top:2px solid var(--line)}
.of-fila-borrar{text-align:right;white-space:nowrap}
.of-peligro{background:var(--bad);border-color:var(--bad);color:#fff}
.of-peligro:hover{filter:brightness(1.06)}
.of-borrar{color:var(--bad);border-color:transparent}
.of-borrar:hover{border-color:var(--bad);background:var(--bad-soft)}
.of-ofrecidos td.of-fila-borrar a{color:var(--bad);text-decoration:none}
.of-bloque{margin-top:22px}
.of-bloque-primero{margin:0 0 18px}
.of-bloque-t{display:flex;align-items:baseline;gap:8px;margin:0 0 10px;font-size:17px;color:var(--ink)}
.of-bloque-t span{color:var(--ink-faint);font-weight:600}
.of-vacio{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.of-vacio p{margin:0}
.of-vacio .of-vacio-acc{margin-top:12px}

/* El diálogo de borrar (C2-7). Sin JS queda abierto dentro del velo fijo; con
   JS pasa a modal y el velo se apaga (lo pone ::backdrop). */
.of-velo{position:fixed;inset:0;z-index:1000;display:grid;place-items:start center;padding:72px 16px 16px;background:rgba(10,12,15,.55);backdrop-filter:blur(4px)}
.of-velo.of-velo-modal{position:static;inset:auto;padding:0;background:none;backdrop-filter:none;display:block}
.of-dlg{position:static;margin:0;background:var(--surface);border-radius:14px;box-shadow:var(--shadow)}
.of-velo-modal .of-dlg{position:fixed;margin:72px auto auto}
.of-dlg .crm-dlg-cab{gap:12px}
.of-dlg .crm-dlg-t{margin:0}

/* ---------- C3 · Derivados ---------- */
.of-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(21rem,1fr));gap:12px}
.of-card{display:grid;gap:10px;align-content:start;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.of-card.of-card-vence{border-color:var(--warn)}
.of-card-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.of-card-cab h4{margin:0;font-size:16px}
.of-card-serv{font-weight:700;font-size:15px;color:var(--accent);margin:0}
.of-card-meta{font-size:13px;color:var(--ink-muted);margin:0}
.of-vence{justify-self:start;display:inline-block;font-size:12px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--warn-soft);border:1px solid var(--warn);color:var(--ink)}
.of-nota{margin:0;font-size:13.5px;font-style:italic;color:var(--ink);padding-left:10px;border-left:2px solid var(--line)}
.of-llamar{display:flex;gap:8px;flex-wrap:wrap}
.of-llamar .btn-cta{flex:1 1 auto;justify-content:center}
.of-gestion{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin:0;border-top:1px solid var(--line);padding-top:10px}
.of-gestion select,.of-gestion input,.of-asignar select{font:inherit;font-size:14px;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;width:100%;min-width:0;flex:none}
.of-gestion input{grid-column:1 / -1}
.of-gestion-t{grid-column:1 / -1;font-size:12.5px;font-weight:600;color:var(--ink-muted)}
.of-asignar{font-size:13px}
.of-asignar summary{cursor:pointer;color:var(--ink-muted);font-weight:600}
.of-asignar form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:8px}
.of-cerrado-sol{margin-top:6px}
@media (max-width:640px){
  .of-cards{grid-template-columns:1fr}
  .of-llamar .btn,.of-llamar .btn-cta,.of-llamar .btn-ghost{width:100%;justify-content:center;padding:12px}
}