/* Centro Hara — design system. Editorial cálido, minimalista. Claro + oscuro.
   Tipografía del sistema (sin Google Fonts → RGPD: no expone IPs del visitante). */
:root{
  color-scheme: light;
  /* Base cálida (hueso/crema) */
  --bg:        #F1ECE4;   /* fondo de app / lateral */
  --surface:   #FBF8F2;   /* panel principal */
  --card:      #FFFFFF;   /* tarjetas, campos elevados */
  --paper:     #FCF9F3;   /* lienzo del editor */
  --paper-ink: #2A2430;
  --text:      #2B2530;
  --muted:     #8B8390;
  --border:    #E7E0D5;

  /* Acento: violeta refinado (evoluciona el de marca) */
  --violet:      #6E5A9E;
  --violet-deep: #574682;
  --violet-soft: #ECE6F3;
  --violet-tint: #F6F2F9;
  --lavanda:     #B9A9D8;

  --primary:   var(--violet);
  --primary-fg:#ffffff;
  --accent:    var(--violet-soft);
  --danger:    #C05A4E;

  /* Etiquetas de sección del libro */
  --t-ini-bg:#E7E9F5; --t-ini-fg:#4A4E8C;
  --t-cie-bg:#F1EAD6; --t-cie-fg:#87692C;

  --radius:    18px;
  --radius-sm: 11px;
  --shadow:    0 10px 34px rgba(70,55,110,.09);
  --shadow-sm: 0 2px 10px rgba(70,55,110,.05);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:        #141219;
  --surface:   #1C1922;
  --card:      #26222F;
  --paper:     #201C28;
  --paper-ink: #E9E3F1;
  --text:      #EAE4F1;
  --muted:     #968DA6;
  --border:    #2E2A38;

  --violet:      #AD9BDC;
  --violet-deep: #C7B9EC;
  --violet-soft: #2C2542;
  --violet-tint: #221E30;
  --lavanda:     #C7B8E6;
  --danger:      #E28578;

  --t-ini-bg:#262B47; --t-ini-fg:#A9AFE6;
  --t-cie-bg:#332F1E; --t-cie-fg:#D2BD7C;

  --shadow:    0 12px 38px rgba(0,0,0,.45);
  --shadow-sm: 0 2px 12px rgba(0,0,0,.32);
}

*{ box-sizing:border-box; }
body{ margin:0; font-family:var(--font); background:var(--bg); color:var(--text);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease; }
h1,h2,h3{ font-family:var(--serif); font-weight:600; line-height:1.2; letter-spacing:-.01em; margin:0 0 .4em; }
a{ color:var(--violet); text-decoration:none; }

.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:24px; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer;
  background:var(--violet); color:#fff; border:none; padding:11px 18px; border-radius:var(--radius-sm);
  font-size:14px; font-weight:600; font-family:var(--font); transition:filter .15s, transform .12s, background .15s; }
.btn:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn.secundario{ background:var(--violet-soft); color:var(--violet-deep); }
.btn.secundario:hover{ filter:brightness(.98); }
.btn.peligro{ background:var(--danger); }
.btn:disabled{ opacity:.42; cursor:default; transform:none; filter:none; }

input,select,textarea{ width:100%; padding:11px 13px; border:1px solid var(--border);
  border-radius:var(--radius-sm); font-size:14px; font-family:var(--font); background:var(--card);
  color:var(--text); transition:border-color .15s, box-shadow .15s; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--violet);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--violet) 22%, transparent); }
label{ display:block; font-size:13px; font-weight:500; color:var(--muted); margin:12px 0 5px; }
::placeholder{ color:var(--muted); opacity:.7; }

table{ width:100%; border-collapse:collapse; font-size:14px; }
th,td{ text-align:left; padding:11px 10px; border-bottom:1px solid var(--border); }
th{ color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
tr:last-child td{ border-bottom:none; }

.fila{ display:flex; gap:14px; flex-wrap:wrap; } .fila>*{ flex:1; min-width:140px; }
.muted{ color:var(--muted); }
.pill{ display:inline-block; padding:3px 11px; border-radius:999px; font-size:12px; font-weight:500; color:#fff; }

/* Icono de línea inline */
.ic{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; flex:0 0 auto; }
.ic svg{ width:100%; height:100%; display:block; }