/* ============================================================
   INTRANET CEPES — Sistema de diseño
   Centro de Estudios Pesqueros · paleta marina institucional
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* --- Marca (extraída del logo CEPES) --- */
  --navy-900: #04123f;
  --navy-800: #0a1f5c;
  --navy-700: #142a6b;
  --navy-600: #2a3f7a;
  --navy-500: #3a4f8a;

  --teal-600: #0f6fa8;
  --teal-500: #1487c9;
  --teal-400: #4aaee0;
  --teal-050: #e6f1fa;

  --accent: var(--teal-500);
  --accent-strong: var(--teal-600);

  /* --- Neutros fríos --- */
  --ink: #16242f;
  --ink-soft: #43586a;
  --ink-faint: #6f8395;
  --line: #dde6ec;
  --line-soft: #eaf0f4;
  --paper: #f4f7f9;
  --paper-2: #eef3f6;
  --white: #ffffff;

  /* --- Estados --- */
  --ok: #2e7d5b;
  --ok-bg: #e7f3ee;
  --warn: #9a6a14;
  --warn-bg: #f8efdc;
  --danger: #a83a3a;
  --danger-bg: #f7e6e6;

  /* --- Clasificación --- */
  --cls-public: #2e7d5b;
  --cls-internal: #2a3f7a;
  --cls-restricted: #9a6a14;
  --cls-confidential: #a83a3a;

  /* --- Tipografía --- */
  --font-ui: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* --- Métrica --- */
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(11, 42, 71, 0.06), 0 1px 3px rgba(11, 42, 71, 0.05);
  --shadow-md: 0 4px 16px rgba(11, 42, 71, 0.08), 0 1px 4px rgba(11, 42, 71, 0.05);
  --shadow-lg: 0 18px 48px rgba(7, 32, 58, 0.18);

  /* density (controlado por Tweaks) */
  --density: 1;
  --gap: calc(20px * var(--density));
  --pad-card: calc(22px * var(--density));
  --row-h: calc(52px * var(--density));
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--teal-050); }

/* --- Tipografía utilitaria --- */
.mono { font-family: var(--font-mono); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}

/* --- Botones --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--navy-800); color: #fff; }
.btn-primary:hover { background: var(--navy-700); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-strong); }
.btn-ghost { background: transparent; color: var(--ink-soft); border-color: var(--line); }
.btn-ghost:hover { background: var(--white); border-color: var(--ink-faint); color: var(--ink); }
.btn-sm { height: 34px; padding: 0 12px; font-size: 13px; }
.btn svg { width: 17px; height: 17px; }

/* --- Pills / badges --- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

.cls { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; }
.cls-public { color: var(--cls-public); }
.cls-internal { color: var(--cls-internal); }
.cls-restricted { color: var(--cls-restricted); }
.cls-confidential { color: var(--cls-confidential); }

/* --- Cards --- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* --- Inputs --- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label {
  font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  letter-spacing: 0.01em;
}
.input {
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
  width: 100%;
}
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--teal-050);
}
.input::placeholder { color: var(--ink-faint); }

/* --- Scrollbar sobrio --- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: #cdd9e1; border-radius: 8px; border: 3px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: #b7c6d1; }
::-webkit-scrollbar-track { background: transparent; }

/* --- Placeholder de imagen (rayas) --- */
.img-slot {
  background:
    repeating-linear-gradient(45deg, #e9eff2 0 10px, #eef3f6 10px 20px);
  border: 1px dashed #c5d2db;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
}