/* ============================================================
   ITFinUnited MinIO Branding — Login + Dashboard
   Issue #84-minio | 2026-07-13 | v3 (isotipo x2 + anclado a boton)
   Inyectado via Nginx sub_filter en console-s3.itfinunited.com
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

/* ── VARIABLES CORPORATIVAS ── */
:root {
  --itfin-navy: #041E42;
  --itfin-navy-mid: #0a2d5c;
  --itfin-navy-light: #23405C;
  --itfin-orange: #E87722;
  --itfin-orange-hover: #d56a1e;
  --itfin-orange-active: #c05f18;
  --itfin-sky: #00A9E0;
  --itfin-sky-tint: rgba(0, 169, 224, 0.1);
  --itfin-cyan-stroke: #29ABE2;
  --itfin-font: 'Montserrat', 'Segoe UI', Arial, sans-serif;
}

/* ── GLOBAL FONT ── */
body, input, button, select, textarea {
  font-family: var(--itfin-font) !important;
}

/* ================================================================
   FASE 1: LOGIN PAGE
   ================================================================ */

/* FIX SCROLL: forzar viewport height sin overflow */
html, body {
  overflow: hidden !important;
  height: 100vh !important;
  max-height: 100vh !important;
}

.mainContainer {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

/* Panel izquierdo — Navy gradient homologado Grommunio */
.decorationPanel {
  background: linear-gradient(160deg, var(--itfin-navy) 0%, var(--itfin-navy-mid) 50%, var(--itfin-navy) 100%) !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Ocultar texto marketing de MinIO */
.promoHeader,
.promoInfo {
  display: none !important;
}

/* Reemplazar contenido del promo con branding ITFinUnited */
.promoContainer {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
}

/* Isotipo 3 cubos — version para fondo oscuro */
.promoContainer::before {
  content: "";
  position: absolute;
  top: 144px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 320px;
  background: url("/itfin/isotipo.svg") no-repeat center center;
  background-size: contain;
  filter: drop-shadow(0 6px 22px rgba(0,0,0,0.35));
  z-index: 1;
  pointer-events: none;
}

/* Wordmark ITFINunited + subtitulo */
.promoContainer::after {
  content: "Almacenamiento Corporativo";
  position: absolute;
  top: 270px;
  left: 50%;
  transform: translateX(-50%);
  background: url("/itfin/wordmark.svg") no-repeat center top;
  background-size: 280px auto;
  padding-top: 52px;
  width: 280px;
  text-align: center;
  color: rgba(255,255,255,0.45);
  font-family: var(--itfin-font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  z-index: 1;
}

/* Hexagono decorativo */
.decorationPanel::before {
  content: "";
  position: absolute;
  bottom: 40px;
  left: 30px;
  width: 200px;
  height: 200px;
  background: rgba(0, 169, 224, 0.06);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: 0;
  pointer-events: none;
}

/* Video container de MinIO — ocultar */
.videoContainer {
  display: none !important;
}

/* Panel derecho (formulario) */
.formPanel {
  background: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 50px 60px !important;
  overflow: hidden !important;
}

/* Ocultar logo MinIO en formulario */
.formPanel .logoContainer {
  display: none !important;
}

/* Titulo sobre el formulario */
.formContainer::before {
  content: "Iniciar sesion en ITFinUnited";
  display: block;
  font-family: var(--itfin-font);
  font-size: 22px;
  font-weight: 600;
  color: var(--itfin-navy);
  margin-bottom: 4px;
}

.formContainer::after {
  content: "Ingresa tus credenciales para acceder al almacenamiento";
  display: block;
  font-family: var(--itfin-font);
  font-size: 14px;
  color: #8892a4;
  margin-bottom: 16px;
}

/* Inputs del formulario */
.formContainer input[type="text"],
.formContainer input[type="password"] {
  border: 1.5px solid #dde0e6 !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-family: var(--itfin-font) !important;
  color: #333 !important;
  background: #fafbfc !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.formContainer input:focus {
  border-color: var(--itfin-sky) !important;
  box-shadow: 0 0 0 3px rgba(0, 169, 224, 0.12) !important;
  outline: none !important;
  background: #fff !important;
}

/* Boton Login — Naranja */
.formContainer button[type="submit"],
.formContainer button.button-callAction {
  background: var(--itfin-orange) !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(232, 119, 34, 0.3) !important;
  color: #fff !important;
  font-family: var(--itfin-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  height: 46px !important;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease !important;
}

.formContainer button[type="submit"]:hover,
.formContainer button.button-callAction:hover {
  background: var(--itfin-orange-hover) !important;
  box-shadow: 0 4px 12px rgba(232, 119, 34, 0.4) !important;
}

.formContainer button[type="submit"]:active,
.formContainer button.button-callAction:active {
  background: var(--itfin-orange-active) !important;
}

/* Reset toggle password button */
.formContainer button[type="button"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  height: auto !important;
  width: auto !important;
  border-radius: 50% !important;
  color: #999 !important;
}

/* Footer links login — ocultar MinIO */
.formPanel a[href*="min.io"],
.formPanel a[href*="github.com/minio"] {
  display: none !important;
}

/* Footer corporativo login */

.footer, .separator { display: none !important; }
#root > div:first-child { max-height: 100vh !important; overflow: hidden !important; }


.mainContainer::after {
  content: "\00A9  2026 ITFinUnited. Todos los derechos reservados.";
  position: fixed;
  bottom: 8px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9px;
  color: #bbb;
  font-family: var(--itfin-font);
  z-index: 1;
}

/* ================================================================
   FASE 2: DASHBOARD POST-LOGIN
   ================================================================ */

/* Desbloquear scroll en dashboard (solo login lo bloquea) */
.menuBox ~ * {
  overflow: auto !important;
}

/* Sidebar — Navy gradient */
.menuBox {
  background: linear-gradient(180deg, var(--itfin-navy) 0%, var(--itfin-navy-mid) 50%, var(--itfin-navy) 100%) !important;
  background-image: linear-gradient(180deg, var(--itfin-navy) 0%, var(--itfin-navy-mid) 50%, var(--itfin-navy) 100%) !important;
}

/* Logo sidebar — ocultar MinIO SVG, inyectar wordmark */
.menuLogoContainer {
  position: relative !important;
  min-height: 55px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 0 !important;
}

.menuLogoContainer svg {
  display: none !important;
}

.menuLogoContainer::after {
  content: "";
  display: block;
  width: 160px;
  height: 44px;
  background: url("/itfin/sidebar-logo.svg") no-repeat center center;
  background-size: contain;
}

/* Collapse button */
.collapseButton svg {
  color: rgba(255,255,255,0.5) !important;
}

/* Bucket items hover */
.menuItemButton:hover {
  background: rgba(0, 169, 224, 0.08) !important;
}

/* Bucket seleccionado — Sky left border */
.menuItemButton[class*="selected"],
.menuItemButton.selected,
.menuItemButton[aria-selected="true"] {
  border-left: 3px solid var(--itfin-sky) !important;
  background: var(--itfin-sky-tint) !important;
}

/* Bottom links — ocultar Documentation y License */
a[href*="docs.min.io"],
a[href*="min.io/community"],
a[href*="subnet"] {
  display: none !important;
}

/* ── HEADER / TOOLBAR ── */
.page-header {
  border-bottom: 2px solid var(--itfin-navy) !important;
}

.page-header h1,
.page-header [class*="title"] {
  color: var(--itfin-navy) !important;
  font-weight: 600 !important;
}

/* ── BOTONES DE ACCION ── */
.button-callAction,
button[class*="callAction"] {
  background: var(--itfin-orange) !important;
  border-color: var(--itfin-orange) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: background 0.2s ease, box-shadow 0.2s ease !important;
}

.button-callAction:hover,
button[class*="callAction"]:hover {
  background: var(--itfin-orange-hover) !important;
  box-shadow: 0 2px 8px rgba(232, 119, 34, 0.3) !important;
}

.button-callAction:active,
button[class*="callAction"]:active {
  background: var(--itfin-orange-active) !important;
}

.button-regular,
button[class*="regular"] {
  border-color: var(--itfin-navy) !important;
  color: var(--itfin-navy) !important;
  border-radius: 8px !important;
}

.button-regular:hover,
button[class*="regular"]:hover {
  background: rgba(4, 30, 66, 0.06) !important;
}

/* ── BREADCRUMBS Y LINKS ── */
.mainPage a {
  color: var(--itfin-sky) !important;
}

.mainPage a:hover {
  color: var(--itfin-navy) !important;
}

/* ── SEARCH BAR ── */
.mainPage input:focus {
  border-color: var(--itfin-sky) !important;
  box-shadow: 0 0 0 3px rgba(0, 169, 224, 0.12) !important;
}

/* ── BUCKET INFO ── */
.mainPage [class*="screenTitle"],
.mainPage [class*="detailsTitle"] {
  color: var(--itfin-navy) !important;
  font-weight: 600 !important;
}

/* Checkboxes */
input[type="checkbox"]:checked {
  accent-color: var(--itfin-sky) !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .formPanel {
    padding: 30px 24px !important;
  }
  .decorationPanel {
    display: none !important;
  }
}