/* ============================================================
   Tema Material Design 3 sobre Pico CSS
   Tokens de color derivados de un seed azul (#0B57D0).
   ============================================================ */

:root {
  /* --- Tokens MD3 --- */
  --md-primary: #0b57d0;
  --md-on-primary: #ffffff;
  --md-primary-hover: #0842a0;
  --md-primary-container: #d3e3fd;
  --md-on-primary-container: #041e49;
  --md-secondary-container: #e8eef8;
  --md-on-secondary-container: #001d35;
  --md-surface: #ffffff;
  --md-surface-dim: #f3f6fc;
  --md-surface-container: #eef2f9;
  --md-background: #f6f8fd;
  --md-on-surface: #1f1f1f;
  --md-on-surface-variant: #444746;
  --md-outline: #c4c7c5;
  --md-outline-variant: #e1e3e1;
  --md-error: #b3261e;
  --md-error-container: #f9dedc;

  /* elevaciones */
  --md-elev-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --md-elev-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --md-elev-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.30);

  /* --- Puente hacia variables de Pico --- */
  --pico-font-family: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;
  --pico-background-color: var(--md-background);
  --pico-color: var(--md-on-surface);
  --pico-primary: var(--md-primary);
  --pico-primary-background: var(--md-primary);
  --pico-primary-border: var(--md-primary);
  --pico-primary-hover: var(--md-primary-hover);
  --pico-primary-hover-background: var(--md-primary-hover);
  --pico-primary-underline: transparent;
  --pico-border-radius: 12px;
  --pico-card-background-color: var(--md-surface);
  --pico-card-box-shadow: var(--md-elev-1);
  --pico-muted-color: var(--md-on-surface-variant);
  --pico-h1-color: var(--md-on-surface);
  --pico-h2-color: var(--md-on-surface);
  --pico-h3-color: var(--md-on-surface);
  --pico-h4-color: var(--md-on-surface);
}

body { background: var(--md-background); }

/* ---------- Tipografía ---------- */
h1, h2, h3 { font-weight: 500; letter-spacing: -0.25px; }
h2 { font-size: 1.75rem; }
hgroup > p { color: var(--md-on-surface-variant); }

/* ---------- Barra superior (app bar) ---------- */
body > nav {
  background: var(--md-primary);
  box-shadow: var(--md-elev-2);
  padding: 0.15rem 1.25rem;
  position: sticky;
  top: 0;
  z-index: 50;
}
body > nav a,
body > nav a.contrast,
body > nav strong a {
  color: var(--md-on-primary) !important;
  border-radius: 100px;
  padding: 0.45rem 0.9rem;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.925rem;
  transition: background .15s ease;
}
body > nav a:hover { background: rgba(255,255,255,.14); }
body > nav strong a { font-size: 1.1rem; letter-spacing: .25px; }

/* ---------- Tarjetas (article) ---------- */
article {
  background: var(--md-surface);
  border: none;
  border-radius: 16px;
  box-shadow: var(--md-elev-1);
  transition: box-shadow .2s ease, transform .2s ease;
}
/* tarjetas de navegación (home, índices): elevan al pasar */
.grid > article:hover { box-shadow: var(--md-elev-3); transform: translateY(-2px); }
article h4 a { text-decoration: none; color: var(--md-primary); font-weight: 500; }

/* ---------- Botones ---------- */
button, [role=button], input[type=submit] {
  border-radius: 100px;
  font-weight: 500;
  letter-spacing: .1px;
  padding: 0.55rem 1.5rem;
  box-shadow: none;
  transition: box-shadow .15s ease, background .15s ease;
  border: none;
}
button:hover, [role=button]:hover, input[type=submit]:hover { box-shadow: var(--md-elev-1); }

/* variante outlined (Pico .outline) → botón delineado MD */
button.outline, [role=button].outline,
button.outline.secondary, [role=button].outline.secondary {
  background: transparent;
  border: 1px solid var(--md-outline);
  color: var(--md-primary);
}
button.outline:hover, [role=button].outline:hover {
  background: rgba(11,87,208,.08);
  box-shadow: none;
}

/* variante secondary sólida → botón tonal MD */
button.secondary:not(.outline), [role=button].secondary:not(.outline) {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

/* contrast → texto de énfasis */
button.contrast, [role=button].contrast {
  background: var(--md-on-surface);
  color: var(--md-surface);
}

/* ---------- Formularios ---------- */
input:not([type=checkbox]):not([type=radio]), select, textarea {
  border-radius: 8px;
  border: 1px solid var(--md-outline);
  background: var(--md-surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus:not([type=checkbox]):not([type=radio]), select:focus, textarea:focus {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 1.5px var(--md-primary);
}
label { font-size: .875rem; color: var(--md-on-surface-variant); font-weight: 500; }

/* ---------- Tablas (data table MD) ---------- */
table {
  background: var(--md-surface);
  border-radius: 16px;
  box-shadow: var(--md-elev-1);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}
thead th {
  background: var(--md-surface-container);
  color: var(--md-on-surface-variant);
  font-weight: 500;
  font-size: .8125rem;
  text-transform: none;
  border-bottom: 1px solid var(--md-outline-variant);
}
tbody td { border-bottom: 1px solid var(--md-outline-variant); font-size: .9rem; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: var(--md-surface-dim); }

table.tabla-planilla td.num, th.num,
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Chips de estado (badges) ---------- */
.badge {
  display: inline-block;
  padding: 0.2em 0.75em;
  border-radius: 100px;
  font-size: 0.78em;
  font-weight: 500;
  letter-spacing: .2px;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}
.badge.abierto      { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.badge.preplanilla  { background: #fef0c3; color: #574500; }
.badge.aprobado     { background: #c8e6c9; color: #0d3c10; }
.badge.cerrado      { background: #2e7d32; color: #ffffff; }
.badge.pagado       { background: #e8def8; color: #4a4458; }
.badge.borrador     { background: var(--md-surface-container); color: var(--md-on-surface-variant); }

/* ---------- Desplegables (details/summary) ---------- */
details {
  border: none;
  padding-bottom: 0;
}
details > summary[role=button] { width: auto; display: inline-block; }
details[open] > summary[role=button] { margin-bottom: .75rem; }
details > form {
  background: var(--md-surface);
  border-radius: 16px;
  box-shadow: var(--md-elev-1);
  padding: 1.25rem;
}

/* dentro de una celda de tabla, el form de cerrar vigencia es compacto */
td details > form { padding: .75rem; box-shadow: var(--md-elev-2); }

/* ---------- Breadcrumb ---------- */
nav[aria-label=breadcrumb] { font-size: .875rem; }
nav[aria-label=breadcrumb] a { color: var(--md-primary); text-decoration: none; }

/* ---------- Detalles menores ---------- */
.traza { font-size: 0.8em; color: var(--md-on-surface-variant); }
main.container { padding-top: 1.5rem; }
::selection { background: var(--md-primary-container); }

/* login: centrar la tarjeta */
main.container > article:only-child { max-width: 420px; margin: 3rem auto; }