/*
Theme Name:   MQG Área Privada (Astra Child)
Theme URI:
Description:  Tema hijo de Astra para la intranet de colaboradores MQG. Rediseño estético reversible: se puede desactivar en cualquier momento volviendo a activar Astra. No modifica plantillas del padre; solo añade estilos.
Author:       MQG
Template:     astra
Version:      2.2.1
Text Domain:  mqg-child
*/

/* ============================================================
   MQG — Sistema de diseño (corporativo sobrio)
   Todo lo de aquí es CSS. Para revertir: Apariencia > Temas > activar Astra.
   ============================================================ */

:root {
  /* Marca */
  --mqg-navy:        #1B2A63;  /* azul marino MQG (logo + botones) */
  --mqg-navy-700:    #16234F;  /* hover */
  --mqg-navy-900:    #0F1838;  /* activo */

  /* Superficies y neutros */
  --mqg-bg:          #F4F6FA;  /* fondo general de páginas internas */
  --mqg-surface:     #FFFFFF;  /* tarjetas */
  --mqg-surface-2:   #FAFBFD;  /* tarjetas secundarias */
  --mqg-border:      #E3E7EF;
  --mqg-text:        #1F2733;
  --mqg-text-soft:   #5B6473;

  /* Forma */
  --mqg-radius:      14px;     /* tarjetas */
  --mqg-radius-sm:   10px;     /* inputs */
  --mqg-radius-pill: 999px;    /* botones */

  /* Sombra */
  --mqg-shadow:       0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06);
  --mqg-shadow-hover: 0 6px 24px rgba(27,42,99,.16);

  /* Transición */
  --mqg-ease: .18s ease;
}

/* ------------------------------------------------------------
   1) Fondo general de las páginas internas
   ------------------------------------------------------------ */
body {
  background-color: var(--mqg-bg);
  color: var(--mqg-text);
}

/* ------------------------------------------------------------
   2) Cabecera MQG — afinado sutil (sin tocar estructura)
   ------------------------------------------------------------ */
.site-header,
header.site-header {
  box-shadow: 0 1px 0 var(--mqg-border);
}

/* ------------------------------------------------------------
   3) Tarjetas / contenedores tipo "banda gris"
   Las páginas internas usan grupos con fondo gris claro como
   contenedor. Les damos aspecto de tarjeta limpia y consistente.
   ------------------------------------------------------------ */
.wp-block-group.has-background,
.um,
.um-account {
  border-radius: var(--mqg-radius);
  box-shadow: var(--mqg-shadow);
}

/* La banda gris vacía que aparecía en el panel: la suavizamos */
.wp-block-group.has-background {
  background-color: var(--mqg-surface) !important;
  border: 1px solid var(--mqg-border);
}

/* ------------------------------------------------------------
   4) BOTONES — un único sistema (pill, azul marino)
   Cubre botones de Gutenberg y de Ultimate Member.
   Nota: los botones de Naturgy/Endesa que tienen color elegido
   en el editor conservan su color de marca (el color en línea
   manda sobre esto), solo se uniforman forma y tipografía.
   ------------------------------------------------------------ */
.wp-block-button__link,
.um .um-button,
.um input[type="submit"].um-button,
.um a.um-button,
button.wp-block-button__link {
  background-color: var(--mqg-navy);
  color: #fff;
  border: none;
  border-radius: var(--mqg-radius-pill);
  padding: .72em 1.6em;
  font-weight: 600;
  letter-spacing: .2px;
  line-height: 1.2;
  box-shadow: var(--mqg-shadow);
  transition: background-color var(--mqg-ease), transform var(--mqg-ease), box-shadow var(--mqg-ease);
  text-decoration: none;
}

.wp-block-button__link:hover,
.um .um-button:hover,
.um input[type="submit"].um-button:hover,
.um a.um-button:hover,
button.wp-block-button__link:hover {
  background-color: var(--mqg-navy-700);
  transform: translateY(-1px);
  box-shadow: var(--mqg-shadow-hover);
  color: #fff;
}

.wp-block-button__link:active,
.um .um-button:active {
  background-color: var(--mqg-navy-900);
  transform: translateY(0);
}

/* Refuerzo: Ultimate Member aplica su "color primario" (el cian)
   como estilo en línea sobre el botón. Para vencerlo usamos !important
   en los botones de UM (login, registro, cuenta, contraseña). */
.um .um-button,
.um input[type="submit"].um-button,
.um a.um-button,
.um-login .um-button,
.um-register .um-button,
.um-account .um-button,
.um-password .um-button {
  background-color: var(--mqg-navy) !important;
  border-color: var(--mqg-navy) !important;
  color: #fff !important;
}

.um .um-button:hover,
.um input[type="submit"].um-button:hover,
.um a.um-button:hover,
.um-login .um-button:hover {
  background-color: var(--mqg-navy-700) !important;
  border-color: var(--mqg-navy-700) !important;
}

/* Botones "outline" (los de comercializadora con borde):
   uniformamos forma; el color de borde de marca lo mantiene
   quien lo tenga definido en el editor. */
.wp-block-button.is-style-outline .wp-block-button__link {
  border-radius: var(--mqg-radius-pill);
  border-width: 2px;
  font-weight: 600;
  background: transparent;
  color: var(--mqg-navy);
}

/* ------------------------------------------------------------
   5) CAMPOS DE FORMULARIO (UM + Gutenberg) coherentes
   ------------------------------------------------------------ */
.um .um-form input[type="text"],
.um .um-form input[type="password"],
.um .um-form input[type="email"],
.um .um-form input[type="search"],
.um .um-form select,
.um .um-form textarea,
input[type="text"],
input[type="password"],
input[type="email"] {
  border: 1px solid var(--mqg-border);
  border-radius: var(--mqg-radius-sm);
  padding: .65em .85em;
  background: var(--mqg-surface);
  color: var(--mqg-text);
  transition: border-color var(--mqg-ease), box-shadow var(--mqg-ease);
}

.um .um-form input:focus,
.um .um-form select:focus,
.um .um-form textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
  outline: none;
  border-color: var(--mqg-navy);
  box-shadow: 0 0 0 3px rgba(27,42,99,.12);
}

/* Etiquetas */
.um .um-field-label label,
.um-field-label label {
  color: var(--mqg-text);
  font-weight: 600;
}

/* ------------------------------------------------------------
   6) LOGIN (Ultimate Member) — tarjeta más definida
   ------------------------------------------------------------ */
.um-login .um,
.um-register .um,
.um-password .um {
  background: var(--mqg-surface);
  border: 1px solid var(--mqg-border);
  padding: 2rem 2.25rem;
}

.um-login .um-button,
.um-login input[type="submit"].um-button {
  width: 100%;
}

/* Enlace "¿Has olvidado tu contraseña?" con más presencia */
.um-login .um-col-alt a,
.um a.um-link-alt {
  color: var(--mqg-navy);
  font-weight: 500;
}

/* ------------------------------------------------------------
   7) PANTALLA DE CUENTA (Ultimate Member)
   Arreglamos la pestaña activa CIAN -> azul marino corporativo
   ------------------------------------------------------------ */
.um-account-side li a.current,
.um-account-side li a.current:hover,
.um-account-tab.active,
.um-account-nav a.current {
  background-color: var(--mqg-navy) !important;
  color: #fff !important;
  border-color: var(--mqg-navy) !important;
}

.um-account-side li a {
  border-radius: var(--mqg-radius-sm);
}

/* ------------------------------------------------------------
   8) PANEL PRINCIPAL — los 3 accesos
   Menos espacio muerto, accesos con aire pero agrupados.
   ------------------------------------------------------------ */
.wp-block-buttons {
  gap: .9rem;
}

/* Cuando un grupo de botones está en columna (paneles verticales),
   los hacemos de ancho cómodo y consistente */
.wp-block-buttons.is-vertical .wp-block-button,
.wp-block-buttons.is-content-justification-center .wp-block-button {
  width: min(420px, 100%);
}

/* ------------------------------------------------------------
   9) Tipografía de títulos de sección ("Cuenta", "Iniciar sesión")
   ------------------------------------------------------------ */
.um .um-account-heading,
.entry-title {
  color: var(--mqg-navy);
  font-weight: 700;
}

/* ------------------------------------------------------------
   10) Detalles
   ------------------------------------------------------------ */
a { color: var(--mqg-navy); }
a:hover { color: var(--mqg-navy-700); }

/* Iconos de salir / logout: alineados y discretos */
.entry-content figure.alignright { margin-top: .25rem; }