/* =============================================================
   plugins/redmine_theme_moderno/assets/stylesheets/theme_moderno.css
   Alcance: Issue detail, secciones colapsables, formularios, login.
   El resto de la UI usa el CSS nativo de Redmine sin modificacion.
   ============================================================= */

:root {
  --gm-primary:       #1e293b;
  --gm-accent:        #2563eb;
  --gm-accent-hover:  #1d4ed8;
  --gm-accent-light:  #dbeafe;
  --gm-accent-border: #93c5fd;
  --gm-bg:            #f1f5f9;
  --gm-surface:       #ffffff;
  --gm-border:        #e2e8f0;
  --gm-border-light:  #f1f5f9;
  --gm-text:          #1e293b;
  --gm-text-muted:    #64748b;
  --gm-text-light:    #94a3b8;
  --gm-success-bg:    #d1fae5;
  --gm-warning:       #d97706;
  --gm-warning-bg:    #fef3c7;
  --gm-danger:        #dc2626;
  --gm-danger-bg:     #fee2e2;
  --gm-radius:        8px;
  --gm-radius-sm:     5px;
  --gm-shadow:        0 1px 4px rgba(30,41,59,0.08);
  --gm-shadow-md:     0 4px 12px rgba(30,41,59,0.12);
  --gm-font:          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --gm-header-grad:   linear-gradient(135deg, #1e293b 0%, #2563eb 100%);
  --gm-sidebar-w:     220px;
}

/* ── ISSUE DETAIL ────────────────────────────────────────────── */
div.issue.details {
  background:var(--gm-surface) !important; border:1px solid var(--gm-border) !important;
  border-radius:var(--gm-radius) !important; box-shadow:var(--gm-shadow) !important;
  padding:14px 16px 12px !important; margin-bottom:10px !important;
}
div.issue.details h3, div.issue.details .subject h3 {
  font-size:18px !important; font-weight:700 !important; color:var(--gm-primary) !important;
  margin:0 0 10px 0 !important; line-height:1.3 !important;
  border-bottom:1px solid var(--gm-border) !important; padding-bottom:8px !important;
}
div.issue.details .attachments,
div.issue.details #attachments { display:none !important; }
p.expandall, .expandall { display:none !important; }

/* table.attributes y div.wiki: formato nativo de Redmine sin overrides */

div.issue.details div.description { margin-top:10px !important; padding-top:10px !important; border-top:1px solid var(--gm-border) !important; }
div.issue.details div.description h3.icon {
  font-size:11px !important; font-weight:700 !important; color:var(--gm-text-muted) !important;
  text-transform:uppercase !important; letter-spacing:0.06em !important; margin:0 0 8px 0 !important;
}

/* ── CUSTOM FIELDS GROUPS: formato nativo label negrita + value en linea ──
   Estructura real: fieldset.collapsible.custom-fields-groups
                     > div.splitcontent
                       > div.splitcontentleft / div.splitcontentright
                         > div.list_cf.cf_N.attribute
                           > div.label
                           > div.value (flex por Redmine nativo)          */
fieldset.custom-fields-groups div.attribute {
  display:flex !important;
  flex-direction:row !important;
  align-items:baseline !important;
  flex-wrap:wrap !important;
  gap:4px !important;
  margin-bottom:2px !important;
}
fieldset.custom-fields-groups div.attribute > div.label {
  display:inline !important;
  font-weight:bold !important;
  font-size:inherit !important;
  color:inherit !important;
  flex-shrink:0 !important;
  white-space:nowrap !important;
}
fieldset.custom-fields-groups div.attribute > div.value {
  display:inline !important;
  font-weight:normal !important;
  font-size:inherit !important;
  color:inherit !important;
  flex:1 !important;
}

/* ── TITULO DEL ISSUE CON CONTEXTUAL EN LA MISMA LINEA ─────────*/
.gm-issue-title-row {
  display:flex !important; align-items:center !important;
  justify-content:space-between !important; gap:12px !important;
  margin-bottom:6px !important; flex-wrap:wrap !important;
}
.gm-issue-title-row h2 { flex:1 !important; margin:0 !important; min-width:0 !important; }
.gm-issue-title-row .contextual { float:none !important; margin-bottom:0 !important; flex-shrink:0 !important; }

/* ── BARRA GLOBAL COLAPSAR/EXPANDIR ──────────────────────────── */
#gm-global-toolbar {
  display:flex !important; align-items:center !important;
  justify-content:flex-end !important; margin-bottom:8px !important; gap:6px !important;
}
#gm-toggle-all {
  background:var(--gm-surface) !important; border:1px solid var(--gm-border) !important;
  border-radius:var(--gm-radius-sm) !important; color:var(--gm-text-muted) !important;
  font-size:11px !important; font-weight:600 !important; padding:5px 14px !important;
  cursor:pointer !important; transition:all 0.15s !important;
  display:flex !important; align-items:center !important; gap:5px !important;
  font-family:var(--gm-font) !important;
}
#gm-toggle-all:hover { background:var(--gm-accent-light) !important; border-color:var(--gm-accent-border) !important; color:var(--gm-accent) !important; }

/* ── SECCIONES COLAPSABLES ───────────────────────────────────── */
.gm-section {
  background:var(--gm-surface) !important; border:1px solid var(--gm-border) !important;
  border-radius:var(--gm-radius) !important; box-shadow:var(--gm-shadow) !important;
  margin-bottom:7px !important; overflow:hidden !important; transition:box-shadow 0.15s !important;
}
.gm-section:hover { box-shadow:var(--gm-shadow-md) !important; }
.gm-section-header {
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  padding:8px 14px !important; background:#f8fafc !important;
  border-bottom:1px solid var(--gm-border) !important; cursor:pointer !important;
  user-select:none !important; transition:background 0.15s !important; min-height:36px !important;
}
.gm-section-header:hover { background:#f1f5f9 !important; }
.gm-section.gm-collapsed .gm-section-header { border-bottom:none !important; }
.gm-section-title {
  font-size:11px !important; font-weight:700 !important; color:var(--gm-primary) !important;
  text-transform:uppercase !important; letter-spacing:0.07em !important;
  display:flex !important; align-items:center !important; gap:8px !important;
}
.gm-section-title::before {
  content:'' !important; display:inline-block !important; width:3px !important; height:14px !important;
  background:var(--gm-header-grad) !important; border-radius:2px !important; flex-shrink:0 !important;
}
.gm-section-meta { font-size:11px !important; color:var(--gm-text-light) !important; font-weight:400 !important; margin-left:4px !important; }
.gm-section-header-right {
  display:flex !important; align-items:center !important; gap:8px !important; flex-shrink:0 !important;
}
.gm-section-contextual {
  float:none !important; margin:0 !important;
  display:flex !important; align-items:center !important; gap:4px !important;
}
.gm-section-contextual a {
  font-size:11px !important; font-weight:600 !important;
  padding:3px 10px !important; border-radius:var(--gm-radius-sm) !important;
  border:1px solid var(--gm-accent-border) !important;
  background:var(--gm-accent-light) !important; color:var(--gm-accent) !important;
  transition:all 0.15s !important; text-decoration:none !important;
  display:inline-flex !important; align-items:center !important; white-space:nowrap !important;
}
.gm-section-contextual a:hover {
  background:var(--gm-accent) !important; color:white !important;
  border-color:var(--gm-accent) !important; text-decoration:none !important;
}
.gm-toggle-icon {
  width:18px !important; height:18px !important; display:flex !important;
  align-items:center !important; justify-content:center !important;
  color:var(--gm-text-muted) !important; transition:transform 0.2s !important;
  font-size:10px !important; font-style:normal !important;
  background:rgba(30,41,59,0.06) !important; border-radius:4px !important;
}
.gm-section.gm-collapsed .gm-toggle-icon { transform:rotate(-90deg) !important; }
.gm-section-body { padding:10px 14px !important; overflow:hidden !important; }
.gm-section.gm-collapsed .gm-section-body { display:none !important; }
.gm-badge {
  background:var(--gm-accent-light) !important; color:var(--gm-accent) !important;
  font-size:10px !important; font-weight:700 !important; padding:1px 6px !important;
  border-radius:10px !important; border:1px solid var(--gm-accent-border) !important;
}

/* ── JOURNALS ────────────────────────────────────────────────── */
div.journal {
  background:var(--gm-surface) !important; border:1px solid var(--gm-border) !important;
  border-radius:var(--gm-radius) !important; padding:10px 14px !important;
  margin-bottom:7px !important; font-size:12px !important;
}
div.journal.private-notes { border-left:3px solid var(--gm-warning) !important; background:#fffbeb !important; }
div.journal h4 { font-size:12px !important; font-weight:600 !important; color:var(--gm-primary) !important; margin:0 0 6px 0 !important; }
div.journal ul.details {
  background:#f8fafc !important; border-radius:var(--gm-radius-sm) !important;
  padding:6px 10px !important; margin:6px 0 !important;
  border:1px solid var(--gm-border) !important; list-style:none !important;
}
div.journal ul.details li { font-size:11px !important; color:var(--gm-text-muted) !important; padding:2px 0 !important; border-bottom:1px solid var(--gm-border-light) !important; }
div.journal ul.details li:last-child { border-bottom:none !important; }

/* ── FICHEROS ────────────────────────────────────────────────── */
.gm-section-body .attachments p,
.gm-section-body > p {
  display:flex !important; align-items:center !important; gap:8px !important;
  font-size:12px !important; padding:5px 0 !important;
  border-bottom:1px solid var(--gm-border-light) !important; margin:0 !important; color:var(--gm-text) !important;
}
.gm-section-body .attachments p:last-child,
.gm-section-body > p:last-child { border-bottom:none !important; }
.gm-section-body .attachments p a,
.gm-section-body > p a { font-weight:500 !important; color:var(--gm-accent) !important; }

/* ── RELACIONES ──────────────────────────────────────────────── */
#relations table, #issue_tree table { width:100% !important; font-size:12px !important; border-collapse:collapse !important; }
#relations table td, #relations table th,
#issue_tree table td, #issue_tree table th {
  padding:5px 8px !important; border-bottom:1px solid var(--gm-border-light) !important; color:var(--gm-text);
}
#relations table tr:last-child td, #issue_tree table tr:last-child td { border-bottom:none !important; }

/* ── CONTEXTUAL ──────────────────────────────────────────────── */
div.issue.details .contextual,
.gm-issue-title-row .contextual,
.gm-section-header .contextual {
  float:right !important; display:flex !important; align-items:center !important;
  gap:6px !important; flex-wrap:wrap !important; margin-bottom:8px !important;
}
div.issue.details .contextual a,
div.issue.details .contextual input[type="submit"],
.gm-issue-title-row .contextual a,
.gm-issue-title-row .contextual input[type="submit"] {
  font-size:12px !important; font-weight:500 !important; padding:5px 12px !important;
  border-radius:var(--gm-radius-sm) !important; border:1px solid var(--gm-border) !important;
  background:var(--gm-surface) !important; color:var(--gm-text) !important;
  transition:all 0.15s !important; text-decoration:none !important; cursor:pointer !important;
  display:inline-flex !important; align-items:center !important; gap:4px !important;
}
div.issue.details .contextual a:hover,
div.issue.details .contextual input[type="submit"]:hover,
.gm-issue-title-row .contextual a:hover,
.gm-issue-title-row .contextual input[type="submit"]:hover {
  background:var(--gm-accent-light) !important; border-color:var(--gm-accent-border) !important;
  color:var(--gm-accent) !important; text-decoration:none !important;
}
.gm-issue-title-row .contextual { float:none !important; margin-bottom:0 !important; flex-shrink:0 !important; }

/* ── OTHER-FORMATS ───────────────────────────────────────────── */
p.other-formats {
  text-align:right !important; font-size:11px !important;
  color:var(--gm-text-muted) !important; margin:8px 0 4px 0 !important; padding:0 !important;
}
p.other-formats a { font-size:11px !important; color:var(--gm-text-muted) !important; }
p.other-formats a:hover { color:var(--gm-accent) !important; }

/* ── CUSTOM FIELDS GROUPS: encabezado h4 ─────────────────────── */
h4.custom-fields-groups {
  font-size:11px !important; font-weight:700 !important;
  color:var(--gm-text-muted) !important;
  text-transform:uppercase !important; letter-spacing:0.06em !important;
  margin:8px 0 4px 0 !important; padding:4px 8px !important;
  background:var(--gm-bg) !important;
  border:1px solid var(--gm-border) !important;
  border-radius:var(--gm-radius-sm) !important;
  cursor:pointer !important;
}
h4.custom-fields-groups:hover { background:var(--gm-accent-light) !important; color:var(--gm-accent) !important; }

/* ── FORMULARIOS ─────────────────────────────────────────────── */
#issue-form input[type="text"], #issue-form input[type="email"],
#issue-form input[type="password"], #issue-form input[type="url"],
#issue-form input[type="search"], #issue-form input[type="number"],
#issue-form input[type="tel"],  #issue-form input[type="date"],
#issue-form select, #issue-form textarea {
  font-family:var(--gm-font) !important;
  color:var(--gm-text) !important;
  background:var(--gm-surface) !important;
  border:1px solid var(--gm-border) !important;
  border-radius:var(--gm-radius-sm) !important;
}
#issue-form input[type="text"]:focus, #issue-form select:focus,
#issue-form textarea:focus {
  border-color:var(--gm-accent) !important;
  box-shadow:0 0 0 3px rgba(37,99,235,0.12) !important;
}
#issue-form label, .splitcontent label {
  color:var(--gm-text-muted) !important; font-weight:600 !important; font-size:12px !important;
}
#issue-form table td, #issue-form table th {
  color:var(--gm-text) !important; vertical-align:middle !important;
}
#issue-form .splitcontent td { vertical-align:middle !important; padding:4px 6px !important; }
#filters-table td, #query_form td { vertical-align:middle !important; padding:3px 4px !important; }
#filters-table input[type="text"], #filters-table select,
#query_form input[type="text"], #query_form select {
  color:var(--gm-text) !important; background:var(--gm-surface) !important;
}
#issue-form input[type="submit"], #issue-form button[type="submit"] {
  background:var(--gm-header-grad) !important; color:white !important;
  border:none !important; border-radius:var(--gm-radius-sm) !important;
  padding:7px 16px !important; font-size:13px !important;
  font-weight:600 !important; cursor:pointer !important; transition:opacity 0.15s !important;
}
#issue-form input[type="submit"]:hover,
#issue-form button[type="submit"]:hover { opacity:0.88 !important; }
#issue-form a.cancel, #issue-form input.cancel {
  background:transparent !important; color:var(--gm-text-muted) !important;
  border:1px solid var(--gm-border) !important; padding:6px 14px !important;
  border-radius:var(--gm-radius-sm) !important; font-size:12px !important;
}

/* ── LOGIN MODERNO ───────────────────────────────────────────── */
body.controller-account.action-login { background:var(--gm-header-grad) !important; min-height:100vh !important; }
body.controller-account.action-login #wrapper { background:transparent !important; }
body.controller-account.action-login #main { justify-content:center !important; align-items:center !important; min-height:calc(100vh - 80px) !important; flex-direction:column !important; }
body.controller-account.action-login #content { width:100% !important; max-width:420px !important; order:1 !important; }
body.controller-account.action-login #sidebar { display:none !important; }
body.controller-account.action-login #login-form,
body.controller-account.action-login .box { background:var(--gm-surface) !important; border:none !important; border-radius:14px !important; box-shadow:0 20px 60px rgba(0,0,0,0.35) !important; padding:32px !important; margin:0 !important; }
body.controller-account.action-login #login-form h2,
body.controller-account.action-login .box h2 { font-size:22px !important; font-weight:700 !important; color:var(--gm-primary) !important; text-align:center !important; margin:0 0 24px 0 !important; }
body.controller-account.action-login label { color:var(--gm-text-muted) !important; font-size:12px !important; font-weight:600 !important; text-transform:uppercase !important; letter-spacing:0.05em !important; display:block !important; margin-bottom:4px !important; }
body.controller-account.action-login input[type="text"],
body.controller-account.action-login input[type="password"] { width:100% !important; padding:10px 14px !important; font-size:14px !important; color:var(--gm-text) !important; background:var(--gm-bg) !important; border:1px solid var(--gm-border) !important; border-radius:var(--gm-radius) !important; transition:all 0.2s !important; margin-bottom:16px !important; }
body.controller-account.action-login input[type="text"]:focus,
body.controller-account.action-login input[type="password"]:focus { background:white !important; border-color:var(--gm-accent) !important; box-shadow:0 0 0 4px rgba(37,99,235,0.15) !important; }
body.controller-account.action-login input[type="submit"] { width:100% !important; padding:12px !important; font-size:15px !important; border-radius:var(--gm-radius) !important; background:var(--gm-header-grad) !important; color:white !important; font-weight:700 !important; box-shadow:0 4px 12px rgba(37,99,235,0.40) !important; margin-top:4px !important; }
body.controller-account.action-login .login-bottom-links a { color:var(--gm-accent) !important; font-size:12px !important; }

/* ── FLASH MESSAGES ──────────────────────────────────────────── */
div.flash { border-radius:var(--gm-radius) !important; padding:10px 16px !important; font-size:13px !important; margin-bottom:10px !important; border:1px solid !important; }
div.flash.notice  { background:var(--gm-success-bg) !important; border-color:#6ee7b7 !important; color:#065f46 !important; }
div.flash.warning { background:var(--gm-warning-bg) !important; border-color:#fcd34d !important; color:#92400e !important; }
div.flash.error   { background:var(--gm-danger-bg)  !important; border-color:#fca5a5 !important; color:#991b1b !important; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width:900px) {
  .gm-issue-title-row { flex-direction:column !important; align-items:flex-start !important; }
  .gm-issue-title-row .contextual { float:none !important; width:100% !important; }
}