/* ---------------------------------------------------------------------------
   Piel de Sugal — aspecto "Verde institucional" (claro).

   Se aplica ENCIMA de bootstrap y de sistema.css, sin tocar la estructura de las
   pantallas: solo redefine colores, tipografia y formas.

   CRITERIO DE COLOR (elegido con el usuario):
   - Superficies CLARAS: fondo gris claro, tarjetas blancas. Nada de negro de fondo.
   - El NEGRO es para el TEXTO y detalles finos.
   - VERDE = cromo de marca (barra) y estado "encendida"/OK.
   - ROJO  = alarma / peligro, reservado.
   - BURDEO = acento secundario (botones secundarios, detalles).

   El logotipo trae "Sugal" en negro; sobre la barra verde va en su chip blanco
   (.sugal-marca). Sobre superficies blancas el chip es casi invisible y no estorba.
   --------------------------------------------------------------------------- */

:root{
	--fondo:        #d3d7dc;   /* pagina */
	--superficie:   #ffffff;   /* tarjetas y paneles */
	--borde:        #d9dee1;
	--tinta:        #181a1d;   /* texto (el "negro") */
	--tinta-suave:  #69707a;   /* texto secundario */

	--verde:        #1c6b3e;   /* barra / cromo de marca */
	--verde-vivo:   #1f8f4b;   /* acento, botones, estado encendida */
	--rojo:         #d21f28;   /* alarma / peligro */
	--burdeo:       #6a1b2a;   /* acento secundario */
	--barra-tx:     #e6f2ea;   /* texto sobre la barra verde */

	/* Compatibilidad: nombres viejos usados por reglas heredadas */
	--sugal-rojo:      var(--rojo);
	--sugal-rojo-vivo: var(--rojo);
	--sugal-negro:     var(--fondo);
	--sugal-carbon:    var(--superficie);
	--sugal-borde:     var(--borde);
	--sugal-texto:     var(--tinta);
	--sugal-apagado:   var(--tinta-suave);
}

body{
	background: var(--fondo);
	color: var(--tinta);
	font-size: 15px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1,h2,h3,h4,h5{ color: var(--tinta); letter-spacing:.02em; }
a{ color: var(--verde-vivo); }
a:hover,a:focus{ color: var(--verde); text-decoration:none; }
hr{ border-color: var(--borde); }

/* ------------------------------------------------------------ barra superior */
.navbar, .navbar-default, .navbar-inverse{
	background: var(--verde);
	border: none;
	border-bottom: 3px solid var(--verde-vivo);
	border-radius: 0;
}
.navbar-default .navbar-nav > li > a,
.navbar-inverse  .navbar-nav > li > a,
.navbar-brand{
	color: var(--barra-tx);
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size:14px;
	font-weight: 600;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-inverse  .navbar-nav > li > a:hover{ color:#fff; }
.navbar-default .navbar-nav > .active > a,
.navbar-inverse  .navbar-nav > .active > a{ background: rgba(0,0,0,.15); color:#fff; }

/* El logotipo lleva "Sugal" en negro: sobre la barra verde necesita su chip blanco. */
.sugal-marca{
	display:inline-block;
	background:#fff;
	padding:6px 14px;
	border-radius:4px;
	margin:6px 10px 6px 0;
	vertical-align:middle;
}
.sugal-marca img{ height:34px; display:block; }

/* --------------------------------------------------------- paneles y tarjetas */
.panel, .well, .modal-content{
	background: var(--superficie);
	border: 1px solid var(--borde);
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(20,30,40,.06);
	color: var(--tinta);
}
/* Encabezados en VERDE CLARO: banda suave con el texto oscuro y un filo verde
   vivo abajo. El titulo queda oscuro (lo hereda), asi que se lee sin ayuda. */
.panel-heading, .modal-header{
	background: #e4f3ea;
	border-bottom: 2px solid var(--verde-vivo);
	color: var(--verde);
	text-transform: uppercase;
	letter-spacing:.06em;
	font-weight:700;
}
.panel-default > .panel-heading{ background:#e4f3ea; color: var(--verde); }
/* Los titulos internos (h1-h5) en el verde oscuro de marca, para dar jerarquia. */
.panel-heading h1, .panel-heading h2, .panel-heading h3, .panel-heading h4, .panel-heading h5,
.panel-heading strong,
.modal-header h1, .modal-header h2, .modal-header h3, .modal-header h4, .modal-header h5,
.modal-header strong{ color: var(--verde); }
.modal-footer{ border-top:1px solid var(--borde); }

/* ------------------------------------------------------------------- botones */
.btn{
	border-radius: 40px;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 600;
	font-size:14px;
	border: none;
	padding: 9px 22px;
}
.btn-primary, .btn-success, .btn-info{
	background: var(--verde-vivo);
	color:#fff;
}
.btn-primary:hover, .btn-success:hover, .btn-info:hover,
.btn-primary:focus, .btn-primary:active{
	background: var(--verde);
	color:#fff;
}
/* Secundario: contorno burdeo, el acento secundario de la paleta. */
.btn-default{ background:transparent; color: var(--burdeo); border:1.5px solid var(--burdeo); }
.btn-default:hover{ background: var(--burdeo); color:#fff; }
.btn-danger{ background: var(--rojo); color:#fff; }
.btn-danger:hover{ background:#a5171e; color:#fff; }

/* ----------------------------------------------------------------- formularios */
.form-control{
	background:#fff;
	border:1px solid var(--borde);
	color: var(--tinta);
	border-radius:4px;
	box-shadow:none;
	font-size:14px;
	height:auto;
}
.form-control:focus{
	border-color: var(--verde-vivo);
	box-shadow: 0 0 0 2px rgba(31,143,75,.22);
	background:#fff;
}
.form-control::placeholder{ color:#9aa0a6; }
label, .control-label{ color: var(--tinta-suave); text-transform:uppercase; font-size:13px; letter-spacing:.06em; }
.input-group-addon{ background:#eef1f2; border-color:var(--borde); color:var(--tinta-suave); }

/* --------------------------------------------------------------------- tablas */
.table{ color: var(--tinta); }
.table > thead > tr > th{
	background:#eef1f2;
	color: var(--tinta);
	border-bottom:2px solid var(--verde-vivo);
	text-transform:uppercase;
	font-size:13px;
	letter-spacing:.05em;
}
.table > tbody > tr > td{ border-top:1px solid #e4e8eb; }
.table-striped > tbody > tr:nth-of-type(odd){ background:#f5f7f8; }
.table-hover > tbody > tr:hover{ background:#eef4f0; }

/* --------------------------------------------------- mosaico de modulos (portada) */
#modulo td{
	padding: 8px 14px;
	text-align: center;
	vertical-align: middle;
	color: var(--tinta);
	font-size:13px;
	letter-spacing: .05em;
	white-space: normal;
	min-width: 108px;
	max-width: 128px;
	line-height: 1.35;
}
#modulo img.modulo{
	width: 62px; height: 62px;
	border-radius: 10px;
	transition: transform .15s;
}
#modulo a:hover img.modulo{ transform: translateY(-3px); }

/* ------------------------------------------------------- portada de los modulos */
.sugal-modulos .thumbnail,
.sugal-modulos a > img{
	background: var(--superficie);
	border:1px solid var(--borde);
	border-radius:8px;
	transition:.15s;
}
.sugal-modulos a:hover .thumbnail{
	border-color: var(--verde-vivo);
	transform: translateY(-3px);
}

/* La pantalla de acceso reutiliza el .modal-dialog de bootstrap. */
.modal-header .sugal-marca{ display:block; width:-moz-max-content; width:max-content; margin:0 auto 16px; }
.modal-dialog{ margin-top:6vh; }

/* ------------------------------------------------------------ pantalla de acceso */
.sugal-acceso{
	max-width:380px;
	margin:8vh auto;
	background: var(--superficie);
	border:1px solid var(--borde);
	border-top:4px solid var(--verde-vivo);
	border-radius:8px;
	padding:34px 30px;
	box-shadow: 0 4px 18px rgba(20,30,40,.10);
}
.sugal-acceso .sugal-marca{ display:block; text-align:center; margin:0 auto 22px; }
.sugal-acceso .sugal-marca img{ margin:0 auto; }

/* --------------------------------------------- barra de modulo (elemento <nav>) */
/* sistema.css pinta la barra de azul sobre el elemento `nav` pelado; se sobrescribe. */
nav{
	background: var(--verde) !important;
	border-bottom: 3px solid var(--verde-vivo);
	margin-top: 0 !important;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	/* sistema.css la deja `fixed`, que la saca del flujo: el contenido se le mete
	   debajo (en el celular, donde la barra crece al envolver, tapaba las tarjetas
	   de planta). Con `sticky` sigue pegada arriba al hacer scroll PERO reserva su
	   espacio, asi nada queda debajo. */
	position: sticky !important;
	top: 0;
	z-index: 100;
}
nav > ul{ flex: 0 1 auto; }
nav ul li a{
	color: var(--barra-tx);
	text-transform:uppercase;
	letter-spacing:.07em;
	font-size:14px;
	font-weight:600;
	padding: 6px 16px !important;
	line-height: 1.5;
}
nav ul li a:hover{ background: rgba(0,0,0,.18) !important; color:#fff; }
/* Desplegable de submenus: superficie blanca, texto oscuro. */
nav ul li div ul{
	background:#fff !important;
	border:1px solid var(--borde);
	border-top:2px solid var(--verde-vivo);
	box-shadow: 0 6px 16px rgba(20,30,40,.14);
}
nav ul li div ul li a{
	color: var(--tinta) !important;
	text-transform: uppercase;
	letter-spacing:.05em;
	font-size:14px;
	padding:9px 16px;
	display:block;
}
nav ul li div ul li a:hover{ background: var(--verde-vivo) !important; color:#fff !important; }
nav ul li div ul .titulo{ background:#eef1f2 !important; color: var(--verde); }

/* Las opciones sin submenu llevan un <div></div> VACIO. sistema.css lo pinta como
   un recuadro azul de 200px al hacer hover; en el celular el hover se queda pegado
   tras tocar y el recuadro no desaparece. Se anula el div vacio en cualquier estado. */
nav ul li div:empty{ display:none !important; }

/* Control propio del modulo, a la derecha de la barra. */
nav .barra-extra{
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 16px;
}
nav .barra-extra label{
	color: var(--barra-tx);
	text-transform: uppercase;
	font-size:12.5px;
	letter-spacing: .09em;
	margin: 0;
	white-space: nowrap;
	opacity:.85;
}
nav .barra-extra select{
	background: #fff;
	color: var(--tinta);
	border: 1px solid rgba(255,255,255,.5);
	border-radius: 4px;
	padding: 2px 8px;
	height: 24px;
	font-size:13px;
	letter-spacing: .04em;
	min-width: 165px;
}
nav .barra-extra select:focus{ border-color:#fff; outline: none; }

/* ------------------------------- clases de color de bootstrap dentro de tablas */
.table > thead > tr > th.success,
.table > thead > tr > td.success,
.table > tbody > tr > th.success,
.table > thead > tr > th.info,
.table > thead > tr > th.active{
	background:#eef1f2 !important;
	color: var(--tinta);
	border-bottom:2px solid var(--verde-vivo);
}
.table-striped > tbody > tr.success:nth-of-type(odd),
.table > tbody > tr.success > td{ background:#eaf5ee !important; }
.table > tbody > tr.danger  > td{ background:#fbeaeb !important; }
.table > tbody > tr.warning > td{ background:#fdf6e6 !important; }

/* ------------------------------------------------------------------------ pie */
.sugal-pie{
	border-top:1px solid var(--borde);
	color: var(--tinta-suave);
	font-size:13px;
	padding:16px 0;
	margin-top:34px;
	text-align:center;
}
.sugal-pie b{ color: var(--verde); }

/* --------------------------------------------------------------------- celular */
/* En pantalla angosta el menu del modulo se recortaba: el <ul> trae `overflow:hidden`
   con los <li> flotados, asi que lo que no cabia en una linea desaparecia. Aqui el
   menu ENVUELVE y el control de la barra (planta/combustible) baja a su propia
   linea a todo el ancho. La barra ya es sticky, asi que reserva su espacio y el
   contenido nunca queda debajo. */
@media (max-width: 640px){
	nav{ align-items: stretch; }
	nav > ul{ flex: 1 1 100%; overflow: visible; display: flex; flex-wrap: wrap; }
	nav > ul > li{ float: none; }
	nav ul li a{ padding: 9px 14px !important; }

	nav .barra-extra{
		margin-left: 0;
		width: 100%;
		flex-wrap: wrap;
		padding: 8px 14px 10px;
		border-top: 1px solid rgba(255,255,255,.25);
	}
	nav .barra-extra select{ min-width: 0; flex: 1 1 auto; }

	/* Un respiro entre la barra y el primer contenido. */
	.container{ padding-top: 8px; }
}