/* ===========================================================================
   BASE — sistema de diseño portado de lib/ui/common.dart
   Paleta, sombras, paneles, pastillas, botones y diálogos de la app iPad.
   =========================================================================== */

:root {
  /* Paleta (common.dart) */
  --navy:      #22395B;   /* kNavy — iconos y textos */
  --navy-soft: #5B6982;   /* kNavySoft — texto secundario gris azulado */
  --blue:      #1E96FF;   /* kBlue — acento (logo "Fab", barras, puntos) */
  --panel:     #F3F4F7;   /* kPanel — fondo de pastillas y paneles */
  --divider:   #D9DBE0;   /* kDivider */
  --green-ok:  #35C759;   /* kGreenOk — led "System OK" */
  --bg:        #E8E9EC;   /* color bajo Fondo.jpg */

  /* Tarjeta de registro (registration_screen.dart) */
  --card-bg:      #F7F8FA;
  --field-border: #D8DBE0;
  --hint-grey:    #9AA1AB;
  --dark:         #1C2230;
  --grey:         #5E6671;
  --error-red:    #E0443A;
  --ok-green:     #2E9E5B;

  /* Sombra suave de todas las pastillas / paneles (kSoftShadow) */
  --soft-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
  /* Marco blanco fino de paneles (kPanelBorder) */
  --panel-border: 1.4px solid rgba(255, 255, 255, 0.85);

  /* Animación de menús (home_screen.dart) */
  --menu-anim: 340ms cubic-bezier(0.215, 0.61, 0.355, 1); /* easeOutCubic */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif;
  color: var(--navy);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

img { -webkit-user-drag: none; }

/* ---------------------------------------------------------------------------
   FONDO COMPARTIDO (AppBackground: Fondo.jpg cover sobre #E8E9EC)
   --------------------------------------------------------------------------- */
.app-background {
  position: fixed;
  inset: 0;
  background: var(--bg) url('../assets/images/Fondo.jpg') center / cover no-repeat;
}

/* ---------------------------------------------------------------------------
   PANTALLAS — cada una llena la ventana; el router hace fundidos entre ellas
   (fadeRoute: 550 ms de entrada / 400 ms de salida)
   --------------------------------------------------------------------------- */
.screen {
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}
.screen.active {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 550ms ease;
}

/* ---------------------------------------------------------------------------
   PANEL (AppPanel: gris claro, redondeado, marco blanco + sombra suave)
   --------------------------------------------------------------------------- */
.app-panel {
  background: var(--panel);
  border: var(--panel-border);
  border-radius: 26px;
  box-shadow: var(--soft-shadow);
  padding: 22px;
}

/* ---------------------------------------------------------------------------
   BOTONES (PrimaryButton)
   --------------------------------------------------------------------------- */
button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  color: inherit;
}

.btn-primary {
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 30px;
  border-radius: 22px;
  transition: filter 120ms ease, transform 80ms ease;
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:active { transform: scale(0.97); }

.btn-outline {
  background: transparent;
  color: var(--navy);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 30px;
  border-radius: 22px;
  border: 1.4px solid var(--navy);
  transition: background 120ms ease, transform 80ms ease;
}
.btn-outline:hover { background: rgba(34, 57, 91, 0.06); }
.btn-outline:active { transform: scale(0.97); }

/* ---------------------------------------------------------------------------
   ICONOS (AppIcon: PNG de assets/icons con reserva Material)
   El fallback se resuelve en JS ocultando el <img> roto y mostrando el glifo.
   --------------------------------------------------------------------------- */
.app-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.app-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.app-icon .fallback {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: var(--navy);
}
.app-icon.broken img { display: none; }
.app-icon.broken .fallback { display: flex; }

/* ---------------------------------------------------------------------------
   DIÁLOGOS (showAppDialog: fundido 260 ms, barrera negra al 18 %)
   --------------------------------------------------------------------------- */
.app-dialog-barrier {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 260ms ease-out;
  z-index: 1000;
}
.app-dialog-barrier.open { opacity: 1; }

.app-dialog-holder {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100vw;
  max-height: 100vh;
}

/* Diálogo de contraseña (promptPassword) */
.pwd-dialog {
  width: 400px;
  padding: 26px;
  border-radius: 28px;
  display: flex;
  flex-direction: column;
}
.pwd-title { font-size: 22px; font-weight: 800; color: var(--navy); }
.pwd-user  { font-size: 15px; font-weight: 600; color: var(--navy-soft); margin-top: 4px; }
.pwd-input {
  margin-top: 16px;
  font-family: inherit;
  font-size: 16px;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--field-border);
  border-radius: 14px;
  padding: 13px 16px;
  outline: none;
}
.pwd-input:focus { border-color: var(--blue); }
.pwd-input::placeholder { color: var(--navy-soft); }
.pwd-error {
  margin-top: 10px;
  color: var(--error-red);
  font-size: 14px;
  font-weight: 600;
}
.pwd-actions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* ---------------------------------------------------------------------------
   BLOQUE DE LOGO (LogoBlock: Logotipo.png + versión debajo)
   --------------------------------------------------------------------------- */
.logo-block { display: inline-flex; flex-direction: column; align-items: flex-start; }
.logo-block img { height: 34px; display: block; }
.logo-block .version {
  font-size: 11px;
  color: var(--navy-soft);
  margin-top: 2px;
}
/* Reserva textual si falta Logotipo.png: "Pack" negro + "Fab" azul */
.logo-text { font-size: 30px; font-weight: 500; letter-spacing: -0.5px; color: rgba(0,0,0,.87); }
.logo-text b { color: var(--blue); font-weight: 700; }

/* ---------------------------------------------------------------------------
   Accesibilidad: foco visible con teclado, respeto de reduced motion
   --------------------------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}