/* ===== INICIO: VARIABLES ===== */
:root{
  --bg: #0b1220;
  --text: #eaf0ff;
  --muted: rgba(234,240,255,.72);
  --border: rgba(255,255,255,.12);
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --radius: 28px;
  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --blue:   #2f8cff;
  --green:  #22c55e;
  --orange: #f59e0b;
  --purple: #8b5cf6;

  --tab-blue:   rgba(47,140,255,.92);
  --tab-orange: rgba(245,158,11,.92);
  --tab-green:  rgba(34,197,94,.86);

  --card-strong: rgba(255,255,255,.10);
  --card-strong-2: rgba(255,255,255,.14);
  --stroke-strong: rgba(255,255,255,.16);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
/* ===== FIN: VARIABLES ===== */

/* ===== INICIO: BASE ===== */
*{ box-sizing: border-box; }

html{ height: 100%; }
body{
  margin: 0;
  min-height: 100%;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(1100px 680px at 20% 15%, rgba(47,140,255,.28), transparent 60%),
    radial-gradient(900px 560px at 80% 20%, rgba(139,92,246,.22), transparent 55%),
    radial-gradient(1000px 640px at 50% 95%, rgba(34,197,94,.16), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  padding: calc(14px + var(--safe-top)) 14px calc(14px + var(--safe-bottom));
}

body{ min-height: 100svh; }
@supports (height: 100dvh){ body{ min-height: 100dvh; } }

/* ==== FIX GLOBAL: NUNCA scroll horizontal ==== */
html, body { overflow-x: hidden; }
.app, .screen, .card { overflow-x: hidden; }
.grid, .row1, .row2, .row-eg, .row-ct, .row-cp { min-width: 0; }
.grid > *, .row1 > *, .row2 > *, .row-eg > *, .row-ct > *, .row-cp > * { min-width: 0; }
input, select, textarea { min-width: 0; max-width: 100%; }
/* ===== FIN FIX GLOBAL ===== */

.app{
  width: min(430px, 100%);
  min-height: calc(100svh - (28px + var(--safe-top) + var(--safe-bottom)));
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
}
@supports (height: 100dvh){
  .app{ min-height: calc(100dvh - (28px + var(--safe-top) + var(--safe-bottom))); }
}

.topbar{
  padding: 12px 12px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 auto;
}

.chip{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(0,0,0,.14);
  color: rgba(234,240,255,.65);
  font-size: 11px;
  font-weight: 900;
  user-select: none;
  white-space: nowrap;
}
.chip::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(234,240,255,.55);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.12);
}

.screen{
  padding: 12px;
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

[data-view]{ display:none; }
[data-view].is-active{ display:block; }

.footer{
  flex: 0 0 auto;
  padding: 12px 16px calc(14px + var(--safe-bottom));
  color: rgba(234,240,255,.55);
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.20));
}
/* ===== FIN: BASE ===== */

/* ===== INICIO: HOME ===== */
.center{ display:grid; justify-items:center; text-align:center; padding-top: 10px; }
.subtitle{ margin:0 0 18px; color: var(--muted); font-size:13px; line-height:1.35; max-width:290px; }
.menu{ width:100%; display:grid; gap:12px; margin-top:8px; }

.btn{
  width:100%;
  border:0;
  border-radius:14px;
  padding:14px 14px;
  color:#fff;
  font-weight:800;
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  transition: transform .12s ease, filter .12s ease;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.btn:active{ transform: translateY(1px) scale(.995); filter: brightness(.98); }
.btn .ico{ width:18px; height:18px; display:inline-block; }

.btn.b1{ background: linear-gradient(180deg, rgba(47,140,255,1), rgba(47,140,255,.82)); }
.btn.b2{ background: linear-gradient(180deg, rgba(34,197,94,1), rgba(34,197,94,.82)); }
.btn.b3{ background: linear-gradient(180deg, rgba(245,158,11,1), rgba(245,158,11,.82)); }
.btn.b4{ background: linear-gradient(180deg, rgba(139,92,246,1), rgba(139,92,246,.82)); }

.taak-logo{
  width: 100%;
  display: grid;
  place-items: center;
  margin: 18px 0 10px;
}
.taak-logo img{
  width: min(260px, 78%);
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
/* ===== FIN: HOME ===== */

/* ===== INICIO: PROSPECTO (COMPACTO) ===== */
.pbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding: 0;
}
.pbar-left{
  display:flex;
  align-items:center;
  gap: 8px;
  min-width: 0;
}

.back.back-img{
  width: 34px;
  height: 34px;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent url("volver.png") no-repeat center / contain;
  box-shadow: none;
  cursor: pointer;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
}
.back.back-img:active{ transform: scale(.94); filter: brightness(.92); }

.pstatus{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(0,0,0,.14);
  color: rgba(234,240,255,.65);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
.pstatus::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(234,240,255,.55);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.12);
}

.pid{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.12);
  color: rgba(234,240,255,.78);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
.pid b{ color: rgba(234,240,255,.98); }

.card{
  border: 1px solid var(--stroke-strong);
  background: linear-gradient(180deg, var(--card-strong-2), var(--card-strong));
  border-radius: 20px;
  padding: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  position: relative;
  overflow: visible;
}
.card:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(400px 240px at 20% 10%, rgba(47,140,255,.18), transparent 60%),
    radial-gradient(360px 220px at 85% 25%, rgba(139,92,246,.14), transparent 60%),
    radial-gradient(420px 260px at 50% 110%, rgba(34,197,94,.10), transparent 60%);
  pointer-events:none;
  border-radius: 22px;
}
.card > *{ position: relative; }

.card-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.12);
  color: rgba(234,240,255,.78);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
.reg-small{
  margin-top: 6px;
  color: rgba(234,240,255,.72);
  font-size: 11px;
  font-weight: 800;
}
.reg-small b{ color: rgba(234,240,255,.95); }

.tabs{
  display:flex;
  gap:8px;
  padding:6px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.14);
  margin: 8px 0 8px;
}
.tab{
  flex:1 1 0;
  border:0;
  padding:9px 10px;
  border-radius:12px;
  background: transparent;
  color: rgba(234,240,255,.80);
  font-weight: 900;
  font-size: 12px;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.tab.is-active{
  color: #fff;
  box-shadow: 0 12px 26px rgba(0,0,0,.22);
  outline: 1px solid rgba(255,255,255,.10);
}
.tabs.is-client  .tab.is-active{ background: linear-gradient(180deg, var(--tab-blue), rgba(47,140,255,.72)); }
.tabs.is-company .tab.is-active{ background: linear-gradient(180deg, var(--tab-orange), rgba(245,158,11,.70)); }
.tabs.is-follow  .tab.is-active{ background: linear-gradient(180deg, var(--tab-green), rgba(34,197,94,.62)); }

.panel-wrap{ display:block; }
.panel{ display:block; }

.grid{ display:grid; gap: 8px; grid-template-columns: 1fr; }
.row1{ display:grid; gap:8px; grid-template-columns: 1fr; }
.row2{ display:grid; gap:8px; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }

label{
  display:block;
  font-size: 12px;
  color: rgba(234,240,255,.82);
  margin-bottom: 6px;
  font-weight: 900;
}
input, textarea, select{
  width:100%;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.22);
  color: rgba(234,240,255,.95);
  border-radius:14px;
  padding: 10px 12px;
  outline:none;
  font-size:14px;
}
textarea{ min-height: 72px; resize: none; }

.hint{ margin-top: 6px; color: rgba(234,240,255,.60); font-size: 11px; line-height: 1.35; }

.section-title{
  text-align:center;
  font-weight: 950;
  color: rgba(234,240,255,.88);
  margin: 10px 0 6px;
  font-size: 13px;
  letter-spacing: .2px;
}

/* Interés (3) */
.interest-wrap{ display:grid; gap:6px; margin-top: 2px; }
.interest-group{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; width: 100%; }
.interest{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content: center;
  gap: 8px;
  padding: 9px 8px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
  cursor: pointer;
  user-select:none;
  font-weight: 900;
  font-size: 12px;
  color: rgba(234,240,255,.90);
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  white-space: nowrap;
}
.interest input{ position:absolute; opacity:0; pointer-events:none; }
.dot{
  width: 9px; height: 9px; border-radius: 999px;
  background: rgba(234,240,255,.25);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.12);
}
.interest.is-checked{ border-color: rgba(255,255,255,.22); }
.interest.low.is-checked    { background: rgba(239,68,68,.26); }
.interest.mid.is-checked    { background: rgba(245,158,11,.28); }
.interest.high.is-checked   { background: rgba(34,197,94,.24); }
.interest.low.is-checked .dot  { background: rgba(239,68,68,.98); }
.interest.mid.is-checked .dot  { background: rgba(245,158,11,.98); }
.interest.high.is-checked .dot { background: rgba(34,197,94,.98); }

/* Prospecto tipo (2) */
.ptype-wrap{ display:grid; gap:6px; margin-top: 2px; }
.ptype-group{ display:grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.ptype{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 8px 8px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
  cursor: pointer;
  user-select:none;
  font-weight: 900;
  font-size: 12px;
  color: rgba(234,240,255,.90);
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.ptype input{ position:absolute; opacity:0; pointer-events:none; }
.ptype.is-checked{ border-color: rgba(255,255,255,.22); }
.ptype.yes.is-checked{ background: rgba(34,197,94,.20); }
.ptype.no.is-checked{ background: rgba(239,68,68,.22); }
.ptype.yes.is-checked .dot{ background: rgba(34,197,94,.98); }
.ptype.no.is-checked .dot{ background: rgba(239,68,68,.98); }

.savebar{
  padding-top: 10px;
  margin-top: 10px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.32));
  border-radius: 16px;
}
.savebtn{
  width:100%;
  border:0;
  border-radius:16px;
  padding: 12px 14px;
  font-weight: 900;
  color:#fff;
  cursor:pointer;
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
  background: linear-gradient(180deg, rgba(47,140,255,1), rgba(47,140,255,.82));
  display: block;
}
.savebtn:disabled{ opacity:.55; cursor:not-allowed; }
.savehint{ margin-top: 6px; color: rgba(234,240,255,.60); font-size: 11px; line-height: 1.3; }

/* Select oscuro */
select{
  background: rgba(0,0,0,.35);
  color: rgba(234,240,255,.95);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 14px;
}
select, option, optgroup{ color-scheme: dark; }
select{
  -webkit-appearance: none;
  appearance: none;
  padding-right: 38px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(234,240,255,.7) 50%),
    linear-gradient(135deg, rgba(234,240,255,.7) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* ===============================
   LAYOUTS ESPECÍFICOS (SIN APILAR)
   =============================== */

/* Cliente + Teléfono SIEMPRE en una fila */
.row2.row-ct{ grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); }

/* Cotización + Pago SIEMPRE en una fila */
.row2.row-cp{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); }

/* Empresa + Giro SIEMPRE en una fila */
.row2.row-eg{ grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); }

/* Interés: label izquierda + botones derecha (no rompe) */
.inline-field{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 0;
}
.inline-field > label{
  margin:0;
  white-space: nowrap;
}
.inline-field > input{
  flex:1 1 auto;
  width:auto;
  min-width: 0;
}

/* Interés inline */
.interest-inline{ align-items: stretch; }
.interest-inline > label{ padding-top: 10px; }
.interest-right{ flex: 1 1 auto; margin-top: 0; min-width: 0; }

/* No. Empleados pequeño */
.emp-row{ display:flex; justify-content:flex-start; }
.emp-small{ width: min(220px, 72%); }

/* ===============================
   FIX DEFINITIVO M² (SIN APILAR)
   - 4 columnas: label+input + label+input
   - inputs con mínimo real
   - labels NO empujan overflow
   =============================== */
.m2line{
  display: grid;
  grid-template-columns:
    auto minmax(120px, 1fr)
    auto minmax(120px, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.m2lbl{
  margin: 0;
  font-size: 12px;
  font-weight: 900;
  color: rgba(234,240,255,.82);
  line-height: 1.05;
  white-space: normal;       /* permite 2 líneas si hace falta */
  overflow: hidden;          /* pero NO empuja */
  max-width: 120px;          /* controla el label */
}
.m2inp{
  width: 100%;
  min-width: 0;
  font-size: 16px;           /* móvil: se ven más dígitos */
  padding: 10px 12px;
  text-align: center;
}

/* En pantallas MUY chicas, reduce un poco el label pero NO apiles */
@media (max-width: 360px){
  .m2line{
    grid-template-columns:
      auto minmax(100px, 1fr)
      auto minmax(100px, 1fr);
    gap: 8px;
  }
  .m2lbl{ max-width: 92px; font-size: 11px; }
}
/* ===== FIN: PROSPECTO ===== */

/* =============================== CLIENTES — UI LISTADO (MEJORADO) =============================== */
.clients-head{ display:flex; align-items:center; gap:10px; margin-bottom: 10px; }
.clients-title{ font-size: 18px; font-weight: 900; letter-spacing: .2px; }
.clients-toolbar{ display:grid; gap:10px; margin-bottom: 10px; }
.clients-search{
  width:100%;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.22);
  color: rgba(234,240,255,.95);
  border-radius: 16px;
  padding: 12px 12px;
  outline: none;
  font-size: 13px;
  font-weight: 700;
}
.clients-filters{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.clients-select{
  width:100%;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.22);
  color: rgba(234,240,255,.95);
  border-radius: 16px;
  padding: 11px 10px;
  outline: none;
  font-size: 12px;
  font-weight: 900;
}
.clients-list{ display:grid; gap:10px; }
.client-card{
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 14px 30px rgba(0,0,0,.20);
}
.client-top{ display:flex; align-items:center; justify-content: space-between; gap:10px; padding: 10px 12px 8px; }
.client-name{
  font-size: 16px;
  font-weight: 950;
  letter-spacing: .2px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 62%;
}
.status-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.16);
}
.status-dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(234,240,255,.25);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.12);
}
.client-meta{
  display:grid;
  gap:6px;
  padding: 8px 12px;
  background: rgba(255,255,255,.07);
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.client-line{ display:flex; align-items:center; justify-content: space-between; gap:10px; min-width: 0; }
.client-empresa{
  color: rgba(234,240,255,.90);
  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.client-empresa b{ color: rgba(234,240,255,.62); font-weight: 950; margin-right: 6px; }
.client-fecha{ color: rgba(234,240,255,.70); font-weight: 900; font-size: 11px; white-space: nowrap; }
.client-fecha b{ color: rgba(234,240,255,.92); }

.client-submeta{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:10px;
  font-size: 11px;
  font-weight: 850;
  color: rgba(234,240,255,.70);
}
.client-submeta .tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.14);
  white-space: nowrap;
}
.client-submeta .tag strong{ color: rgba(234,240,255,.92); }

.client-actions{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:8px;
  padding: 10px 12px 12px;
}
.cbtn{
  border:0;
  border-radius: 999px;
  padding: 9px 8px;
  font-weight: 950;
  cursor: pointer;
  color:#fff;
  text-align:center;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  font-size: 12px;
}
.cbtn:active{ transform: translateY(1px) scale(.995); filter: brightness(.98); }
.cbtn.det{
  background: rgba(245,158,11,.18);
  color:#fff;
  border: 1px solid rgba(245,158,11,.30);
  box-shadow:none;
}
.cbtn.wa{ background: linear-gradient(180deg, rgba(34,197,94,1), rgba(34,197,94,.82)); }
.cbtn.call{ background: linear-gradient(180deg, rgba(47,140,255,1), rgba(47,140,255,.82)); }

.clients-empty{
  margin-top: 14px;
  color: rgba(234,240,255,.65);
  font-weight: 900;
  font-size: 13px;
  text-align:center;
  padding: 14px;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 16px;
}

/* ===== ESTATUS PERSONALIZADOS ===== */
.status-badge[data-status="Nuevo"]{ color:#bfe2ff; }
.status-badge[data-status="Nuevo"] .status-dot{ background:#2f8cff; }

.status-badge[data-status="Esperando Respuesta"],
.status-badge[data-status="Esperando Informacion"],
.status-badge[data-status="Marcarle en otro Momento"]{ color:#ffe7c2; }
.status-badge[data-status="Esperando Respuesta"] .status-dot,
.status-badge[data-status="Esperando Informacion"] .status-dot,
.status-badge[data-status="Marcarle en otro Momento"] .status-dot{ background:#f59e0b; }

.status-badge[data-status="No Contesto"]{ color:#e5e7eb; }
.status-badge[data-status="No Contesto"] .status-dot{ background:#9ca3af; }

.status-badge[data-status="En Proceso"],
.status-badge[data-status="Tramitando"],
.status-badge[data-status="Tramite en proceso"]{ color:#dbeafe; }
.status-badge[data-status="En Proceso"] .status-dot,
.status-badge[data-status="Tramitando"] .status-dot,
.status-badge[data-status="Tramite en proceso"] .status-dot{ background:#3b82f6; }

.status-badge[data-status="Perdido"],
.status-badge[data-status="No es Prospecto"]{ color:#fecaca; }
.status-badge[data-status="Perdido"] .status-dot,
.status-badge[data-status="No es Prospecto"] .status-dot{ background:#ef4444; }

/* ===== DOCS UI (SEGUIMIENTO) ===== */
.docs-box{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.14);
  border-radius: 16px;
  padding: 10px;
}
.docs-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:10px;
  margin-bottom: 8px;
}
.docs-title{
  font-weight: 950;
  font-size: 12px;
  color: rgba(234,240,255,.90);
}
.docs-file{
  width:100%;
  border:1px dashed rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  color: rgba(234,240,255,.90);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 12px;
  margin-bottom: 8px;
}
.docs-list{ display:grid; gap:8px; }
.doc-item{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
  border-radius: 14px;
  padding: 10px 10px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:10px;
}
.doc-name{
  font-size: 12px;
  font-weight: 900;
  color: rgba(234,240,255,.92);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 70%;
}
.doc-meta{
  font-size: 11px;
  color: rgba(234,240,255,.70);
  font-weight: 800;
  white-space: nowrap;
}
.doc-link{
  color: rgba(47,140,255,.95);
  font-weight: 950;
  font-size: 11px;
  text-decoration: none;
  border: 1px solid rgba(47,140,255,.35);
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(47,140,255,.10);
}
.doc-link:active{ transform: scale(.99); }
.doc-del{
  appearance:none;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(234,240,255,.92);
  font-weight: 900;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 12px;
}
.doc-del:active{ transform: scale(.98); }






/* ===== M²: 2 inputs 50/50 + placeholder más chico ===== */
.m2line{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; /* 50/50 real */
  gap: 10px !important;
  width: 100% !important;
}

.m2line .m2inp{
  width: 100% !important;
  min-width: 0 !important;        /* evita que se apachurre */
  font-size: 14px;                /* texto que escribe el usuario */
  padding: 10px 12px;
}

/* Placeholder más pequeño */
.m2line .m2inp::placeholder{
  font-size: 13px;
  opacity: .75;
}

/* Muy chico: un poco más compacto sin perder 50/50 */
@media (max-width: 360px){
  .m2line{ gap: 8px !important; }
  .m2line .m2inp{ font-size: 13px; padding: 9px 10px; }
  .m2line .m2inp::placeholder{ font-size: 10px; }
}