/* CSS personalizado para File Browser en app móvil (Ionic WebView) */

/* Safe area para status bar y home indicator */
:root {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
}

/* Header - agregar padding para status bar */
header,
#header,
.header,
nav {
  padding-top: var(--safe-area-top) !important;
  padding-top: calc(var(--safe-area-top) + 8px) !important;
}

/* Ajuste para el header principal de File Browser */
header#header,
.header-container,
#app > header,
#app > div > header {
  padding-top: var(--safe-area-top) !important;
  box-sizing: border-box;
}

/* Footer - agregar padding para home indicator */
footer,
#footer,
.footer,
.action-bar,
.bottom-bar {
  padding-bottom: var(--safe-area-bottom) !important;
  padding-bottom: calc(var(--safe-area-bottom) + 8px) !important;
}

/* Ajuste para botones de acción en la parte inferior */
.action,
.actions,
#listing .item[aria-selected="true"] ~ .action {
  padding-bottom: var(--safe-area-bottom) !important;
}

/* Body general */
body {
  padding-left: var(--safe-area-left);
  padding-right: var(--safe-area-right);
}

/* Contenedor principal */
#app,
.main-content,
main {
  padding-top: var(--safe-area-top);
  padding-bottom: var(--safe-area-bottom);
  min-height: 100vh;
  min-height: calc(100vh - var(--safe-area-top) - var(--safe-area-bottom));
}

/* Barra de herramientas superior */
.toolbar,
#toolbar,
.top-bar {
  top: var(--safe-area-top) !important;
}

/* Prompts y modales - ajustar para safe area */
.prompt,
.card-content,
.modal,
.dialog {
  max-height: calc(100vh - var(--safe-area-top) - var(--safe-area-bottom) - 40px) !important;
}

/* Ajustes para la vista de lista/grid */
#listing,
.listing {
  padding-bottom: calc(var(--safe-area-bottom) + 60px) !important;
}

/* Shell/sidebar */
.shell,
#shell {
  padding-top: var(--safe-area-top);
  padding-bottom: var(--safe-area-bottom);
}

/* Barra de búsqueda */
.search,
#search {
  top: calc(var(--safe-area-top) + 56px) !important;
}

/* Mejoras de UX móvil */
@media screen and (max-width: 768px) {
  /* Header más compacto en móvil */
  header {
    min-height: calc(56px + var(--safe-area-top)) !important;
  }

  /* Botones más grandes para touch */
  button,
  .button,
  a.button {
    min-height: 44px;
    min-width: 44px;
  }

  /* Mejor espaciado para items en lista */
  .item,
  .file,
  .folder {
    padding: 12px 16px !important;
  }

  /* FAB (floating action button) ajustado */
  .fab,
  .floating-button {
    bottom: calc(var(--safe-area-bottom) + 16px) !important;
    right: calc(var(--safe-area-right) + 16px) !important;
  }
}

/* Prevenir zoom no deseado en inputs */
input,
select,
textarea {
  font-size: 16px !important;
}

/* Scrollbar invisible en móvil */
@media (pointer: coarse) {
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}

/* ============================================
   LOGIN PAGE - Optimizado para móvil
   ============================================ */

/* Contenedor del login - centrado con safe area */
.login,
[class*="login"] {
  padding-top: var(--safe-area-top) !important;
  padding-bottom: var(--safe-area-bottom) !important;
  min-height: 100vh;
  min-height: calc(100vh - var(--safe-area-top) - var(--safe-area-bottom));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* Card del login - más grande y centrada */
.card {
  width: 100% !important;
  max-width: 400px !important;
  margin: 0 auto !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
  overflow: hidden;
}

/* Título del login */
.card-title {
  font-size: 1.8rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  padding: 24px 20px 16px !important;
  margin: 0 !important;
}

/* Contenido del card */
.card-content {
  padding: 20px 24px !important;
  max-height: none !important;
}

/* Inputs del login - más grandes para touch */
.card .input,
.card input[type="text"],
.card input[type="password"],
.card input[type="email"] {
  width: 100% !important;
  height: 52px !important;
  font-size: 16px !important;
  padding: 14px 16px !important;
  margin-bottom: 16px !important;
  border-radius: 12px !important;
  border: 2px solid var(--borderPrimary, rgba(0,0,0,0.1)) !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.card .input:focus,
.card input:focus {
  border-color: var(--blue, #2196f3) !important;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15) !important;
  outline: none !important;
}

/* Labels de inputs */
.card label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--textSecondary, #333);
}

/* Botón de login - grande y prominente */
.card .button,
.card button[type="submit"],
.card-action .button {
  width: 100% !important;
  height: 52px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  margin-top: 8px !important;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.2s ease !important;
}

.card .button:active,
.card button:active {
  transform: scale(0.98) !important;
}

/* Área de acción del card */
.card-action {
  padding: 16px 24px 24px !important;
  background: transparent !important;
  border-top: none !important;
}

/* Mensaje de error en login */
.card .error,
.card [class*="error"],
.wrong__password,
.share__wrong__password {
  background: var(--red, #f44336) !important;
  color: white !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  margin-bottom: 16px !important;
  font-size: 14px !important;
  text-align: center !important;
}

/* Logo/icono en login */
.card .logo,
.card img,
.card svg {
  display: block;
  margin: 0 auto 16px;
  max-width: 80px;
  max-height: 80px;
}

/* Responsive para pantallas muy pequeñas */
@media screen and (max-width: 380px) {
  .card {
    border-radius: 12px !important;
    margin: 0 8px !important;
  }

  .card-title {
    font-size: 1.5rem !important;
  }

  .card-content {
    padding: 16px 16px !important;
  }

  .card-action {
    padding: 12px 16px 20px !important;
  }
}

/* Mejoras adicionales para iOS */
@supports (-webkit-touch-callout: none) {
  .card .input,
  .card input {
    /* Prevenir zoom en iOS */
    font-size: 16px !important;
  }

  /* Mejor apariencia de inputs en iOS */
  input {
    -webkit-appearance: none;
    border-radius: 12px;
  }
}

/* Animación sutil al cargar */
.card {
  animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}