/* ═══════════════════════════════════════════════════════════════
   TOPSIDE — Panel de administración personalizado
   Hace el wp-admin más bonito y cómodo para trabajar
   ═══════════════════════════════════════════════════════════════ */

/* Variables */
:root {
  --ts-negro: #0D0D0D;
  --ts-amarillo: #F2C230;
  --ts-borde: #e0e0e0;
  --ts-gris: #f5f5f5;
}

/* ── MENÚ LATERAL ── */
#adminmenu, #adminmenuback, #adminmenuwrap {
  background: #0D0D0D !important;
}
#adminmenu a { color: #CFCFCF !important; font-size: 13px !important; }
#adminmenu .wp-menu-name { padding-left: 8px !important; }
#adminmenu .wp-has-current-submenu .wp-menu-arrow,
#adminmenu .wp-has-current-submenu .wp-menu-arrow div,
#adminmenu li.current a.menu-top,
#adminmenu li.wp-has-current-submenu a.menu-top { background: #F2C230 !important; color: #0D0D0D !important; font-weight: 700 !important; }
#adminmenu li a:hover,
#adminmenu li.menu-top:hover { background: #1a1a1a !important; color: #F2C230 !important; }
#adminmenu .wp-submenu { background: #161616 !important; }
#adminmenu .wp-submenu a { color: #AAA !important; }
#adminmenu .wp-submenu a:hover,
#adminmenu .wp-submenu li.current a { color: #F2C230 !important; }
#adminmenu #adminmenu-separator { background: #222 !important; }

/* Icono TopSide en el menú */
#toplevel_page_topside-clientes .wp-menu-image::before { font-size: 18px !important; }

/* ── BARRA SUPERIOR (toolbar) ── */
#wpadminbar { background: #0D0D0D !important; }
#wpadminbar .ab-top-menu > li > .ab-item,
#wpadminbar .ab-top-menu > li > .ab-item:before,
#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default li a { color: #CCC !important; }
#wpadminbar .ab-top-menu > li:hover > .ab-item,
#wpadminbar .ab-top-menu > li.hover > .ab-item { background: #1a1a1a !important; color: #F2C230 !important; }
#wpadminbar #wp-admin-bar-site-name > .ab-item::before { color: #F2C230 !important; }

/* ── ÁREA PRINCIPAL ── */
#wpcontent, #wpfooter { background: #f0f0f0 !important; }
#wpbody-content { padding-bottom: 40px !important; }

/* ── CABECERA DE PÁGINA ── */
.wrap h1.wp-heading-inline,
.wrap h1 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #0D0D0D !important;
  border-bottom: 3px solid #F2C230;
  padding-bottom: 10px !important;
  margin-bottom: 24px !important;
  display: inline-block !important;
}

/* ── BOTONES ── */
.button-primary {
  background: #F2C230 !important;
  border-color: #c9a227 !important;
  color: #0D0D0D !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border-radius: 4px !important;
}
.button-primary:hover { background: #e0b020 !important; border-color: #b89018 !important; }
.button-secondary, .button { border-radius: 4px !important; }

/* ── TABLAS DE LISTADO ── */
.wp-list-table { border-radius: 6px !important; overflow: hidden !important; box-shadow: 0 2px 8px rgba(0,0,0,.06) !important; }
.wp-list-table thead th { background: #0D0D0D !important; color: #fff !important; font-weight: 600 !important; border: none !important; }
.wp-list-table thead th a { color: #F2C230 !important; }
.wp-list-table tbody tr:hover td { background: #fffbf0 !important; }
.wp-list-table tbody td { border-bottom: 1px solid #f0f0f0 !important; vertical-align: middle !important; padding: 12px 10px !important; }

/* ── METABOXES Y CARDS ── */
.postbox { border-radius: 6px !important; border: 1px solid #e0e0e0 !important; box-shadow: 0 2px 6px rgba(0,0,0,.04) !important; }
.postbox .postbox-header { background: #fafafa !important; border-bottom: 1px solid #e8e8e8 !important; border-radius: 6px 6px 0 0 !important; }
.postbox h2, .postbox-header h2 { font-size: 14px !important; font-weight: 700 !important; }

/* ── PANEL TOPSIDE CLIENTES ── */
.ts-wrap h1 { border-bottom: 3px solid #F2C230 !important; padding-bottom: 10px !important; }
.ts-card {
  background: #fff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
}
.ts-tab {
  border-radius: 4px 4px 0 0 !important;
  font-size: 13.5px !important;
  padding: 10px 20px !important;
}
.ts-tab.active {
  background: #F2C230 !important;
  color: #0D0D0D !important;
  border-bottom-color: #F2C230 !important;
}
.ts-btn {
  background: #F2C230 !important;
  color: #0D0D0D !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  transition: background .2s !important;
}
.ts-btn:hover { background: #e0b020 !important; }
.ts-btn-sm { border-radius: 4px !important; }
.ts-btn-danger { border-radius: 4px !important; }
.ts-table th { background: #0D0D0D !important; color: #fff !important; }
.ts-table tr:hover td { background: #fffbf0 !important; }
.ts-badge-green { background: #e6f4ea !important; color: #1e7e34 !important; border-radius: 20px !important; }
.ts-badge-red { background: #fce8e8 !important; color: #a00 !important; border-radius: 20px !important; }
.ts-badge-yellow { background: #fff8e1 !important; color: #a07000 !important; border-radius: 20px !important; }

/* ── EDITOR DE POSTS ── */
#post-body { background: #fff !important; border-radius: 6px !important; }
#titlediv #title { font-size: 20px !important; border-radius: 4px !important; border: 1px solid #ddd !important; }
#titlediv #title:focus { border-color: #F2C230 !important; box-shadow: 0 0 0 2px rgba(242,194,48,.2) !important; }

/* ── NOTIFICACIONES ── */
.notice-success { border-left-color: #F2C230 !important; background: #fffbf0 !important; }
.notice-error { border-left-color: #dc3545 !important; }
.updated { border-left-color: #F2C230 !important; }

/* ── MENÚ COLAPSADO ── */
.auto-fold #adminmenu li.current a.menu-top,
.auto-fold #adminmenu li.wp-has-current-submenu a.menu-top { background: #F2C230 !important; }

/* ── PANTALLA DE LOGIN ── */
body.login { background: #0D0D0D !important; }
body.login #login h1 a { background-image: none !important; background-color: #F2C230 !important; border-radius: 50% !important; width: 60px !important; height: 60px !important; }
body.login form { border-radius: 8px !important; box-shadow: 0 8px 24px rgba(0,0,0,.3) !important; }
body.login input[type="submit"] { background: #F2C230 !important; border-color: #c9a227 !important; color: #0D0D0D !important; font-weight: 700 !important; text-shadow: none !important; }
body.login .button-primary:hover { background: #e0b020 !important; }