/* ============================================================================
   cj-web.css - Design System central de Cualidad Juridica, S.L.P.
   ----------------------------------------------------------------------------
   Extraido del canon aprobado (paneles /ideas, /leads, /cabina) a un sistema
   unico y reutilizable. Todo panel web interno del despacho debe construirse
   con estos tokens y clases .cj-*  -  sin inventar paletas ni estilos inline.

   Ruta publica:  /assets/cj/cj-web.css
   Plantilla:     /opt/cj-web/plantilla/base.html
   Logo:          /assets/cj/logo.png

   v1.0 - 19-jul-2026 - frente portal145-f2-diseno (E-code)
   ============================================================================ */

/* Fuentes del canon: Darker Grotesque (display) + Inter (texto).
   Se cargan aqui para que cualquier pagina que enlace este CSS herede la
   tipografia correcta sin tener que acordarse de anadir los <link>. */
@import url('https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

/* Reset minimo, identico al del canon. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ============================================================================
   1) TOKENS  (custom properties --cj-*)  -  unica fuente de verdad visual
   ============================================================================ */
:root{
  /* -- Marca: azul petroleo -- */
  --cj-brand:#003e52;            /* petroleo base (cabeceras, titulos, acentos) */
  --cj-brand-dark:#002a3a;       /* petroleo oscuro (bordes, hover, sombras) */
  --cj-brand-light:#1a5a72;      /* petroleo claro (detalles, lineas de accion) */

  /* -- Escala de grises -- */
  --cj-gray-50:#FAFAFA; --cj-gray-100:#F5F5F0; --cj-gray-200:#E5E7EB;
  --cj-gray-300:#D1D5DB; --cj-gray-400:#9CA3AF; --cj-gray-500:#6B7280;
  --cj-gray-600:#4B5563; --cj-gray-700:#374151; --cj-gray-800:#1F2937;
  --cj-gray-900:#111827;

  /* -- Fondos -- */
  --cj-bg:var(--cj-gray-50);     /* fondo general de pagina */
  --cj-crema:#F5F5F0;            /* crema corporativa (= gray-100) */
  --cj-card:#FFFFFF;             /* fondo de tarjeta / superficie */
  --cj-soft:var(--cj-gray-100);  /* fondo suave (cabeceras internas, chips) */

  /* -- Texto -- */
  --cj-text:var(--cj-gray-900);        /* texto principal */
  --cj-text-2:var(--cj-gray-600);      /* texto secundario */
  --cj-text-muted:var(--cj-gray-500);  /* texto tenue / metadatos */
  --cj-text-on-brand:#FFFFFF;          /* texto sobre fondo petroleo */
  --cj-text-on-brand-muted:rgba(255,255,255,.72);

  /* -- Bordes -- */
  --cj-border:var(--cj-gray-200);        /* borde estandar */
  --cj-border-strong:var(--cj-gray-300); /* borde marcado */

  /* -- Colores funcionales de estado -- */
  --cj-ok:#10B981;      /* correcto / exito (verde) */
  --cj-warn:#F59E0B;    /* aviso (ambar) */
  --cj-alert:#DC2626;   /* alerta / error (rojo) */
  --cj-info:#2b6cb0;    /* informativo (azul) */

  /* Fondos y textos suaves de cada estado (pildoras y cajas de estado) */
  --cj-ok-bg:#ECFDF5;    --cj-ok-text:#065F46;
  --cj-warn-bg:#FFFBEB;  --cj-warn-text:#92400E;  --cj-warn-border:#FDE68A;
  --cj-alert-bg:#FEE2E2; --cj-alert-text:#991B1B; --cj-alert-border:#FECACA;
  --cj-info-bg:#EFF6FF;  --cj-info-text:#1E40AF;

  /* -- Tipografias -- */
  --cj-font-display:'Darker Grotesque',system-ui,sans-serif; /* titulos, etiquetas */
  --cj-font-body:'Inter',system-ui,-apple-system,sans-serif; /* texto corrido */
  --cj-font-mono:'JetBrains Mono','SF Mono',ui-monospace,monospace; /* cifras/codigo */

  /* -- Radios de esquina -- */
  --cj-radius-sm:6px; --cj-radius-md:10px; --cj-radius-lg:16px; --cj-radius-pill:999px;

  /* -- Sombras suaves -- */
  --cj-shadow-1:0 1px 2px rgba(17,24,39,.04),0 1px 1px rgba(17,24,39,.06);
  --cj-shadow-2:0 4px 12px rgba(17,24,39,.06),0 2px 4px rgba(17,24,39,.04);
  --cj-shadow-brand:0 2px 8px rgba(0,62,82,.18); /* sombra tenida de marca */

  /* -- Medidas de maquetacion -- */
  --cj-header-h:100px;   /* alto de cabecera */
  --cj-nav-h:54px;       /* alto de barra de navegacion */
  --cj-maxw:1600px;      /* ancho maximo del contenido */
}

/* Base de pagina */
html,body{
  background:var(--cj-bg);color:var(--cj-text);
  font-family:var(--cj-font-body);min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--cj-brand);text-decoration:none}
a:hover{text-decoration:underline}

/* ============================================================================
   2) CABECERA con logo   -   .cj-header
   ============================================================================ */
.cj-header{
  background:var(--cj-brand);color:var(--cj-text-on-brand);
  border-bottom:1px solid var(--cj-brand-dark);
  display:flex;align-items:center;gap:24px;
  padding:0 24px;min-height:var(--cj-header-h);
  box-shadow:var(--cj-shadow-brand);
}
.cj-header__brand{display:flex;align-items:center;gap:14px;flex-shrink:0}
.cj-header__logo{height:60px;width:auto;object-fit:contain}
.cj-header__title{font-family:var(--cj-font-display);line-height:1.1}
.cj-header__title h1{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.3px}
.cj-header__sub{
  font-size:13px;color:var(--cj-text-on-brand-muted);
  font-family:var(--cj-font-body);font-weight:400;margin-top:3px;
}
.cj-header__meta{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* ============================================================================
   3) NAVEGACION por areas   -   .cj-nav
   ============================================================================ */
.cj-nav{
  background:var(--cj-card);border-bottom:1px solid var(--cj-border);
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  padding:0 24px;min-height:var(--cj-nav-h);
  box-shadow:0 1px 2px rgba(0,0,0,.02);
}
.cj-nav-btn{
  background:transparent;border:none;cursor:pointer;text-decoration:none;
  padding:10px 18px;font-family:var(--cj-font-display);
  font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--cj-text-muted);
  display:inline-flex;align-items:center;gap:8px;
  border-bottom:2px solid transparent;transition:all .15s;
}
.cj-nav-btn:hover{color:var(--cj-brand);text-decoration:none}
.cj-nav-btn.is-active{color:var(--cj-brand);border-bottom-color:var(--cj-brand)}

/* ============================================================================
   4) CONTENEDOR principal   -   .cj-main  +  titulos
   ============================================================================ */
.cj-main{max-width:var(--cj-maxw);margin:0 auto;padding:28px 28px 48px}
.cj-page-title{
  font-family:var(--cj-font-display);
  font-size:28px;font-weight:800;color:var(--cj-brand);
  letter-spacing:-.02em;margin-bottom:4px;
}
.cj-page-sub{font-size:13px;color:var(--cj-text-2);margin-bottom:24px}
.cj-section-title{
  font-family:var(--cj-font-display);
  font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--cj-text-2);margin:24px 0 14px;
  display:flex;align-items:center;gap:10px;
}
.cj-section-title::before{
  content:'';display:inline-block;width:24px;height:2px;background:var(--cj-brand);
}

/* ============================================================================
   5) GRID responsive 2-4 columnas   -   .cj-grid
   ============================================================================ */
.cj-grid{display:grid;gap:16px}
.cj-grid--2{grid-template-columns:repeat(2,1fr)}
.cj-grid--3{grid-template-columns:repeat(3,1fr)}
.cj-grid--4{grid-template-columns:repeat(4,1fr)}
/* Colapso responsive: 4/3 -> 2 en tablet, todo -> 1 en movil */
@media(max-width:1100px){.cj-grid--3,.cj-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.cj-grid--2,.cj-grid--3,.cj-grid--4{grid-template-columns:1fr}}

/* ============================================================================
   6) TARJETA   -   .cj-card   (+ variantes de estado por borde izquierdo)
   ============================================================================ */
.cj-card{
  background:var(--cj-card);border:1px solid var(--cj-border);
  border-left:3px solid var(--cj-brand);border-radius:var(--cj-radius-sm);
  padding:14px 16px;transition:all .15s;
}
.cj-card:hover{box-shadow:0 4px 12px rgba(0,62,82,.10);transform:translateY(-1px)}
.cj-card--ok{border-left-color:var(--cj-ok)}
.cj-card--warn{border-left-color:var(--cj-warn)}
.cj-card--alert{border-left-color:var(--cj-alert)}
.cj-card--info{border-left-color:var(--cj-info)}
.cj-card__title{
  font-family:var(--cj-font-display);font-size:15px;font-weight:700;
  line-height:1.25;color:var(--cj-text);letter-spacing:-.01em;
}
.cj-card__body{font-size:13px;color:var(--cj-text-2);line-height:1.5;margin-top:6px}
.cj-card__foot{
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
  margin-top:12px;padding-top:10px;border-top:1px solid var(--cj-border);
  font-size:11px;color:var(--cj-text-muted);
}

/* Tarjeta KPI (cifra grande) - .cj-kpi */
.cj-kpi{
  background:var(--cj-card);border:1px solid var(--cj-border);
  border-left:3px solid var(--cj-brand);border-radius:var(--cj-radius-sm);
  padding:14px 16px 12px;transition:all .15s;
}
.cj-kpi:hover{box-shadow:0 3px 10px rgba(0,62,82,.12);transform:translateY(-1px)}
.cj-kpi--ok{border-left-color:var(--cj-ok)}
.cj-kpi--warn{border-left-color:var(--cj-warn)}
.cj-kpi--alert{border-left-color:var(--cj-alert)}
.cj-kpi--info{border-left-color:var(--cj-info)}
.cj-kpi__label{
  font-family:var(--cj-font-display);font-weight:700;font-size:10px;
  text-transform:uppercase;letter-spacing:.07em;color:var(--cj-text-muted);
}
.cj-kpi__value{
  font-family:var(--cj-font-display);font-weight:800;font-size:32px;
  color:var(--cj-brand);letter-spacing:-.02em;line-height:1.1;margin-top:6px;
}
.cj-kpi__delta{font-size:11px;font-weight:500;margin-top:3px;color:var(--cj-text-muted)}

/* ============================================================================
   7) BADGE / PILDORA   -   .cj-badge   (+ variantes de estado)
   ============================================================================ */
.cj-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:3px 9px;border-radius:var(--cj-radius-pill);
  background:var(--cj-soft);color:var(--cj-text-2);border:1px solid var(--cj-border);
  font-family:var(--cj-font-body);white-space:nowrap;
}
.cj-badge--brand{background:rgba(0,62,82,.08);color:var(--cj-brand);border-color:transparent}
.cj-badge--ok{background:var(--cj-ok-bg);color:var(--cj-ok-text);border-color:transparent}
.cj-badge--warn{background:var(--cj-warn-bg);color:var(--cj-warn-text);border-color:transparent}
.cj-badge--alert{background:var(--cj-alert-bg);color:var(--cj-alert-text);border-color:transparent}
.cj-badge--info{background:var(--cj-info-bg);color:var(--cj-info-text);border-color:transparent}

/* ============================================================================
   8) TABLA de datos   -   .cj-table  (envuelta en .cj-table-wrap)
   ============================================================================ */
.cj-table-wrap{
  background:var(--cj-card);border:1px solid var(--cj-border);
  border-radius:var(--cj-radius-md);overflow:hidden;box-shadow:var(--cj-shadow-1);
  overflow-x:auto;
}
.cj-table{width:100%;border-collapse:collapse;font-size:13px}
.cj-table thead th{
  background:var(--cj-soft);text-align:left;
  font-family:var(--cj-font-display);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--cj-text-2);
  padding:12px 16px;border-bottom:1px solid var(--cj-border);white-space:nowrap;
}
.cj-table tbody td{
  padding:12px 16px;border-bottom:1px solid var(--cj-border);
  color:var(--cj-text);vertical-align:middle;
}
.cj-table tbody tr:last-child td{border-bottom:none}
.cj-table tbody tr:hover{background:var(--cj-soft)}
.cj-table__num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--cj-font-mono)}

/* ============================================================================
   9) ESTADOS ok / aviso / alerta   -   .cj-state  (caja con mensaje)
   ============================================================================ */
.cj-state{
  border:1px solid var(--cj-border);border-left:3px solid var(--cj-text-muted);
  border-radius:var(--cj-radius-sm);padding:14px 18px;
}
.cj-state__title{
  font-family:var(--cj-font-display);font-size:14px;font-weight:700;
  display:flex;align-items:center;gap:8px;margin-bottom:4px;
}
.cj-state__body{font-size:13px;line-height:1.5}
.cj-state--ok{background:var(--cj-ok-bg);border-color:transparent;border-left-color:var(--cj-ok)}
.cj-state--ok .cj-state__title,.cj-state--ok .cj-state__body{color:var(--cj-ok-text)}
.cj-state--warn{background:var(--cj-warn-bg);border-color:var(--cj-warn-border);border-left-color:var(--cj-warn)}
.cj-state--warn .cj-state__title{color:var(--cj-warn-text)}
.cj-state--warn .cj-state__body{color:#78350F}
.cj-state--alert{background:var(--cj-alert-bg);border-color:var(--cj-alert-border);border-left-color:var(--cj-alert)}
.cj-state--alert .cj-state__title,.cj-state--alert .cj-state__body{color:var(--cj-alert-text)}
.cj-state--info{background:var(--cj-info-bg);border-color:transparent;border-left-color:var(--cj-info)}
.cj-state--info .cj-state__title,.cj-state--info .cj-state__body{color:var(--cj-info-text)}

/* Puntito de estado reutilizable */
.cj-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.cj-dot--ok{background:var(--cj-ok);box-shadow:0 0 6px var(--cj-ok)}
.cj-dot--warn{background:var(--cj-warn);box-shadow:0 0 6px var(--cj-warn)}
.cj-dot--alert{background:var(--cj-alert);box-shadow:0 0 6px var(--cj-alert)}

/* ============================================================================
   10) BOTON   -   .cj-btn   (primario, secundario, fantasma)
   ============================================================================ */
.cj-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--cj-font-display);font-size:14px;font-weight:700;
  letter-spacing:.02em;line-height:1;cursor:pointer;
  padding:10px 18px;border-radius:var(--cj-radius-sm);
  border:1px solid var(--cj-brand);background:var(--cj-brand);color:#fff;
  transition:all .15s;text-decoration:none;
}
.cj-btn:hover{background:var(--cj-brand-dark);border-color:var(--cj-brand-dark);text-decoration:none}
.cj-btn--secondary{background:#fff;color:var(--cj-brand)}
.cj-btn--secondary:hover{background:var(--cj-soft);color:var(--cj-brand)}
.cj-btn--ghost{background:transparent;border-color:var(--cj-border-strong);color:var(--cj-text-2)}
.cj-btn--ghost:hover{background:var(--cj-soft);border-color:var(--cj-brand);color:var(--cj-brand)}
.cj-btn--sm{padding:6px 12px;font-size:12px}
.cj-btn:disabled{opacity:.5;cursor:not-allowed}

/* ============================================================================
   11) PIE   -   .cj-footer   (+ desplegable .cj-details)
   ============================================================================ */
.cj-footer{
  max-width:var(--cj-maxw);margin:0 auto;
  padding:24px 28px;border-top:1px solid var(--cj-border);
  color:var(--cj-text-muted);font-size:12px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.cj-footer a{color:var(--cj-text-2)}

.cj-details{border:1px solid var(--cj-border);border-radius:var(--cj-radius-sm);background:var(--cj-card);padding:0 14px}
.cj-details summary{
  cursor:pointer;padding:12px 0;font-family:var(--cj-font-display);
  font-weight:700;color:var(--cj-text-2);font-size:13px;
  text-transform:uppercase;letter-spacing:.05em;list-style:none;
}
.cj-details summary::-webkit-details-marker{display:none}
.cj-details[open] summary{border-bottom:1px solid var(--cj-border)}
.cj-details__body{padding:12px 0}

/* Tarjeta usable como enlace completo (p. ej. portada por areas) */
.cj-card{display:block;text-decoration:none;color:inherit}
.cj-card:hover{text-decoration:none}
a.cj-card:hover .cj-card__title{color:var(--cj-brand)}


/* ===== v0.2 · 19-jul-2026 · Correcciones de Paco (portada + boton portal) ===== */
/* Tarjetas de portal: mas cuadradas y altas, titulo grande y en color de marca */
.cj-grid--portal{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.cj-card--portal{min-height:220px;display:flex;flex-direction:column;padding:22px 20px}
.cj-card--portal .cj-card__title{font-family:var(--cj-font-display);font-size:30px;font-weight:700;line-height:1.05;color:var(--cj-brand);margin-bottom:10px}
.cj-card--portal .cj-card__body{font-size:14px;color:var(--cj-text-2);flex:1}
.cj-card--portal .cj-card__foot{margin-top:12px}
a.cj-card--portal:hover .cj-card__title{filter:brightness(1.35)}
@media (max-width:640px){.cj-grid--portal{grid-template-columns:repeat(2,1fr);gap:12px}.cj-card--portal{min-height:180px;padding:16px 14px}.cj-card--portal .cj-card__title{font-size:22px}}

/* Boton flotante de vuelta al Portal (OBLIGATORIO en todo panel que no sea la portada) */
.cj-home{position:fixed;bottom:16px;right:16px;z-index:9999;display:inline-flex;align-items:center;gap:8px;background:var(--cj-brand);color:var(--cj-text-on-brand)!important;font-family:var(--cj-font-display);font-size:16px;font-weight:600;padding:10px 18px;border-radius:999px;text-decoration:none;box-shadow:0 4px 14px rgba(0,42,58,.35)}
.cj-home:hover{filter:brightness(1.2);text-decoration:none}

/* ===== f9 portada · 20-jul-2026 · Hueco de area futura (auto-fill, preparado y sin llenar) ===== */
/* Tarjeta NO interactiva (div, sin href): atenuada, borde discontinuo, sin realce al pasar.
   Selector NUEVO: no altera ninguna regla existente -> no afecta a ningun panel ya desplegado. */
.cj-card--soon{border:1px dashed var(--cj-border-strong);border-left:3px dashed var(--cj-border-strong);background:var(--cj-soft);box-shadow:none;cursor:default}
.cj-card--soon:hover{box-shadow:none;transform:none}
.cj-card--soon .cj-card__title{color:var(--cj-text-muted)}
.cj-card--soon .cj-card__body{color:var(--cj-text-muted)}