/* Tipografía y tono Notion-like para el sistema JD.
   Colores hardcoded para que NO dependan de la config de Tailwind. */

:root { color-scheme: light dark; }
:root {
  --bg-page: #f7f7f5;
  --text-page: #2b2a28;
  --card-bg: #ffffff;
  --card-text: #2b2a28;
  --border-soft: rgba(0,0,0,.08);
  --muted: rgba(0,0,0,.55);
  --rphm-primary: #042C53;
  --rphm-accent: #5DCAA5;
}
html.dark {
  --bg-page: #1f1d1a;
  --text-page: #ebebe9;
  --card-bg: #2a2926;
  --card-text: #ebebe9;
  --border-soft: rgba(255,255,255,.1);
  --muted: rgba(255,255,255,.6);
}

html, body { height: 100%; }
body {
  background: var(--bg-page);
  color: var(--text-page);
  font-feature-settings: "ss01","cv01";
}

button { transition: background-color .15s ease, transform .05s ease; }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: not-allowed; }

/* INPUTS — siempre con fondo y texto explícitos */
.input {
  width: 100%;
  padding: .6rem .75rem;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: #ffffff;
  color: #2b2a28;
  font-size: .95rem;
}
html.dark .input { background: #3a3936; color: #f5f5f3; }
.input::placeholder { color: rgba(0,0,0,.4); }
html.dark .input::placeholder { color: rgba(255,255,255,.45); }
.input:focus { outline: 2px solid var(--rphm-accent); outline-offset: 1px; }

/* BOTONES */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1rem; border-radius: 8px; font-weight: 500; font-size: .9rem;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary { background: #042C53; color: #ffffff; }
.btn-primary:hover:not(:disabled) { background: #053a6b; }
.btn-accent { background: #5DCAA5; color: #042C53; font-weight: 600; }
.btn-accent:hover:not(:disabled) { background: #4ab490; }
.btn-ghost { background: transparent; color: var(--text-page); border-color: var(--border-soft); }
.btn-ghost:hover:not(:disabled) { background: rgba(0,0,0,.04); }
html.dark .btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,.06); }
.btn-danger { background: #d94f3f; color: #ffffff; }
.btn-danger:hover:not(:disabled) { background: #c0432f; }

/* CARDS — fondo y texto siempre explícitos */
.card {
  background: var(--card-bg);
  color: var(--card-text);
  border-radius: 10px;
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(15,15,15,.04), 0 2px 6px rgba(15,15,15,.04);
  border: 1px solid var(--border-soft);
}

/* LABELS y headings dentro de cards heredan el color del card */
.card label, .card h1, .card h2, .card h3, .card p, .card span, .card div, .card td, .card th {
  color: inherit;
}

/* CHIPS */
.chip {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 500;
  background: rgba(0,0,0,.06); color: rgba(0,0,0,.7);
  border: 1px solid transparent;
}
html.dark .chip { background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); }
.chip-live { background: #fde7e4; color: #b03323; }
.chip-published { background: #fff3c4; color: #7a5a00; }
.chip-draft { background: #e6e9ec; color: #3a4855; }
.chip-closed { background: #d9efe1; color: #1f6b41; }
html.dark .chip-live { background: rgba(217,79,63,.2); color: #ff9e91; }
html.dark .chip-published { background: rgba(217,180,0,.2); color: #ffd76a; }
html.dark .chip-draft { background: rgba(150,160,170,.2); color: #b8c2cc; }
html.dark .chip-closed { background: rgba(46,125,82,.2); color: #7ad9a4; }

/* MUTED text helper */
.opacity-60 { color: var(--muted); opacity: 1; }

/* TABLAS */
table th { color: var(--muted); font-weight: 500; }
table td { color: var(--card-text); }

/* PIZARRA FULLSCREEN */
.board-fullscreen {
  position: fixed; inset: 0; z-index: 50;
  background: #042C53; color: #ffffff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4rem;
}
.board-fullscreen * { color: #ffffff; }
.board-fullscreen .accent { color: #5DCAA5; }
.board-fullscreen .danger { color: #ff8a7a; }
.board-fullscreen .warn { color: #ffd76a; }

.bar { height: 14px; border-radius: 7px; background: rgba(255,255,255,.15); overflow: hidden; }
.bar > span { display: block; height: 100%; transition: width .3s ease; background: #5DCAA5; }

/* Headers/sub-headers fuera de cards */
h1, h2, h3 { color: var(--text-page); }

/* Utilities globales para acento RPHM (evitan depender de Tailwind config) */
.text-accent     { color: #5DCAA5 !important; }
.bg-accent       { background-color: #5DCAA5; }
.bg-accent-soft  { background-color: rgba(93,202,165,.10); }
.border-accent   { border-color: #5DCAA5 !important; }
.text-rphm-blue  { color: #042C53; }
.bg-rphm-blue    { background-color: #042C53; }