/* ==========================================================================
   Enable Technologies · Panel de administración
   ========================================================================== */

/* Login / auth ------------------------------------------------------------- */
.auth-body {
  margin: 0; min-height: 100vh; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--color-dark), #2b2b2b); padding: var(--space-5);
  font-family: var(--font-sans); color: var(--color-text);
}
.auth-shell { width: 100%; max-width: 440px; }
.auth-card { background: #fff; border-radius: var(--radius-lg); padding: var(--space-7); box-shadow: var(--shadow-lg); }
.auth-brand { margin-bottom: var(--space-6); }
.auth-card h1 { font-size: var(--fs-2xl); margin-bottom: var(--space-5); color: var(--color-dark); }
.auth-card .form-group { margin-bottom: var(--space-4); }
.auth-footer { text-align: center; margin-top: var(--space-5); }
.auth-footer a { color: rgba(255,255,255,.7); }
.auth-footer a:hover { color: #fff; }

/* Shell -------------------------------------------------------------------- */
.admin-body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-body); color: var(--color-text); background: var(--color-surface); }
.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar {
  width: 260px; flex-shrink: 0; background: var(--color-dark); color: #fff;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.admin-brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5); color: #fff; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.1); }
.admin-brand small { text-transform: uppercase; letter-spacing: 1.5px; font-size: .65rem; color: rgba(255,255,255,.55); }
.admin-brand .brand-mark { background: var(--color-primary); }
.admin-nav { flex: 1; overflow-y: auto; padding: var(--space-4) 0; }
.admin-nav ul { list-style: none; margin: 0; padding: 0; }
.admin-nav a { display: block; padding: 12px var(--space-5); color: rgba(255,255,255,.78); font-weight: 600; font-size: var(--fs-sm); border-left: 3px solid transparent; }
.admin-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.admin-nav a[aria-current="page"] { background: rgba(224,27,34,.16); color: #fff; border-left-color: var(--color-primary); }
.admin-sidebar-footer { padding: var(--space-5); border-top: 1px solid rgba(255,255,255,.1); }
.admin-sidebar-footer a { color: rgba(255,255,255,.6); font-size: var(--fs-sm); }

.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  background: #fff; border-bottom: 1px solid var(--color-border); padding: var(--space-4) var(--space-6); position: sticky; top: 0; z-index: 20;
}
.admin-menu-toggle { display: none; background: none; border: 0; font-size: 1.5rem; cursor: pointer; color: var(--color-dark); }
.admin-user { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; font-weight: 600; color: var(--color-dark); }
.admin-user form { margin: 0; }
.admin-content { padding: var(--space-6); flex: 1; }

/* Encabezados de página ---------------------------------------------------- */
.admin-page-head { margin-bottom: var(--space-6); }
.admin-page-head h1 { margin: 0 0 var(--space-1); font-size: var(--fs-2xl); }
.admin-page-head p { margin: 0; color: var(--color-text); }
.admin-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }

/* KPI ---------------------------------------------------------------------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
.kpi { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); transition: var(--transition); }
.kpi:hover { box-shadow: var(--shadow-sm); border-color: var(--color-primary); }
.kpi-value { font-size: var(--fs-3xl); font-weight: 800; color: var(--color-dark); line-height: 1; }
.kpi-label { font-size: var(--fs-sm); color: var(--color-text); }

/* Tarjetas ----------------------------------------------------------------- */
.admin-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); margin-bottom: var(--space-5); }
.admin-card h2 { font-size: var(--fs-xl); margin-bottom: var(--space-4); }
.admin-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.admin-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }

/* Tablas ------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.admin-table th, .admin-table td { padding: var(--space-4); text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.admin-table th { background: var(--color-surface); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-strong); }
.admin-table tbody tr:hover { background: #FAFAFA; }
.admin-table .cell-sub { display: block; font-size: var(--fs-xs); }
.admin-table .actions { white-space: nowrap; }
.admin-table .actions form { display: inline; }
.admin-table td.actions { display: flex; gap: var(--space-2); align-items: center; }

/* Botones ------------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: inherit; font-weight: 600; line-height: 1; padding: 12px 18px; border: 2px solid transparent; border-radius: var(--radius); cursor: pointer; transition: var(--transition); font-size: var(--fs-sm); }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); color: #fff; }
.btn-outline { background: #fff; color: var(--color-dark); border-color: var(--color-border-strong); }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-ghost { background: transparent; color: var(--color-text-strong); border-color: transparent; }
.btn-ghost:hover { color: var(--color-primary); }
.btn-danger { background: var(--color-error); color: #fff; }
.btn-danger:hover { background: #A31D1D; color: #fff; }
.btn-xs { padding: 7px 11px; font-size: var(--fs-xs); }
.btn-sm { padding: 10px 15px; }
.btn-block { width: 100%; }
.btn-block + .btn-block { margin-top: var(--space-3); }

/* Formularios -------------------------------------------------------------- */
/* Reutiliza estilos base de .form-group del sitio; se redefinen por si no se cargan */
.form-group { margin-bottom: var(--space-4); display: flex; flex-direction: column; text-align: left; }
.form-group label { font-weight: 600; color: var(--color-dark); margin-bottom: var(--space-2); font-size: var(--fs-sm); }
.form-group input, .form-group textarea, .form-group select {
  font-family: inherit; font-size: var(--fs-base); color: var(--color-dark);
  padding: 11px 13px; border: 1px solid var(--color-border-strong); border-radius: var(--radius); background: #fff;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 3px rgba(224,27,34,.12); }
.form-group input[aria-invalid="true"] { border-color: var(--color-error); }
.field-error { color: var(--color-error); font-size: var(--fs-sm); margin-top: var(--space-1); }
.admin-form { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); }
.admin-form h2 { font-size: var(--fs-xl); margin: var(--space-5) 0 var(--space-4); }
.admin-form h2:first-child { margin-top: 0; }
.admin-fieldset { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-5); margin: 0 0 var(--space-5); }
.admin-fieldset legend { font-weight: 700; color: var(--color-dark); padding: 0 var(--space-2); }
.checkbox-group { justify-content: flex-end; }
.checkbox { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--color-dark); }
.checkbox input { width: auto; }
.form-actions { display: flex; gap: var(--space-4); align-items: center; }
.form-inline { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.admin-search { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); max-width: 520px; }
.admin-search input { flex: 1; padding: 11px 13px; border: 1px solid var(--color-border-strong); border-radius: var(--radius); font-family: inherit; }
.admin-thumb { max-width: 220px; border-radius: var(--radius); border: 1px solid var(--color-border); margin-top: var(--space-3); }

/* Pills / estados ---------------------------------------------------------- */
.pill { display: inline-block; font-size: var(--fs-xs); font-weight: 700; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .5px; }
.pill-on { background: var(--color-success-bg); color: var(--color-success); }
.pill-off { background: var(--color-error-bg); color: var(--color-error); }
.pill-draft { background: #FFF8E1; color: #8D6E00; }
.pill-nuevo { background: rgba(224,27,34,.12); color: var(--color-primary); }
.pill-leido { background: #E3F2FD; color: var(--color-info); }
.pill-respondido { background: var(--color-success-bg); color: var(--color-success); }

/* Alertas ------------------------------------------------------------------ */
.alert { border-radius: var(--radius); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); font-weight: 600; }
.alert-success { background: var(--color-success-bg); color: var(--color-success); border: 1px solid #A5D6A7; }
.alert-error { background: var(--color-error-bg); color: var(--color-error); border: 1px solid #EF9A9A; }

/* Listas ------------------------------------------------------------------- */
.mini-list { list-style: none; padding: 0; margin: 0; }
.mini-list li { border-bottom: 1px solid var(--color-border); }
.mini-list li:last-child { border-bottom: 0; }
.mini-list a { display: flex; flex-direction: column; padding: var(--space-3) 0; color: var(--color-dark); }
.mini-list a span { font-size: var(--fs-sm); color: var(--color-text); }
.mini-list a time { font-size: var(--fs-xs); color: var(--color-text); opacity: .7; }
.detail-list { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.detail-list dt { font-weight: 700; color: var(--color-dark); }
.detail-list dd { margin: 0; }
.detail-subject { font-size: var(--fs-lg); }
.detail-message { background: var(--color-surface); border-radius: var(--radius); padding: var(--space-5); margin-bottom: var(--space-4); }

/* Paginación --------------------------------------------------------------- */
.pagination { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-top: var(--space-6); }
.page-link { display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-dark); font-weight: 600; font-size: var(--fs-sm); background: #fff; }
.page-link.is-current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.page-dots { align-self: center; }

/* Responsive --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-grid-2, .admin-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .admin-sidebar {
    position: fixed; left: 0; top: 0; z-index: 40; transform: translateX(-100%);
    transition: transform 250ms ease; box-shadow: var(--shadow-lg);
  }
  .admin-sidebar.is-open { transform: translateX(0); }
  .admin-menu-toggle { display: block; }
  .admin-content { padding: var(--space-4); }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .detail-list { grid-template-columns: 1fr; }
}