@import url(../../../stylesheets/application.css);
/* =====================================================
   TEMA SEGITTUR – PID
   Color corporativo principal: #E6007E
   ===================================================== */

/* -------- Variables base -------- */
:root {
  --pid-magenta: #E6007E;
  --pid-gris-oscuro: #3C3C3B;
  --pid-gris-claro: #F6F6F6;
  --pid-magenta-oscuro: #b30062;

  /* Cabecera / logo */
  --pid-logo-height: 110px;  /* altura del área de logo */
  --pid-logo-gap: 20px;      /* aire reservado para el menú dentro del header */
  --pid-logo-pad-y: 8px;     /* “margen interno” para que el logo no se recorte */
}

/* =====================================================
   BARRA SUPERIOR (Inicio / Mi página / etc.)
   ===================================================== */
#top-menu { background-color: var(--pid-gris-oscuro); }

#top-menu a,
#top-menu a:visited { color: #ffffff; }

#top-menu a:hover { color: var(--pid-magenta); }

/* =====================================================
   CABECERA PRINCIPAL (logo bien integrado)
   ===================================================== */
#header {
  background-color: var(--pid-magenta);
  border-bottom: 0;
  padding: 0;

  /*  reservar altura real para que el main-menu no pise el logo */
  position: relative;
  min-height: calc(var(--pid-logo-height) + var(--pid-logo-gap));
  padding-bottom: var(--pid-logo-gap);
}

/* h1 se usa como "caja" del logo */
#header h1 {
  margin-top: 0;
  margin-bottom: 0;              /*  el aire lo gestiona #header con padding-bottom */
  padding: 0;

  height: var(--pid-logo-height);
  min-height: var(--pid-logo-height);

  /* instalable (ruta relativa) */
  background-image: url(../images/logo-pid-blanco.png); 
  background-repeat: no-repeat;
  background-position: 16px 50%;

  /*  evitamos recorte ajustando por altura (no solo por ancho) */
  background-size: auto calc(var(--pid-logo-height) - (var(--pid-logo-pad-y) * 2));

  text-indent: -9999px;
  overflow: hidden;
}

/* Buscador en cabecera */
#quick-search {
  margin-top: 0;
  padding-top: 20px;
  padding-bottom: 10px;
  margin-right:15px;
}

#quick-search input,
#quick-search select { vertical-align: middle; }

/* =====================================================
   MENÚ DE PROYECTO (pestañas) — Redmine clásico
   ===================================================== */
#main-menu {
  background-color: var(--pid-magenta);
  border: 0;
  border-bottom: 1px solid #ffffff;
}

#main-menu ul {
  margin: 0;
  padding: 0 12px;
}

#main-menu li a {
  display: inline-block;
  padding: 8px 12px;
  margin-right: 2px;

  background: transparent;
  color: #ffffff;
  font-weight: 500;
  text-decoration: none;

  border: 0;
  border-radius: 0;
}

#main-menu li a:hover {
  background-color: rgba(255, 255, 255, 0.85);
  color: var(--pid-gris-oscuro);
}

#main-menu li a.selected,
#main-menu li a.selected:hover {
  background-color: #ffffff;
  color: var(--pid-gris-oscuro);
  position: relative;
  z-index: 2;
  margin-bottom: -1px;
}

/* Botón "+" (new object) */
#main-menu li a.new-object {
  background-color: var(--pid-gris-oscuro) !important;
  background-image: none !important;
  color: #ffffff !important;
}

#main-menu li a.new-object:hover {
  background-color: #555554 !important;
  color: #ffffff !important;
}

/* Si el tema/versión usa icon-add */
#main-menu li a.icon-add,
#main-menu li a.icon.icon-add {
  background: var(--pid-gris-oscuro);
  color: #ffffff;
}

#main-menu li a.icon-add:hover,
#main-menu li a.icon.icon-add:hover {
  background-color: #555554;
  color: #ffffff;
}

/* =====================================================
   DESPLEGABLE DEL BOTÓN "+"
   ===================================================== */
#main-menu ul.menu-children {
  border: 1px solid #ddd;
  background-color: #ffffff;
}

#main-menu ul.menu-children li a {
  background-color: #ffffff;
  color: var(--pid-gris-oscuro);
}

#main-menu ul.menu-children li a:hover,
#main-menu ul.menu-children li a:focus {
  background-color: var(--pid-gris-oscuro);
  color: #ffffff;
}

#main-menu ul.menu-children li {
  border-bottom: 1px solid var(--pid-gris-claro);
}

#main-menu ul.menu-children li:last-child { border-bottom: 0; }

/* =====================================================
   CONTENIDO (fondos)
   ===================================================== */
#content,
#main,
#main #content { background: #ffffff; }

/* =====================================================
   TEXTO GLOBAL EN NEGRO (unificación)
   ===================================================== */
body,
#content,
#content p,
#content span,
#content div,
#content td,
#content th,
#content li { color: #000000; }

#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 { color: #000000; }

/* Labels y textos asociados a checkboxes */
#content label,
#sidebar label,
fieldset label,
.filters label,
#query_form label {
  color: #000000 !important;
  font-weight: 600;
}

#sidebar label { font-weight: 500; }

#content .description,
#content .hint,
#content .info,
#content .help { color: #555555; }

#content .disabled,
#content .readonly { color: #888888; }

#content input::placeholder,
#content textarea::placeholder { color: #777777; }

/* =====================================================
   ENLACES
   - Cabeceras/menús: blancos
   - Contenido: negro
   ===================================================== */
#header a,
#header a:visited,
#main-menu a,
#main-menu a:visited { color: #ffffff; }

#header a:hover,
#main-menu a:hover { color: #ffffff; }

#content a,
#content a:visited,
#content .wiki a,
#content .wiki a:visited,
#content .journal a,
#content .journal a:visited,
#activity a,
#activity a:visited,
#sidebar a,
#sidebar a:visited,
.box a,
.box a:visited,
table.list a,
table.list a:visited {
  color: #000000;
  text-decoration: none;
}

#content a:hover,
#activity a:hover,
#sidebar a:hover,
.box a:hover,
table.list a:hover {
  color: #000000;
  text-decoration: underline;
}

/* =====================================================
   BOTONES
   ===================================================== */
input[type="submit"],
button,
.button {
  background-color: var(--pid-magenta);
  border: 1px solid var(--pid-magenta);
  color: #ffffff;
}

input[type="submit"]:hover,
button:hover,
.button:hover {
  background-color: var(--pid-magenta-oscuro);
  border-color: var(--pid-magenta-oscuro);
}

/* =====================================================
   CONTEXTUAL
   ===================================================== */
.contextual a.icon.icon-add,
.contextual a.icon-add {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--pid-gris-oscuro) !important;
  font-weight: 600;
  text-decoration: none;
}

.contextual a.icon.icon-add:hover,
.contextual a.icon-add:hover {
  color: var(--pid-magenta) !important;
  text-decoration: underline;
}

/* =====================================================
   ESTADOS / TABLAS
   ===================================================== */
tr.issue:hover { background-color: rgba(230, 0, 126, 0.05); }

/* =====================================================
   AVISOS
   ===================================================== */
.nodata,
.flash.notice {
  background-color: var(--pid-gris-claro);
  border-color: #ddd;
  color: var(--pid-gris-oscuro);
}

/* =====================================================
   CHECKBOXES – COLOR CORPORATIVO
   ===================================================== */
input[type="checkbox"] { accent-color: var(--pid-gris-oscuro); }

/* =====================================================
   DESPLEGABLES / AUTOCOMPLETE (jQuery UI / drdn)
   ===================================================== */
.ui-menu .ui-menu-item-wrapper.ui-state-active,
.ui-menu .ui-menu-item-wrapper.ui-state-focus,
.ui-menu .ui-menu-item-wrapper:hover {
  background-color: var(--pid-gris-oscuro) !important;
  color: #ffffff !important;
  border: 0 !important;
}

.ui-menu .ui-menu-item-wrapper {
  color: var(--pid-gris-oscuro);
  font-weight: 500;
}

#project-jump .drdn-content a:hover,
#project-jump .drdn-content a:focus,
#project-jump .drdn-content a.selected {
  background-color: var(--pid-gris-oscuro) !important;
  color: #ffffff !important;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
  background: var(--pid-gris-oscuro) !important;
  border: 0 !important;
  color: #ffffff !important;
}

/* =====================================================
   SELECT NATIVO (best effort)
   ===================================================== */
select option:checked {
  background-color: var(--pid-gris-oscuro);
  color: #ffffff;
}

select option:hover {
  background-color: var(--pid-gris-oscuro);
  color: #ffffff;
}

select option:checked,
select option:hover {
  box-shadow: inset 0 0 0 9999px var(--pid-gris-oscuro);
  color: #ffffff;
}

/* =====================================================
   FORMULARIOS – ESTILO CORPORATIVO (SIN JS)
   ===================================================== */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="url"],
textarea,
select {
  background-color: #ffffff;
  color: #000000;

  border: 1px solid #cccccc;
  border-radius: 3px;

  padding: 4px 6px;
  font-size: 13px;

  outline: none;
  box-shadow: none;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  border-color: var(--pid-magenta);
  box-shadow: 0 0 0 2px rgba(230, 0, 126, 0.15);
}

select {
  appearance: menulist;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  background-image: none;
}

option:disabled { color: #999999; }

/* =====================================================
   RESPONSIVE (MÓVIL) — logo más pequeño y sin solapes
   ===================================================== */
@media screen and (max-width: 899px) {

  :root {
    --pid-logo-height: 86px;
    --pid-logo-gap: 16px;
    --pid-logo-pad-y: 6px;
  }

  #header {
    min-height: calc(var(--pid-logo-height) + var(--pid-logo-gap)) !important;
    padding-bottom: var(--pid-logo-gap) !important;
  }

  #header h1 {
    height: var(--pid-logo-height) !important;
    min-height: var(--pid-logo-height) !important;

    background-position: 12px 50% !important;
    background-size: auto calc(var(--pid-logo-height) - (var(--pid-logo-pad-y) * 2)) !important;
  }

  #main-menu ul { padding: 0 10px !important; }
  #main-menu li a { padding: 7px 10px !important; }
}

/* =====================================================
   SIDEBAR (Ordenar por, etc.) – selección corporativa
   ===================================================== */
#sidebar a:hover,
#sidebar a:focus,
#sidebar a:active {
  background: var(--pid-gris-oscuro) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
}

#sidebar li a.selected,
#sidebar li a.selected:hover,
#sidebar li a.selected:focus,
#sidebar li a.selected:active {
  background: var(--pid-gris-oscuro) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}