/* =====================================================================
   EMOSE Backoffice — casos.css
   Styles for the Casos screen (casos.js) ONLY: the CRM table + filter
   chips + search reuse .case-table, .filter-chip and .state-panel from styles.css
   section 6 verbatim (same as fila.js) — nothing about those is redefined
   here. This file adds only what fila.js didn't need: row action buttons,
   the create/edit modal, and a transient success/error toast.

   OWNERSHIP: owned by the CRM agent (casos.js/casos.css) — see styles.css's
   own header comment for the full cross-file map. Every rule below is
   either:
     (a) a brand-new class not defined anywhere else in the app (safe, no
         collision risk with app.js/fila.js/consola.js/blueprints.js/
         caso.js/caso.css), or
     (b) a targeted, additive modifier on an EXISTING shared primitive from
         styles.css section 3 (.icon-btn) — e.g. .icon-btn-sm only touches
         size, .icon-btn.is-danger only touches the hover state; neither
         redeclares the base .icon-btn rule itself.
   Class names are deliberately scoped (row-*, cmodal-*, cform-*, case-toast,
   code-link) to avoid any collision with caso.css, which styles.css's
   header comment documents as owning .field/.chip-group/.checkbox-group/
   .input-suffix — a form lives in THIS file too (the create/edit modal),
   but under its own vocabulary (.cform-*), never those names.

   DEPENDENCIES: none new — only the design tokens + primitives already in
   styles.css (:root/[data-theme="dark"] tokens, .card, .pill, .btn,
   .icon-btn, .filter-bar/.filter-chip, .case-table, .state-panel).

   A-MUDAR: none blocking — see casos.js's header comment for the
   CRUD-endpoint-not-deployed-yet caveat (backend agent, in parallel).

   SECTIONS
     1. Row actions (table cell): Ver / Editar / Eliminar + delete confirm
     2. Toast (transient success/error banner)
     3. Modal: create/edit case (.cmodal-*) + its form (.cform-*)
     4. Responsive
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Row actions
--------------------------------------------------------------------- */
.case-table .col-actions{text-align:right;white-space:nowrap;}
.row-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;}

/* Size modifier on the EXISTING .icon-btn primitive (styles.css section 3)
   — base border/background/hover behaviour is inherited unchanged, only
   the footprint shrinks to fit a dense table row. */
.icon-btn-sm{width:30px;height:30px;}
.icon-btn-sm svg{width:15px;height:15px;}
.icon-btn.is-danger:hover{background:var(--error-surf);border-color:var(--error);color:var(--error);}

/* The case-code cell acts as a "Ver" shortcut too (in addition to the row
   action button) — styled to read exactly like the existing .col-code
   text (font-weight 700, red-deep) even though it's a real <button> now,
   not bare text, so it stays keyboard/screen-reader operable. */
.code-link{background:none;border:none;padding:0;margin:0;font:inherit;font-weight:700;color:var(--red-deep);cursor:pointer;text-decoration:none;}
.code-link:hover{text-decoration:underline;}

.row-confirm{gap:8px;flex-wrap:wrap;}
.row-confirm-text{font-size:12.5px;font-weight:700;color:var(--text2);white-space:nowrap;}
.row-confirm-error{font-size:11.5px;font-weight:700;color:var(--error);width:100%;text-align:right;}

/* ---------------------------------------------------------------------
   2. Toast — transient success/error banner shown after a mutation
      (create/edit/delete). Reuses the semantic success/error tokens
      already in styles.css :root — no new color.
--------------------------------------------------------------------- */
.case-toast{display:flex;align-items:center;gap:10px;padding:13px 18px;border-radius:14px;font-size:13.5px;font-weight:700;}
.case-toast svg{width:17px;height:17px;flex:0 0 17px;}
.case-toast.is-success{background:var(--success-surf);color:var(--success);}
.case-toast.is-error{background:var(--error-surf);color:var(--error);}

/* ---------------------------------------------------------------------
   3. Modal: create/edit case
--------------------------------------------------------------------- */
/* Backdrop scrim: rgba (not a token) is a deliberate, precedent-following
   exception — styles.css itself hardcodes rgba for exactly this category
   of thing (decorative depth/dimming, e.g. --shadow-md/--shadow-lg and
   #loginWall's own gradient), never for UI content color. Forked by theme
   the same way the shadow tokens are (darker/more opaque in dark mode). */
.cmodal-overlay{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;background:rgba(26,8,8,.46);padding:24px;overflow-y:auto;}
[data-theme="dark"] .cmodal-overlay{background:rgba(0,0,0,.6);}

.cmodal-dialog{width:480px;max-width:100%;padding:26px 26px 24px;box-shadow:var(--shadow-lg);max-height:calc(100vh - 48px);overflow-y:auto;}
.cmodal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px;}
.cmodal-title{font-size:18px;font-weight:800;color:var(--text);margin:0;letter-spacing:-.01em;}

.cform{display:flex;flex-direction:column;gap:16px;}
.cform-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.cform-field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.cform-label{font-size:12.5px;font-weight:700;color:var(--text2);}
.cform-req{color:var(--red-primary);}
.cform-input{width:100%;box-sizing:border-box;padding:11px 13px;border-radius:12px;border:1.5px solid var(--border);background:var(--surface-alt);color:var(--text);font-size:14px;font-family:inherit;outline:none;transition:border-color .15s,background .15s;}
.cform-input:focus{border-color:var(--red-primary);background:var(--surface);}
select.cform-input{cursor:pointer;}
.cform-error{font-size:12.5px;font-weight:700;color:var(--error);margin:0;}
.cform-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px;}

/* ---------------------------------------------------------------------
   4. Responsive
--------------------------------------------------------------------- */
@media (max-width:560px){
  .cform-row{grid-template-columns:1fr;}
  .cmodal-dialog{padding:22px 18px 20px;}
}