/* ═══════════════════════════════════════════════════════════════════
   M&B2.IA — app_ui.css
   Mobile-first. Breakpoints: 480px · 768px · 1024px
   ═══════════════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────────── */
:root {
  --bg:          #0f0f10;
  --panel:       #171719;
  --panel-soft:  #141416;
  --border:      rgba(255,255,255,.08);
  --border-md:   rgba(255,255,255,.13);
  --text:        #f4f1ea;
  --muted:       #cfc7bc;
  --muted-dim:   #8a8278;
  --accent:      #c0392b;
  --accent-hover:#a93226;
  --accent-soft: #e5d5bc;
  --ok:          #2f7b53;
  --ok-bg:       #153726;
  --warn:        #8c5b22;
  --warn-bg:     #2a1f0a;
  --danger:      #a3454b;
  --danger-bg:   #3d1a18;
  --shadow:      0 8px 24px rgba(0,0,0,.32);
  --shadow-lg:   0 18px 40px rgba(0,0,0,.40);
  --radius-sm:   10px;
  --radius:      14px;
  --radius-lg:   20px;
  --radius-xl:   24px;
  --tap:         48px;   /* altura mínima para targets táctiles */
  --gap:         12px;
  --wrap-pad:    14px;
}

/* ── Reset mínimo ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
button, input, select, textarea { font-family: inherit; }

/* ── Shell de app ──────────────────────────────────────────────── */
body.app-shell {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  background: radial-gradient(circle at top, #191919 0%, #111 45%, #090909 100%);
  color: var(--text);
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}

/* ── Topbar ────────────────────────────────────────────────────── */
.app-topbar {
  position: sticky; top: 0; z-index: 999;
  background: #111;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 var(--wrap-pad);
  height: 52px;
  min-height: 52px;
  overflow: hidden;
}
.app-topbar-title {
  font-weight: 900;
  letter-spacing: .02em;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}
.app-topbar small {
  opacity: .75;
  font-weight: 600;
  font-size: 12px;
}
.app-wordmark .m  { color: var(--accent) }
.app-wordmark .amp{ color: #fff; margin: 0 1px }
.app-wordmark .b  { color: var(--accent-soft) }
.app-wordmark .ia { color: var(--accent) }

.app-topbar-nav {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.app-chip,
.app-topbar-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--tap);
  min-width: var(--tap);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  padding: 0 10px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.app-topbar-nav a {
  font-size: 18px;
  padding: 0 8px;
  min-width: 40px;
  height: 40px;
}
.app-topbar-nav a:hover,
.app-chip:hover { background: rgba(255,255,255,.09); border-color: var(--border-md) }
.app-chip strong { color: #fff; margin-left: 4px; }

/* Ocultar nombre de usuario en pantallas muy pequeñas */
@media (max-width: 400px) {
  .app-chip strong { display: none }
  .app-chip        { min-width: 36px; padding: 0 8px }
  .app-topbar small { display: none }
}

/* ── Contenedor principal ──────────────────────────────────────── */
.app-shell-wrap {
  max-width: 1150px;
  margin: 0 auto;
  padding: 16px var(--wrap-pad) 48px;
}
@media (min-width: 768px) {
  :root { --wrap-pad: 20px }
  .app-shell-wrap { padding-top: 24px }
  body.app-shell { font-size: 15px }
}
@media (min-width: 1024px) {
  :root { --wrap-pad: 28px }
  .app-shell-wrap { padding-top: 28px }
}

/* ── Paneles y cards ───────────────────────────────────────────── */
.app-hero,
.app-panel,
.app-card {
  background: linear-gradient(180deg, rgba(23,23,25,.98), rgba(17,17,18,.98));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.app-hero   { padding: 18px; margin-bottom: 14px }
.app-panel  { padding: 16px }
.app-card   { padding: 16px; text-decoration: none; color: inherit; display: block }

.app-hero h1, .app-panel h1,
.app-panel h2, .app-card h2 { margin: 0 0 8px; font-size: 18px }
.app-sub { margin: 0; color: var(--muted); line-height: 1.45 }

.app-card:hover { border-color: rgba(192,57,43,.55); transform: translateY(-1px) }
.app-card strong, .app-card h2 {
  display: block; font-size: 16px; margin: 0 0 6px;
}
.app-card .muted { color: var(--muted); font-size: 13px; line-height: 1.4 }

@media (min-width: 768px) {
  .app-hero   { padding: 24px; margin-bottom: 16px }
  .app-panel  { padding: 20px }
  .app-card   { padding: 20px }
  .app-hero h1, .app-panel h1,
  .app-panel h2, .app-card h2 { font-size: 20px }
  .app-card strong, .app-card h2 { font-size: 18px }
  .app-card .muted { font-size: 14px }
}

/* Grid de cards */
.app-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
@media (min-width: 480px) {
  .app-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) }
}
@media (min-width: 768px) {
  .app-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px }
}

/* ── Acciones y botones ────────────────────────────────────────── */
.app-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.app-btn,
.app-btn-secondary,
.app-btn-danger,
.app-btn-ok,
.app-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 16px;
  border: none;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  transition: background .15s, filter .15s;
}
.app-btn            { background: var(--accent);   color: #fff }
.app-btn:hover      { background: var(--accent-hover) }
.app-btn-secondary,
.app-link-btn       { background: #242427; color: #fff; border: 1px solid var(--border) }
.app-btn-secondary:hover,
.app-link-btn:hover { background: #2e2e32 }
.app-btn-danger     { background: #6a2026; color: #fff }
.app-btn-danger:hover { background: #7e2730 }
.app-btn-ok         { background: #1f5a3f; color: #fff }
.app-btn-ok:hover   { background: #26724f }

/* En móvil, los botones dentro de .app-actions van a ancho completo */
@media (max-width: 479px) {
  .app-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .app-actions > .app-btn,
  .app-actions > .app-btn-secondary,
  .app-actions > .app-btn-danger,
  .app-actions > .app-btn-ok,
  .app-actions > .app-link-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Formularios ───────────────────────────────────────────────── */
.app-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 600px) {
  .app-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

.app-label {
  display: block;
  font-size: 11px;
  color: #cebfa9;
  font-weight: 800;
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.app-input,
.app-select,
.app-textarea {
  width: 100%;
  padding: 13px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border-md);
  background: #101011;
  color: #fff;
  font: inherit;
  font-size: 16px; /* 16px evita zoom automático en iOS */
  -webkit-appearance: none;
  appearance: none;
}
.app-input:focus,
.app-select:focus,
.app-textarea:focus {
  outline: none;
  border-color: rgba(192,57,43,.6);
}
.app-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.app-textarea { min-height: 120px; resize: vertical }
.app-note { margin: 6px 0 0; color: var(--muted); font-size: 13px }

/* ── Badges ────────────────────────────────────────────────────── */
.app-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.app-badge.ok   { background: var(--ok-bg);     border-color: var(--ok);     color: #70c48f }
.app-badge.off  { background: var(--danger-bg); border-color: var(--danger); color: #e87a70 }
.app-badge.soft { background: #1d2e45;          border-color: #3f6d9c;       color: #7aace8 }
.app-badge.warn { background: var(--warn-bg);   border-color: var(--warn);   color: #d4a855 }

/* ── Listas ────────────────────────────────────────────────────── */
.app-list { display: grid; gap: var(--gap) }
.app-list-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
@media (min-width: 600px) {
  .app-list-row { grid-template-columns: minmax(0,1fr) auto; align-items: center }
}
.app-list-row .meta {
  display: flex; gap: 8px; flex-wrap: wrap;
  align-items: center; margin-top: 6px;
  color: var(--muted); font-size: 13px;
}
.app-list-row h3 { margin: 0; font-size: 17px }
.app-divider { height: 1px; background: var(--border); margin: 16px 0 }

/* ── Mensajes de estado ────────────────────────────────────────── */
.app-msg {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.45;
}
.app-msg.ok   { background: var(--ok-bg);     color: #70c48f; border: 1px solid var(--ok) }
.app-msg.err  { background: var(--danger-bg); color: #e87a70; border: 1px solid #6b2d28 }
.app-msg.warn { background: var(--warn-bg);   color: #d4a855; border: 1px solid #5a4010 }

/* ── Badge usuario / local ─────────────────────────────────────── */
.user-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--border-md);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  font-size: 12px; font-weight: 700;
  color: var(--accent-soft);
  text-transform: uppercase;
  white-space: nowrap;
}
.user-badge strong { color: #fff }

/* ── Cabecera de sección ───────────────────────────────────────── */
.app-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.app-section-head h1,
.app-section-head h2 { margin: 0; font-size: 18px }
.app-section-sub { color: var(--muted); font-size: 13px; margin: 4px 0 0 }
@media (min-width: 768px) {
  .app-section-head h1,
  .app-section-head h2 { font-size: 22px }
  .app-section-sub { font-size: 14px }
}

/* ── Toast (notificación flotante) ─────────────────────────────── */
.app-toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  border-radius: var(--radius);
  font-size: 14px; font-weight: 700;
  z-index: 9000;
  pointer-events: none;
  white-space: nowrap;
  max-width: calc(100vw - 32px);
  text-align: center;
  transition: opacity .3s;
}
.app-toast.ok  { background: var(--ok-bg);     color: #70c48f; border: 1px solid var(--ok) }
.app-toast.err { background: var(--danger-bg); color: #e87a70; border: 1px solid #6b2d28 }

/* ── Modal base ────────────────────────────────────────────────── */
.app-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.72);
  z-index: 500;
  display: flex;
  align-items: flex-end;   /* móvil: desde abajo */
  justify-content: center;
  padding: 0;
}
.app-modal {
  background: var(--panel);
  border: 1px solid var(--border-md);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 24px 20px 32px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
@media (min-width: 600px) {
  .app-modal-overlay { align-items: center; padding: 20px }
  .app-modal {
    border-radius: var(--radius-xl);
    max-width: 420px;
    width: auto;
    min-width: 340px;
    padding: 28px;
    max-height: 85vh;
  }
}
.app-modal h3     { margin: 0 0 8px; font-size: 18px }
.app-modal p      { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.5 }
.app-modal-actions{ display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap }
@media (max-width: 479px) {
  .app-modal-actions { flex-direction: column }
  .app-modal-actions > * { width: 100% }
}

/* ── Tabs (scroll horizontal en móvil) ─────────────────────────── */
.app-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
  margin-bottom: 16px;
}
.app-tabs::-webkit-scrollbar { display: none }
.app-tab-btn {
  flex-shrink: 0;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 9px 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  min-height: 40px;
  -webkit-tap-highlight-color: transparent;
}
.app-tab-btn.active,
.app-tab-btn:hover {
  background: rgba(192,57,43,.18);
  border-color: rgba(192,57,43,.5);
  color: #fff;
}

/* ── Helpers de layout ─────────────────────────────────────────── */
.app-hide-mobile  { display: none }
.app-hide-desktop { display: block }
@media (min-width: 768px) {
  .app-hide-mobile  { display: block }
  .app-hide-desktop { display: none }
}
.app-text-muted { color: var(--muted) }
.app-text-small { font-size: 13px }
.app-mt-sm  { margin-top: 8px }
.app-mt     { margin-top: 14px }
.app-mt-lg  { margin-top: 24px }
.app-mb-sm  { margin-bottom: 8px }
.app-mb     { margin-bottom: 14px }
.app-mb-lg  { margin-bottom: 24px }

/* ── Compatibilidad legacy ─────────────────────────────────────── */
/* Alias para código existente que usa clases antiguas */
.app-shell-wrap > .app-actions:first-child { margin-bottom: 16px }