/* BOTARSA — Menu movil compartido (socio y administrador) */

.app-mobile-menu{
  display:none; position:fixed; inset:0; background: rgba(10,24,38,0.6); z-index: 500;
}
.app-mobile-menu.open{ display:block; }

.amm-panel{
  background: var(--navy); color: var(--paper);
  width: 78%; max-width: 300px; height: 100%;
  padding: 24px 18px; display:flex; flex-direction:column; gap: 2px;
  box-shadow: 4px 0 24px rgba(0,0,0,0.35);
}
.amm-close{
  align-self:flex-end; background:none; border:none; color: var(--paper);
  font-size: 1.3rem; cursor:pointer; margin-bottom: 18px; padding: 4px 8px;
}
.amm-link{
  color: rgba(241,236,223,0.85); text-decoration:none;
  padding: 13px 10px; font-size: 0.95rem; border-radius: 3px;
}
.amm-link:hover{ background: rgba(241,236,223,0.06); }
.amm-link.active{
  background: rgba(216,179,108,0.12); color:#fff;
  box-shadow: inset 2px 0 0 var(--brass-light);
}
.amm-logout{
  margin-top:auto; border-top: 1px solid rgba(241,236,223,0.15);
  padding-top: 16px; color: var(--brass-light);
}

.tb-menu-btn{ display:none; background:none; border:none; color: var(--paper); font-size: 1.4rem; cursor:pointer; line-height:1; padding: 2px 6px; }
@media (max-width: 860px){ .tb-menu-btn{ display:inline-flex; align-items:center; } }

.mt-menu-btn{ background:none; border:none; color: var(--paper); font-size: 1.4rem; cursor:pointer; line-height:1; padding: 2px 6px; }

/* El logo "BOTARSA" es ahora un link a la pantalla principal */
.tb-brand, .mt-brand, .side-brand{
  text-decoration:none !important;
  color: inherit !important;
  cursor:pointer;
}

/* Nunca permitir scroll horizontal de toda la pagina — el contenido ancho
   (tablas, etc.) scrollea dentro de su propio contenedor, no la pagina entera */
html, body{
  overflow-x: hidden;
  max-width: 100vw;
}

/* Arregla el "grid blowout": por defecto un hijo de grid/flex no se achica
   mas alla del tamaño de su contenido, lo que hace que columnas armadas con
   1fr terminen mas anchas que la pantalla en el celular. Esto le permite
   encogerse correctamente. No pisa ningun min-width puesto a proposito
   porque esta regla tiene la especificidad mas baja posible. */
*{ min-width: 0; }

/* La barra superior venia apretada en celular (insignia de creditos
   larga + menu + avatar). Se compacta solo en anchos chicos. */
@media (max-width: 860px){
  .tb-right{ gap: 8px !important; }
  .credit-badge{
    font-size: 0.6rem !important;
    padding: 4px 6px !important;
    white-space: nowrap;
    max-width: 118px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ============================================================
   Sensacion de app nativa: zonas seguras (notch / home indicator
   del iPhone), sin rebote de scroll, sin resaltado al tocar, etc.
   ============================================================ */
html{
  overscroll-behavior-y: none;
}
body{
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}
a, button, .tb-link, .nav-item, .quick-card, .amm-link, .btn-primary, .btn-secondary,
.btn-danger, .btn-confirm, .btn-reserve, .btn-link, .filter-tab, .subtab, .toggle-btn{
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
input, textarea, select{
  font-size: 16px; /* evita que iOS haga zoom automatico al enfocar un campo */
}

/* Barras superiores: se corren para no quedar debajo del notch/isla dinamica.
   "height" fijo se cambia por "min-height" para que la barra pueda crecer
   hacia abajo del notch en vez de aplastar el contenido. */
.topbar{
  height: auto !important;
  min-height: 64px;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top);
  padding-bottom: 0;
  padding-left: calc(env(safe-area-inset-left) + 32px);
  padding-right: calc(env(safe-area-inset-right) + 32px);
}
.mobile-topbar{
  box-sizing: border-box;
  padding-top: calc(env(safe-area-inset-top) + 16px);
  padding-left: calc(env(safe-area-inset-left) + 20px);
  padding-right: calc(env(safe-area-inset-right) + 20px);
}

/* ============================================================
   Barra de navegacion inferior (solo celular) — el "look" de app
   ============================================================ */
.app-bottom-nav{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index: 400;
  background: var(--navy);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 14px rgba(10,24,38,0.18);
}
.abn-row{ display:flex; }
.abn-item{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 3px; padding: 9px 4px 8px 4px; text-decoration:none;
  color: rgba(241,236,223,0.55); font-size: 0.65rem; font-weight:500;
  -webkit-tap-highlight-color: transparent;
}
.abn-item .abn-icon{ font-size: 1.2rem; line-height:1; }
.abn-item.active{ color: var(--brass-light); }

body.has-bottom-nav{
  padding-bottom: calc(60px + env(safe-area-inset-bottom));
}

@media (max-width: 860px){
  .app-bottom-nav{ display:block; }
}
@media (min-width: 861px){
  body.has-bottom-nav{ padding-bottom: 0; }
}

/* ============================================================
   Modales: cuando el contenido no entra en pantalla, tiene que
   desplazarse el modal (no la pantalla de atras). Se bloquea el
   scroll del fondo mientras un modal esta abierto (ver body.modal-open,
   activado/desactivado desde JS al abrir/cerrar cada modal).
   ============================================================ */
.modal-overlay{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: max(20px, env(safe-area-inset-top));
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}
.modal-card{
  max-height: calc(100vh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.modal-open{
  overflow: hidden !important;
  position: fixed;
  width: 100%;
}

/* En celular, los botones "Cancelar"/"Guardar cambios" de los modales
   quedaban apretados uno junto al otro contra el borde derecho. Se
   apilan a todo el ancho, con más espacio para tocarlos cómodo. */
@media (max-width: 480px){
  .modal-actions{
    flex-direction: column;
    gap: 10px !important;
  }
  .modal-actions button{
    width: 100%;
    padding: 14px 20px !important;
    font-size: 0.95rem !important;
  }
}

/* ============================================================
   Navegación tipo app: al cambiar de pantalla no se recarga la
   página entera (ver js/router.js). La pantalla se desliza hacia
   un lado y se desvanece, y la siguiente entra deslizando desde el
   lado opuesto — como el paso de pantalla de una app nativa, no
   el salto brusco de una página web.
   ============================================================ */
body{
  opacity: 1;
}
/* "transform" (aunque sea de 0px) hace que los elementos position:fixed
   de adentro (la barra inferior, los modales) se posicionen relativos
   al body en vez de a la pantalla — por eso esta regla SOLO se aplica
   mientras dura la animación (clase agregada/sacada desde router.js),
   nunca de forma permanente. */
body.app-mover{
  transform: translateX(var(--app-offset, 0px));
}
body.app-transicion{
  transition: opacity 0.16s ease, transform 0.16s ease;
}

/* ============================================================
   Patrones de lista "estilo Ajustes" (como en los Ajustes de
   iOS): un título grande, una fila de identidad, y tarjetas
   agrupadas con filas label/valor. Usa los mismos colores y
   tipografía de cada pantalla (navy/dorado/Fraunces) — solo
   cambia la forma en la que se presenta la información.
   ============================================================ */
.native-title{
  font-family:'Fraunces', serif; font-weight:600; font-size: 1.7rem;
  margin: 4px 0 18px 0;
}
.id-row{
  display:flex; align-items:center; gap: 14px;
  background:#fff; border-radius: 14px; padding: 14px 16px; margin-bottom: 22px;
  box-shadow: 0 1px 2px rgba(15,36,56,0.06);
}
.id-name{ font-weight:600; font-size: 0.98rem; margin:0; }
.id-sub{ font-size: 0.8rem; color: var(--ink-soft); margin: 2px 0 0 0; }

.group-label{
  font-size: 0.7rem; text-transform:uppercase; letter-spacing: 0.05em;
  color: var(--ink-soft); margin: 0 4px 8px 4px; font-weight:600;
}
.group{
  background:#fff; border-radius: 14px; overflow:hidden; margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(15,36,56,0.06);
}
.row{
  display:flex; align-items:center; justify-content:space-between; gap: 12px;
  padding: 13px 16px; border-top: 1px solid var(--paper-dim); font-size: 0.86rem; min-height: 22px;
}
.row:first-child{ border-top:none; }
.row .rlabel{ color: var(--ink); }
.row .rsub{ display:block; font-size: 0.72rem; color: var(--ink-soft); margin-top:2px; font-weight:400; }
.row .rval{ color: var(--ink-soft); text-align:right; }
.row .chev{ color: var(--ink-soft); opacity:0.6; font-size: 0.95rem; }
.row-tap{ cursor:pointer; }
.row-tap:hover{ background: var(--paper); }
.row-edit .rinput{
  border:none; background:none; outline:none; text-align:right; flex:1;
  font-family:'IBM Plex Sans', sans-serif; font-size: 0.86rem; color: var(--ink); padding:0;
}
.row-edit .rinput::placeholder{ color: var(--ink-soft); }