/* ══════════════════════════════════════════════════════════════════════════
   Confuturo · lenguaje visual de la plataforma
   ──────────────────────────────────────────────────────────────────────────
   Un solo sitio donde vive la identidad. Antes convivían dos lenguajes: el rojo
   de Materialize heredado de la plantilla y el navy+oro del logo, que ya usaban
   la Historia Clínica y la Junta Clínico Jurídica. Este archivo fija el segundo
   como el de la casa y lo comparten todos los módulos nuevos.

   Los módulos siguen declarando sus propias variables (--jn, --pj-navy…), pero
   ahora apuntan aquí. Todas llevan valor de respaldo por si esta hoja no cargara:
   así una pantalla nunca se queda sin color.

   Paleta del logo Confuturo Lawyers Group: navy #0F2A44 · oro #C9A227.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Marca */
  --cf-navy:      #0f2a44;
  --cf-navy-2:    #173c60;
  --cf-navy-deep: #0b1c2e;
  --cf-gold:      #c9a227;
  --cf-gold-soft: #efd27a;
  --cf-gold-dark: #8a6b00;   /* oro legible sobre blanco: 6.4:1 */

  /* Superficies y texto */
  --cf-paper: #f4f6f8;
  --cf-white: #ffffff;
  --cf-line:  #e3e8ef;
  --cf-ink:   #1f2a37;
  --cf-muted: #5b6774;

  /* Estados. El ámbar y el verde son los mismos del panel de juntas:
     ámbar = en proceso · verde = terminado. */
  --cf-proceso:   #e8b10a;
  --cf-ok:        #1e8e3e;
  --cf-alerta:    #e37400;
  --cf-error:     #c5221f;
  --cf-info:      #1a73e8;

  /* Formas */
  --cf-radio:      12px;
  --cf-radio-sm:   9px;
  --cf-sombra:     0 1px 2px rgba(15, 42, 68, .05), 0 8px 24px rgba(15, 42, 68, .06);
  --cf-sombra-alt: 0 8px 28px rgba(15, 42, 68, .16);

  /* Tipografía */
  --cf-fuente: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cf-mono:   ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

/* Cliente sin correo: no es un error —en las asesorías iniciales todavía no se
   pide—, pero sí una casilla por completar: a ese cliente no se le puede mandar
   un contrato ni una notificación. Se marca sin alarmar. */
.cfl-sin-correo {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  background: #fdf6e0; border: 1px solid #ecdcae; color: #7a5c12;
  font-size: 10.5px; font-weight: 600; white-space: nowrap; cursor: help;
}

/* ═══════════════════════════════════════════════════════════════════════
   REPARTO · a qué base va cada actuación
   ═══════════════════════════════════════════════════════════════════════
   Un color por base, el MISMO en el listado de actuaciones, en el panel del
   reparto y en el mapa «cómo se reparte un estancado». Si cada pantalla
   tuviera su color, la persona tendría que aprender tres idiomas para leer
   una sola cosa.
     · Prioritarios              → oro
     · Revisión de tutelas       → morado
     · Incidentes de desacato    → rojo
     · Estancados · tr. jurídicos → navy (punteado mientras no se especifique)
   ═══════════════════════════════════════════════════════════════════════ */
.cfl-rep {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 3px; padding: 2px 8px 2px 6px;
  /* 10px y no 999px: en una columna estrecha el chip ocupa varias líneas, y
     una píldora de cuatro renglones queda como una mancha ovalada. */
  border: 1px solid transparent; border-radius: 10px;
  font-size: 11.5px; font-weight: 600; line-height: 1.35;
  white-space: normal; text-align: left;
}
/* El icono va por CSS y NO como texto dentro del chip: el Excel del listado
   quita el HTML y deja el texto, y con un <i class="material-icons"> la celda
   salía «priority_highPrioritario · …». */
.cfl-rep::before, .cfl-retirado::before {
  font-family: "Material Icons"; font-weight: normal; font-style: normal;
  font-size: 14px; line-height: 1; letter-spacing: normal; text-transform: none;
  white-space: nowrap; direction: ltr; flex: 0 0 auto;
  -webkit-font-feature-settings: "liga"; font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
.cfl-rep--pri::before   { content: "priority_high"; }
.cfl-rep--tut::before   { content: "gavel"; }
.cfl-rep--des::before   { content: "report"; }
.cfl-rep--jur::before   { content: "inventory_2"; }
.cfl-rep--fuera::before { content: "block"; }
.cfl-retirado::before   { content: "person_off"; font-size: 13px; }
.cfl-rep--pri   { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.cfl-rep--tut   { background: #f3e8ff; color: #6b21a8; border-color: #d8b4fe; }
.cfl-rep--des   { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.cfl-rep--jur   { background: #eef2f7; color: var(--cf-navy, #0f2a44); border-color: #cbd5e1; }
.cfl-rep--jur.is-propuesto { border-style: dashed; font-weight: 500; color: #475569; }
.cfl-rep--fuera { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; font-weight: 500; }

/* Quien responde por el caso ya no está en la firma. */
.cfl-retirado {
  display: inline-flex; align-items: center; gap: 3px;
  margin-top: 3px; padding: 1px 7px 1px 5px;
  border: 1px solid #fca5a5; border-radius: 999px;
  background: #fff; color: #b91c1c;
  font-size: 11px; font-weight: 600; line-height: 1.35; white-space: nowrap;
}



/* ── El aviso del reparto en el formulario de la actuación ──
   Mismo color que el chip de su base, para que quien lo vio aquí lo reconozca
   después en el listado y en el reparto. */
.cfl-aviso-rep {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: -6px 0 14px; padding: 9px 12px;
  border: 1px solid; border-radius: 10px;
  font-size: 13px; line-height: 1.45;
}
.cfl-aviso-rep .cfl-rep { margin-top: 0; }
.cfl-aviso-rep > div { flex: 1 1 260px; }
.cfl-aviso-rep--pri { background: #fffbeb; border-color: #fcd34d; color: #78350f; }
.cfl-aviso-rep--tut { background: #faf5ff; border-color: #d8b4fe; color: #581c87; }
.cfl-aviso-rep--des { background: #fef2f2; border-color: #fca5a5; color: #7f1d1d; }
.cfl-aviso-rep--jur { background: #f8fafc; border-color: #cbd5e1; color: #1e293b; }
.cfl-aviso-rep .cfl-aviso-rep__clasif {
  flex: 1 1 100%; display: grid; gap: 8px; margin-top: 2px;
  /* Se adapta a lo que haya: la columna del formulario mide ~350 px y con dos
     mínimos fijos lado a lado el campo «Especifica» se salía del recuadro. */
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  min-width: 0;
}
/* [hidden] pierde contra cualquier `display` propio: hay que decirlo. */
.cfl-aviso-rep .cfl-aviso-rep__clasif[hidden] { display: none; }
.cfl-aviso-rep__clasif label {
  display: grid; gap: 3px; font-size: 12px; font-weight: 600; color: #475569;
}
.cfl-aviso-rep__clasif select.browser-default,
.cfl-aviso-rep__clasif input.browser-default {
  width: 100%; box-sizing: border-box; height: auto; margin: 0;
  padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 6px;
  background: #fff; font-size: 13px; font-weight: 400; color: #1e293b;
}
.cfl-aviso-rep .cfl-aviso-rep__abrir,
.cfl-aviso-rep .cfl-aviso-rep__abrir:focus {   /* Materialize pinta button:focus de turquesa */
  background: none; border: 0; padding: 0; margin-left: 4px;
  color: #1d4ed8; text-decoration: underline; cursor: pointer; font-size: 13px;
}