/* ─── tribucare.app ───────────────────────────────────────────────────────────
   Un documento legal se imprime, se archiva y se lee en un teléfono a las once
   de la noche. Las tres cosas pesan más que verse moderno, así que: una sola
   columna angosta, tipografía grande, y una hoja de impresión que no gasta
   tinta en cromo. */

:root {
  --papel:   #F0EDE5;
  --tarjeta: #FFFFFF;
  --linea:   #DDE8E5;
  --tinta:   #0F1F1A;
  --tinta-2: #4A6360;
  --tinta-3: #8BA8A4;
  --verde:   #0D9488;
  --verde-b: #F0FDFA;
  --serif:   "DM Serif Display", Georgia, serif;
  --sans:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel:   #0E1A17;
    --tarjeta: #14211E;
    --linea:   #24403A;
    --tinta:   #E9F0ED;
    --tinta-2: #A6BDB6;
    --tinta-3: #6E8981;
    --verde:   #4ED8C1;
    --verde-b: #10332E;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ── Encabezado ── */
.top {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  max-width: 760px; margin: 0 auto; padding: 22px 20px;
}
.brand {
  font-family: var(--serif); font-style: italic; font-size: 25px;
  color: var(--tinta); text-decoration: none; letter-spacing: -0.3px;
}
.top nav { display: flex; gap: 18px; flex-wrap: wrap; }
.top nav a {
  color: var(--tinta-2); text-decoration: none; font-size: 14.5px; font-weight: 500;
}
.top nav a:hover { color: var(--verde); }
.top nav a.lang {
  color: var(--verde); font-weight: 700;
  border: 1.5px solid var(--linea); border-radius: 999px; padding: 3px 12px;
}

/* ── Cuerpo ── */
main { max-width: 760px; margin: 0 auto; padding: 8px 20px 64px; }

h1 {
  font-family: var(--serif); font-size: clamp(34px, 6vw, 46px);
  line-height: 1.08; letter-spacing: -0.5px; margin: 20px 0 6px; text-wrap: balance;
}
.updated {
  margin: 0 0 34px; color: var(--tinta-3); font-size: 14px;
}
h2 {
  font-size: 22px; font-weight: 700; letter-spacing: -0.3px;
  margin: 44px 0 12px; padding-top: 22px; border-top: 1px solid var(--linea);
}
h3 { font-size: 17.5px; font-weight: 700; margin: 26px 0 8px; color: var(--tinta); }
p  { margin: 0 0 16px; }
a  { color: var(--verde); }

ul { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 7px; }

strong { font-weight: 700; }

/* Las tablas de proveedores son lo que más se consulta de un aviso. En un
   teléfono se desbordan, así que se les deja rodar en horizontal en vez de
   aplastar las columnas hasta que no se lean. */
.tabla { overflow-x: auto; margin: 0 0 20px; }
table {
  border-collapse: collapse; width: 100%; min-width: 480px;
  background: var(--tarjeta); border-radius: 12px; overflow: hidden;
  font-size: 15px;
}
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { background: var(--verde-b); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--tinta-2); }
tr:last-child td { border-bottom: 0; }

/* ── Portada ── */
main.home h1 { font-size: clamp(42px, 9vw, 68px); }
main.home { padding-top: 40px; }
.tarjetas { display: flex; flex-direction: column; gap: 10px; margin-top: 34px; }
.tarjetas a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 16px;
  padding: 18px 20px; text-decoration: none; color: var(--tinta);
}
.tarjetas a:hover { border-color: var(--verde); }
.tarjetas b { display: block; font-size: 17px; }
.tarjetas span { display: block; color: var(--tinta-2); font-size: 14.5px; margin-top: 2px; }
.tarjetas i { color: var(--verde); font-style: normal; font-size: 20px; }

/* ── Pie ── */
footer {
  max-width: 760px; margin: 0 auto; padding: 26px 20px 48px;
  border-top: 1px solid var(--linea); color: var(--tinta-3); font-size: 13.5px;
}
footer p { margin: 0 0 5px; }

/* ── Impresión ──
   Sin navegación, sin pie, sin colores de fondo: lo que se imprime de un aviso
   de privacidad es el texto, y quien lo imprime suele ser un abogado. */
@media print {
  .top nav, footer { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  main { max-width: none; padding: 0; }
  h2 { page-break-after: avoid; }
  table { min-width: 0; }
  a { color: #000; text-decoration: underline; }
}