/* =========================
   Artycla UI - base.css
   ========================= */

:root{
  --bg: #f6f4ee;
  --panel: #ffffff;
  --muted: #6b7280;

  --border: rgba(17,24,39,.08);
  --shadow: 0 10px 30px rgba(17,24,39,.08);

  --olive: #7f8f59;
  --olive-100: #e6ecd8;
  --olive-200: #d6e0c1;

  --brown: #7b5a3a;
  --sand: #efe6d6;

  --danger: #b42318;
  --danger-100:#fdecec;

  --ok: #1a7f37;
  --ok-100:#e9f7ee;

  --radius: 18px;
  --radius-sm: 12px;

  --sidebar-w: 280px;
  --topbar-h: 72px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#111827;
  background: var(--bg);
}

.btn.btn-link{
  height:34px;
  padding:0 10px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
}
.btn.btn-link .material-symbols-outlined{
  font-size:18px;
  line-height:1;
}

/* Botón desactivar (acción secundaria) */
.btn.btn-link.btn-deactivate{
  color:#b42318; /* rojo suave */
}

.btn.btn-link.btn-deactivate:hover{
  background:#fff1f0;
  text-decoration:none;
}

.btn.btn-link.btn-deactivate .material-symbols-outlined{
  font-size:18px;
  vertical-align:-4px;
}



/* =========================
   Shell
   ========================= */
.app-shell{
  min-height:100vh;
  display:flex;
}

.main-area{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}

/* =========================
   Topbar
   ========================= */
.topbar{
  height: var(--topbar-h);
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 18px;
  position:sticky;
  top:0;
  z-index:10;
}

.sidebar-open{
  border:1px solid var(--border);
  background:#fff;
  border-radius: 14px;
  width:44px;height:44px;
  display:grid;
  place-items:center;
  cursor:pointer;
}

.topbar-title{
  font-weight:800;
  font-size:18px;
}

.topbar-right{
  color: var(--muted);
  font-weight:600;
}

/* =========================
   Container
   ========================= */
.container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 22px 80px;
  width:100%;
}

/* =========================
   Typography / blocks
   ========================= */
h1{ font-size:44px; margin:10px 0 6px; letter-spacing:-.02em; }
.subtitle{ color:var(--muted); margin:0 0 18px; }

/* =========================
   Buttons / links
   ========================= */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 14px;
  border:1px solid transparent;
  text-decoration:none;
  font-weight:800;
  cursor:pointer;
}

.btn-primary{
  background: var(--olive-100);
  border-color: rgba(127,143,89,.35);
  color:#1f2a1a;
}
.btn-primary:hover{
  background: var(--olive-200);
}

.btn-ghost{
  background: transparent;
  border-color: transparent;
  color:#111827;
}
.btn-ghost:hover{
  background:#f3f4f6;
  border-color: var(--border);
}

/* =========================
   Tables
   ========================= */
.table-wrap{
  background:#fff;
  border:1px solid var(--border);
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(17,24,39,.06);
}

table{
  width:100%;
  border-collapse: collapse;
}

thead th{
  text-align:left;
  font-size:16px;
  padding: 14px 14px;
  background: rgba(243,244,246,.8);
  border-bottom: 1px solid var(--border);
}

tbody td{
  padding: 14px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

tbody tr:last-child td{ border-bottom:none; }

/* =========================
   Alerts & footer
   ========================= */
.alert{
  border-radius: 14px;
  padding: 12px 14px;
  border:1px solid var(--border);
  margin: 0 0 14px;
  background:#fff;
}
.alert-success{
  background: var(--ok-100);
  border-color: rgba(26,127,55,.25);
}
.alert-danger{
  background: var(--danger-100);
  border-color: rgba(180,35,24,.22);
}

.footer{
  margin-top: 26px;
  color: var(--muted);
}

/* =========================
   Screen reader only
   ========================= */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* =========================
   Artycla UI - Confirm Modal (global)
   ========================= */
.a-modal{ display:none; }
.a-modal.is-open{ display:block; }

.a-modal__backdrop{
  position:fixed;
  inset:0;
  background: rgba(17,24,39,.35);
  z-index: 9998;
}

.a-modal__card{
  position:fixed;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 24px));
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 9999;
  padding: 14px 14px 12px;
}

.a-modal__head{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  margin-bottom: 12px;
}

.a-modal__icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: var(--danger-100);
  color: var(--danger);
  border: 1px solid rgba(180,35,24,.18);
}

.a-modal__title{
  font-weight: 900;
  font-size: 16px;
  letter-spacing: -.01em;
  margin: 2px 0 2px;
}

.a-modal__msg{
  font-size: 13px;
  color: var(--muted);
  line-height: 1.25;
}

.a-modal__msg{ white-space: pre-line; }


.a-modal__foot{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
}

/* Modal confirm - item destacado */
.a-modal__item{
  font-weight: 800;
  color: var(--danger); /* peligro */
}

.a-modal__sub{
  color: var(--muted);
  font-weight: 600;
}


/* bloquea scroll al abrir */
body.a-modal-open{ overflow:hidden; }

/* botón peligro, alineado a tu .btn */
.btn-danger{
  background: var(--danger-100);
  border-color: rgba(180,35,24,.22);
  color: var(--danger);
}
.btn-danger:hover{
  background:#fbdede;
}