/* ====== Base minimalista con buen UX/UI ====== */
:root{
  /* Paleta (aprox. de tus CMYK) */
  --primary:#FF7800;      /* Primario */
  --primary-ink:#7a3a00;  /* Texto sobre fondos cálidos */
  --secondary:#FA8CFA;    /* Secundario */
  --bg:#F8FAFC;           /* Fondo app */
  --surface:#FFFFFF;      /* Tarjetas / tablas / formularios */
  --ink:#0F172A;          /* Texto principal */
  --muted:#64748B;        /* Texto secundario */
  --line:#E2E8F0;         /* Bordes suaves */
  --focus: rgba(255,120,0,.45);

  --radius:14px;
  --radius-sm:10px;
  --shadow:0 6px 18px rgba(15,23,42,.06);
  --shadow-sm:0 3px 10px rgba(15,23,42,.05);

  --space-1:6px;
  --space-2:10px;
  --space-3:14px;
  --space-4:18px;
  --space-5:24px;
  --space-6:32px;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, "Noto Sans", "Helvetica Neue", "Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); background:var(--bg); color:var(--ink);
  line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Tipografía y utilidades */
h1,h2,h3{margin:0 0 var(--space-4)}
h1{font-size:1.55rem}
h2{font-size:1.25rem}
p{margin:0 0 var(--space-3); color:var(--muted)}
small, .hint{color:var(--muted); font-size:.875rem}

a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1100px; margin:0 auto; padding:0 var(--space-5)}
.section{padding:var(--space-6) 0}

/* ====== Topbar minimal ====== */
.topbar{
  position:sticky; top:0; z-index:10;
  background:rgba(255,255,255,.85); backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar .container{display:flex; gap:var(--space-3); align-items:center; height:58px}
.nav{display:flex; gap:var(--space-3); align-items:center; width:100%}
.nav a{padding:8px 10px; border-radius:8px; color:var(--ink)}
.nav a:hover{background:#F1F5F9}
.flex-spacer{flex:1}

/* ====== Tarjetas / layout ====== */
.grid{display:grid; gap:var(--space-4); grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--space-5); box-shadow:var(--shadow-sm);
  transition:transform .08s ease, box-shadow .12s ease;
  display:block; color:var(--ink); font-weight:600;
}
.card:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
@media (max-width:1100px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:820px){ .grid{grid-template-columns:1fr} }

/* ====== Tabla accesible ====== */
.table-wrap{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:auto; box-shadow:var(--shadow-sm)}
table{width:100%; border-collapse:collapse; min-width:900px}
thead th{
  text-align:left; font-weight:700; font-size:.9rem; color:#0b0b0b;
  background:linear-gradient(0deg, rgba(250,140,250,.08), rgba(250,140,250,.08));
  padding:12px 14px; border-bottom:1px solid var(--line);
}
tbody td{padding:12px 14px; border-bottom:1px solid var(--line)}
tbody tr:hover{background:#F8FAFF}
td.right{text-align:right}

/* ====== Formularios claros ====== */
.form{display:grid; gap:var(--space-4); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--space-5); box-shadow:var(--shadow-sm)}
label{display:grid; gap:8px; font-size:.95rem; color:var(--ink)}
input, select, textarea{
  width:100%; padding:12px 12px; border:1px solid var(--line); border-radius:12px; background:#fff;
  font:inherit; color:var(--ink);
}
input::placeholder, textarea::placeholder{color:#9AA4B2}
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--focus); outline-offset:1px; border-color:transparent; box-shadow:0 0 0 4px rgba(255,120,0,.12);
}
.form-actions{display:flex; gap:var(--space-3); justify-content:flex-end}

/* ====== Botones ====== */
button, .btn{
  appearance:none; border:0; border-radius:12px; padding:10px 14px; cursor:pointer; font:inherit;
  background:var(--primary); color:#fff; font-weight:600; box-shadow:var(--shadow-sm);
  transition:transform .06s ease, box-shadow .12s ease, opacity .12s ease;
}
button:hover,.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
button:active,.btn:active{transform:translateY(0)}
.btn.secondary{background:#0B1220; color:#fff}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.btn.danger{background:#E11D48}

/* ====== Alertas ====== */
.alert{
  border-radius:12px; padding:12px 14px; background:#FFF7ED; color:#7C2D12; border:1px solid #FED7AA;
}
.alert.danger{background:#FEF2F2; color:#7F1D1D; border-color:#FECACA}

/* ====== Login card ====== */
.login{display:grid; place-items:center; min-height:100vh}
.login-card{
  width:min(400px, 92vw); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--space-5); box-shadow:var(--shadow);
}
.login-card h1{font-size:1.35rem; margin-bottom:var(--space-4)}

/* ====== Contenido ====== */
main.container{padding:var(--space-6) var(--space-5)}
.actions{display:flex; gap:var(--space-3); align-items:center; margin-bottom:var(--space-4)}
.actions form{display:flex; gap:var(--space-2)}
input[type="search"]{min-width:320px}

/* ====== Accesibilidad foco vínculos ====== */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px; border-radius:10px;
}

/* ====== Helpers ====== */
.hidden{display:none !important}
.muted{color:var(--muted)}
.center{display:grid; place-items:center}
.right{margin-left:auto}