@charset "UTF-8";
/* === Base Redmine 5.x: importa estilos por defecto === */
@import url(../../../stylesheets/application.css);

/* === Colores institucionales === */
:root {
  --guinda: #7b1f29;
  --guinda-oscuro: #5a151d;
  --dorado: #c8a75b;
}

/* ===== Header + barras ===== */
#header, #top-menu, #main-menu {
  background: var(--guinda) !important;
  border-color: var(--guinda-oscuro) !important;
}
#top-menu a, #top-menu span, #header a, #header h1 a, #main-menu li a { color: #fff !important; }
#top-menu a:hover, #main-menu li a:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; }
#main-menu li a.selected,
#main-menu li a.selected:hover { background: var(--guinda-oscuro) !important; color:#fff !important; }

/* Franja sutil dorada debajo del header (opcional) */
#header { box-shadow: 0 2px 0 var(--dorado) inset; }

/* ======= Logo grande estilo Kitsune + título ======= */
:root{
  --logo-w: 260px;   /* ancho del logo */
  --logo-h: 60px;    /* alto del logo */
}

/* Barra superior con espacio para el logo */
#top-menu{
  position: relative;
  min-height: var(--logo-h);
  padding: 6px 12px 6px calc(var(--logo-w) + 24px); /* deja espacio al menú */
}

/* Logo a la izquierda, centrado verticalmente */
#top-menu::before{
  content:"";
  position:absolute;
  left:12px;
  top:50%;
  width: var(--logo-w);
  height: var(--logo-h);
  transform: translateY(-50%);
  background: url('../images/logo-cuautitlan.png') no-repeat left center / contain;
  z-index:20;
}

/* Reemplazar "Redmine" por "Agenda Cuautitlán" */
#header h1{ min-height:56px; display:flex; align-items:center; }
#header h1 a{
  position:relative;
  color: transparent !important;   /* oculta el texto original */
  text-shadow:none !important;
  display:inline-block;
  padding-left:12px;               /* respirito a la izquierda */
}
#header h1 a::after{
  content: "Agenda Cuautitlán";
  position: relative;
  color:#fff; font-weight:700;
  font-size: 26px; letter-spacing:.3px;
}

/* Responsive: ajusta tamaño de logo/título en pantallas menores */
@media (max-width: 1024px){
  :root{ --logo-w: 210px; --logo-h: 52px; }
  #header h1 a::after{ font-size:22px; }
}
@media (max-width: 640px){
  :root{ --logo-w: 170px; --logo-h: 46px; }
  #header h1 a::after{ font-size:20px; }
}

/* #header h1 a{ color:transparent!important; text-shadow:none!important; } */

/* ===== Tabs secundarias ===== */
#content .tabs ul li a { background:#f7f4f2 !important; color:#333 !important; border-color:#e8e0de !important; }
#content .tabs ul li a:hover { background:#efe7e5 !important; }
#content .tabs ul li a.selected { background:var(--guinda) !important; color:#fff !important; border-color:var(--guinda-oscuro) !important; }

/* ===== Botones ===== */
.button, input[type="submit"], input[type="button"], .contextual .icon, .icon-add, .icon-save {
  background:var(--guinda) !important; border-color:var(--guinda-oscuro) !important; color:#fff !important; border-radius:6px !important;
}
.button:hover, input[type="submit"]:hover, input[type="button"]:hover { filter:brightness(1.05); }

/* Enlaces de acción */
.contextual a { color:var(--guinda) !important; }
.contextual a:hover { color:var(--guinda-oscuro) !important; }

/* ===== Tablas / formularios ===== */
table.list thead th { background:#f3efee !important; border-bottom:2px solid var(--dorado) !important; }
table.list tbody tr:hover { background:#fff8f6 !important; }
input, select, textarea { border-color:#e2d9d7 !important; }
input:focus, select:focus, textarea:focus { border-color:var(--guinda) !important; box-shadow:0 0 0 2px rgba(123,31,41,.1) !important; }

/* ===== Footer ===== */
#footer { border-top:2px solid var(--dorado) !important; }

/* ===== Ajustes responsivos ===== */
@media (max-width:1024px){ #header h1 a::before{ width:170px; height:34px; } }
@media (max-width:640px){  #header h1 a::before{ width:150px; height:30px; } }



/* ====== Logo grande estilo Kitsune + título en h1 (sin <a>) ====== */
:root{
  --logo-w: 260px;  /* ancho del logo */
  --logo-h: 60px;   /* alto del logo */
}

/* Barra superior: espacio para el logo */
#top-menu{
  position: relative;
  min-height: var(--logo-h);
  padding: 6px 12px 6px calc(var(--logo-w) + 24px) !important;
}

/* Logo a la izquierda del top-menu */
#top-menu::before{
  content:"";
  position:absolute;
  left:12px;
  top:50%;
  width: var(--logo-w);
  height: var(--logo-h);
  transform: translateY(-50%);
  background: url('../images/logo-cuautitlan.png') no-repeat left center / contain;
  z-index:20;
}

/* Título: reemplazar "Redmine" por "Agenda Cuautitlán" */
#header h1{
  position: relative;
  min-height: 56px;
  display: flex;
  align-items: center;
  color: transparent !important;     /* oculta el texto original */
  text-shadow: none !important;
}
#header h1::after{
  content:"Agenda Cuautitlán";
  color:#fff!important; font-weight:700; font-size:26px; letter-spacing:.3px; line-height:1;
}



/* Responsive */
@media (max-width: 1024px){
  :root{ --logo-w: 210px; --logo-h: 52px; }
  #header h1::after{ font-size:22px; }
}
@media (max-width: 640px){
  :root{ --logo-w: 170px; --logo-h: 46px; }
  #header h1::after{ font-size:20px; }
}

/* ===== Logo grande centrado SOLO en la página de inicio ===== */
:root{
  --hero-w: 520px;   /* ancho del logo grande */
  --hero-h: 520px;   /* alto del logo grande  */
  --hero-opacity: 0.12;
}

body.controller-welcome.action-index #content{
  position: relative;
  min-height: calc(var(--hero-h) + 160px);
}

body.controller-welcome.action-index #content::before{
  content:"";
  position: absolute;
  left: 50%;
  top: 120px;                 /* baja el logo desde el header */
  width: var(--hero-w);
  height: var(--hero-h);
  transform: translateX(-50%);
  background: url('../images/logo-cuautitlan.png') no-repeat center/contain;
  opacity: var(--hero-opacity);   /* modo “marca de agua” */
  pointer-events: none;
  z-index: 0;
}

/* Asegura que el texto siga encima del logo */
body.controller-welcome.action-index #content > *{
  position: relative;
  z-index: 1;
}

@charset "UTF-8";

/* ===== Paleta institucional Cuautitlán ===== */
:root{
  --guinda:#691C32;       /* 7421 C */
  --guinda-osc:#4E1424;   /* derivado */
  --dorado:#BC955C;       /* 465 C  */
  --magenta:#AA1C47;      /* 208 UP */
  --melocoton:#FFC27A;    /* 149 C  */

  /* tamaños del logo que ya usas */
  --logo-w: 300px;
  --logo-h: 70px;
}

/* ===== Top bar bicolor y limpio ===== */

/* Franja superior dorada muy fina (se ve como “ribete”) */
#wrapper::before{
  content:"";
  display:block;
  height:4px;
  background:var(--dorado);
}

/* Barra de utilidades (Inicio / Mi página / …) sobre dorado */
#top-menu{
  position:relative;
  background:var(--dorado) !important;
  color:#fff;
  min-height: var(--logo-h);
  padding: 6px 12px 6px calc(var(--logo-w) + 28px) !important;  /* espacio para logo */
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.10);
}

/* Logo grande a la izquierda (lo ya tenías, ajusto contraste) */
#top-menu::before{
  content:"";
  position:absolute;
  left:12px; top:50%;
  width:var(--logo-w); height:var(--logo-h);
  transform:translateY(-50%);
  background:url('../images/logo-cuautitlan.png') no-repeat left center / contain;
  opacity:.95; filter: drop-shadow(0 0 1px rgba(0,0,0,.18));
  z-index:20;
}

/* Enlaces del top-menu: blancos, con hover suave y pill */
#top-menu a{
  color:#fff !important; font-weight:600;
  padding:6px 10px; border-radius:6px;
  letter-spacing:.2px;
}
#top-menu a:hover{
  background: rgba(0,0,0,.10) !important;
}

/* ===== Header principal en guinda con filete dorado ===== */
#header{
  background:var(--guinda) !important;
  border-bottom:2px solid var(--dorado) !important;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.08);
}

/* Título con acento correcto */
#header h1{
  min-height:56px; display:flex; align-items:center;
  color:transparent !important; text-shadow:none !important;
}
#header h1::after{
  content:"Agenda Cuautitlán";   /* si tu editor rompe UTF-8: "Agenda Cuautitl\00E1n" */
  color:#fff; font-weight:700; font-size:28px; letter-spacing:.2px;
}

/* ===== Menú principal integrado al header ===== */
#main-menu{
  background:var(--guinda) !important;
  border-top:1px solid rgba(255,255,255,.06);
}
#main-menu li a{
  color:#fff !important; padding:8px 12px; border-radius:6px;
}
#main-menu li a:hover{
  background: rgba(255,255,255,.10) !important;
}
#main-menu li a.selected{
  background: var(--magenta) !important;
  border-color: transparent !important;
}

/* ===== Buscador y controles (estética y foco accesible) ===== */
#quick-search input[type="text"], select{
  border:1px solid rgba(0,0,0,.15) !important;
  border-radius:8px !important;
}
#quick-search input[type="text"]:focus, select:focus{
  border-color: var(--dorado) !important;
  box-shadow: 0 0 0 3px rgba(188,149,92,.25) !important;
  outline: none;
}

/* ===== Pequeños acentos ===== */
a, .icon-add, .icon-edit { color: var(--magenta) !important; }
a:hover { color: var(--guinda) !important; }
table.list thead th { border-bottom: 2px solid var(--dorado) !important; }

/* ===== Responsivo ===== */
@media (max-width: 1200px){
  :root{ --logo-w: 240px; --logo-h: 60px; }
}
@media (max-width: 768px){
  :root{ --logo-w: 190px; --logo-h: 50px; }
  #header h1::after{ font-size:22px; }
}