/* Ajustes sobre Pico: menú lateral fijo y estados en palabras (doc 11). */

/* Densidad de herramienta de trabajo: Pico agranda la letra con el ancho de
   la pantalla (hasta 125 %) y da mucho relleno a los campos. :root:root gana
   a sus reglas por especificidad, en cualquier ancho. */
:root:root {
  --pico-font-size: 93.75%;
  --pico-form-element-spacing-vertical: 0.5rem;
  --pico-form-element-spacing-horizontal: 0.75rem;
  --sidebar-width: 13rem;
}

h1 {
  font-size: 1.75rem;
}

th,
td {
  padding: 0.6rem 0.75rem;
}

.app {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--pico-card-background-color);
  border-right: 1px solid var(--pico-muted-border-color);
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sidebar .brand {
  font-weight: 700;
  font-size: 1.1rem;
}

/* Pico centra los ítems de nav y les da márgenes negativos: en el menú
   lateral se montaban unos sobre otros. */
.sidebar nav ul {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
}

.sidebar nav li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.sidebar nav a {
  display: block;
  margin: 0;
  padding: 0.45rem 0.75rem;
  border-radius: var(--pico-border-radius);
  text-decoration: none;
}

.sidebar nav a:not([aria-current="page"]):hover {
  background: var(--pico-muted-border-color);
}

.sidebar nav a[aria-current="page"] {
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
}

.sidebar .user {
  margin-top: auto;
  font-size: 0.85rem;
  color: var(--pico-muted-color);
}

.sidebar .user form {
  margin: 0.5rem 0 0;
}

.sidebar .user button {
  width: auto;
  padding: 0.3rem 0.9rem;
  font-size: 0.85rem;
}

.sidebar .user-menu {
  display: none;
}

main.content {
  padding: 2rem;
  max-width: 72rem;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.page-header h1 {
  margin: 0;
}

.auth {
  max-width: 26rem;
  margin: 10vh auto;
  padding: 0 1rem;
}

.auth .qr {
  display: block;
  margin: 1rem auto;
  width: 12rem;
  height: 12rem;
  image-rendering: pixelated;
}

.secret {
  font-family: var(--pico-font-family-monospace);
  word-break: break-all;
}

.recovery-codes {
  columns: 2;
  font-family: var(--pico-font-family-monospace);
  list-style: none;
  padding: 0;
}

.error {
  color: var(--pico-del-color);
}

.notice {
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--pico-primary);
  background: var(--pico-card-background-color);
  margin-bottom: 1rem;
}

.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Pico estira los botones de envío a todo el ancho; en las pantallas de
   trabajo van del tamaño de su texto (el login los mantiene anchos). */
main.content button[type="submit"],
main.content [role="button"] {
  width: auto;
}

/* Celular: el menú pasa a una barra compacta arriba (marca y Salir en una
   fila, secciones deslizables debajo) y nada se sale del ancho. */
@media (max-width: 48rem) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }
  .sidebar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.6rem 1rem 0.4rem;
    border-right: none;
    border-bottom: 1px solid var(--pico-muted-border-color);
  }
  /* min-width: 0 evita que el menú o el contenido ensanchen la página. */
  .sidebar,
  .sidebar nav,
  main.content {
    min-width: 0;
  }
  /* Las secciones pasan a una o dos líneas: todas a la vista, también la
     activa. */
  .sidebar nav {
    order: 3;
    flex: 1 0 100%;
  }
  .sidebar nav ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  .sidebar nav a {
    padding: 0.3rem 0.6rem;
    white-space: nowrap;
  }
  /* Cuenta: tu nombre abre Cambiar contraseña y Salir. */
  .sidebar .user {
    display: none;
  }
  .sidebar .user-menu {
    display: block;
    order: 2;
    margin: 0 0 0 auto;
  }
  .sidebar .user-menu summary {
    height: auto;
    padding: 0.3rem 2rem 0.3rem 0.75rem;
    font-size: 0.85rem;
  }
  .sidebar .user-menu ul li {
    direction: ltr;
  }
  .sidebar .user-menu form {
    margin: 0;
  }
  /* Las dos opciones se ven como botones del mismo ancho. */
  .sidebar .user-menu ul li {
    padding: 0.25rem 0.5rem;
  }
  .sidebar .user-menu [role="button"],
  .sidebar .user-menu button {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    text-align: center;
  }
  main.content {
    padding: 1rem;
  }
  h1 {
    font-size: 1.4rem;
  }
  .page-header,
  section.card > header {
    flex-wrap: wrap;
  }
  .rows li {
    flex-wrap: wrap;
  }
  .toolbar input[type="search"] {
    flex-basis: 100%;
    max-width: none;
  }
  nav.tabs a {
    padding: 0.45rem 0.6rem;
  }
  /* Columnas secundarias fuera; lo que no quepa se desliza dentro de la
     tabla, no la página. */
  .hide-sm {
    display: none;
  }
  main.content table {
    display: block;
    overflow-x: auto;
  }
}

.narrow {
  max-width: 28rem;
}

.badge.ok {
  background: #d1f2dc;
  color: #14532d;
}

.badge.warn {
  background: #fdf0c4;
  color: #713f12;
}

.badge.bad {
  background: #fde0e0;
  color: #7f1d1d;
}

.badge.muted {
  background: #e7e9ee;
  color: #374151;
}

.help {
  display: block;
  color: var(--pico-muted-color);
  font-size: 0.85rem;
}

.toolbar {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.toolbar input[type="search"] {
  flex: 1 1 18rem;
  max-width: 30rem;
  margin: 0;
}

.toolbar select {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
}

/* Filtro de dos o tres opciones (Todos · Solo misioneros). */
.segmented {
  display: inline-flex;
  width: auto;
  margin: 0;
  box-shadow: none;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  overflow: hidden;
}

.segmented a {
  padding: 0.35rem 0.85rem;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--pico-muted-color);
}

.segmented a + a {
  border-left: 1px solid var(--pico-muted-border-color);
}

.segmented a[aria-current="true"] {
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
}

/* Pestañas (Configuración). Anula los márgenes negativos de nav en Pico. */
nav.tabs {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 1px solid var(--pico-muted-border-color);
  margin-bottom: 1.5rem;
}

nav.tabs a {
  margin: 0 0 -1px;
  padding: 0.5rem 0.9rem;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--pico-muted-color);
  text-decoration: none;
}

nav.tabs a[aria-current="page"] {
  color: var(--pico-primary);
  border-bottom-color: var(--pico-primary);
  font-weight: 600;
}

/* Botones secundarios de encabezados (Editar, + Agregar cuenta, Nuevo
   débito): del tamaño de una acción, no de un formulario. */
.page-header [role="button"],
.page-header button,
section.card > header [role="button"],
section.card > header button {
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
  margin: 0;
}

input[type="file"] {
  width: auto;
  margin: 0;
}

table.list tbody tr {
  cursor: pointer;
}

table.list td small {
  color: var(--pico-muted-color);
}

section.card {
  margin-bottom: 2rem;
}

section.card > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

section.card > header h2 {
  margin: 0;
  font-size: 1.2rem;
}

.rows {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rows li {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.rows li .actions {
  display: flex;
  gap: 0.5rem;
  white-space: nowrap;
}

.rows li .actions form {
  margin: 0;
}

.rows li .actions button,
.rows li .actions a[role="button"] {
  padding: 0.25rem 0.75rem;
  font-size: 0.85rem;
  margin: 0;
}

.empty {
  color: var(--pico-muted-color);
  font-style: italic;
}

.inline-fields {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.inline-fields select,
.inline-fields input,
.inline-fields button,
.inline-fields [role="button"] {
  width: auto;
  margin: 0;
}

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr);
  gap: 2rem;
  align-items: start;
}

.preview {
  position: sticky;
  top: 1rem;
}

.picker-results {
  list-style: none;
  padding: 0;
}

.picker-results li {
  list-style: none;
  padding: 0;
}

.picker-results button {
  width: 100%;
  text-align: left;
  margin-bottom: 0.25rem;
}

fieldset.choices label {
  margin-bottom: 0.4rem;
}

@media (max-width: 48rem) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}