:root {
  --bg: #f4f6f9;
  --card: #ffffff;
  --ink: #1f2733;
  --muted: #6b7688;
  --line: #e5e9f0;
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --green: #16a34a;
  --red: #dc2626;
  --amber: #d97706;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Layout */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 220px; background: #0f172a; color: #cbd5e1;
  display: flex; flex-direction: column; padding: 18px 0;
  position: sticky; top: 0; height: 100vh;
}
.brand { font-weight: 700; font-size: 17px; color: #fff; padding: 0 20px 18px; }
.sidebar nav { display: flex; flex-direction: column; flex: 1; }
.sidebar nav a {
  color: #cbd5e1; padding: 11px 20px; font-weight: 500;
}
.sidebar nav a:hover { background: #1e293b; color: #fff; text-decoration: none; }
.sidebar nav a.active { background: var(--brand); color: #fff; }
.sidebar-foot { padding: 16px 20px 0; border-top: 1px solid #1e293b; }
.who { font-size: 13px; margin-bottom: 8px; color: #e2e8f0; }
.who small { color: #94a3b8; text-transform: capitalize; }

.content { flex: 1; min-width: 0; }
.topbar {
  background: var(--card); border-bottom: 1px solid var(--line);
  padding: 16px 28px; position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px;
}
.topbar h1 { margin: 0; font-size: 20px; }
.page { padding: 24px 28px; }

/* Cards */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow);
  margin-bottom: 20px;
}
.card h2 { margin-top: 0; font-size: 17px; }

/* Stat grid */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow);
}
.stat .label { color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.stat .value { font-size: 26px; font-weight: 700; }
.stat .value.green { color: var(--green); }
.stat .value.red { color: var(--red); }
.stat .value.amber { color: var(--amber); }

/* Ficha de datos (el bloque "el domicilio") */
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.datos .et { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* Tables */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
tbody tr:hover { background: #f8fafc; }
td.num, th.num { text-align: right; }
.table-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; box-shadow: var(--shadow); }

/* Buttons */
.btn {
  display: inline-block; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font-size: 14px; cursor: pointer; font-weight: 500;
  text-align: center;
}
.btn:hover { background: #f1f5f9; text-decoration: none; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-danger { color: var(--red); border-color: #f0c4c4; }
.btn-danger:hover { background: #fef2f2; }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn-block { width: 100%; }
/* Boton "de calle": grande para tocarlo con el pulgar, incluso con guantes */
.btn-grande { padding: 14px 18px; font-size: 16px; font-weight: 600; }
button.link { background: none; border: none; color: #94a3b8; cursor: pointer; padding: 0; font-size: 14px; }
button.link:hover { color: #fff; text-decoration: underline; }

/* Forms */
form label { display: block; margin-bottom: 14px; font-size: 14px; font-weight: 500; }
input, select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 16px; font-family: inherit; margin-top: 5px; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); border-color: var(--brand); }
textarea { resize: vertical; min-height: 70px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }

/* «+ más detalles» de la captura rápida */
.mas-detalles { margin: 6px 0 14px; }
.mas-detalles summary {
  cursor: pointer; color: var(--brand); font-weight: 600; padding: 8px 0;
  list-style: none;
}
.mas-detalles summary::-webkit-details-marker { display: none; }
.mas-detalles[open] summary { margin-bottom: 6px; }

/* Toolbar (search + new) */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.toolbar form { display: flex; gap: 8px; margin: 0; flex-wrap: wrap; }
.toolbar input, .toolbar select { margin: 0; width: auto; }

/* Encabezados ordenables */
th.ordenable { cursor: pointer; user-select: none; position: relative; padding-right: 20px; }
th.ordenable:hover { color: var(--brand); background: #f8fafc; }
th.ordenable::after {
  content: "⇅"; position: absolute; right: 6px; opacity: .3; font-size: 11px;
}
th.ordenable.orden-asc::after { content: "▲"; opacity: 1; color: var(--brand); }
th.ordenable.orden-desc::after { content: "▼"; opacity: 1; color: var(--brand); }

/* Selector de periodo (atajos de fechas) */
.periodo {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow); margin-bottom: 20px;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip {
  display: inline-block; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-size: 14px; font-weight: 500; white-space: nowrap;
}
.chip:hover { background: #f1f5f9; text-decoration: none; }
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.periodo-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.periodo-form select, .periodo-form input { margin: 0; width: auto; }
.periodo-actual { font-size: 13px; margin-top: 10px; }

/* Badges */
.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.pendiente { background: #fef3c7; color: #92400e; }
.badge.abonada { background: #dbeafe; color: #1e40af; }
.badge.pagada { background: #dcfce7; color: #166534; }
.badge.por_verificar { background: #b45309; color: #fff; }
.badge.anulada { background: #f1f5f9; color: #64748b; }
.badge.trabajo-pendiente { background: #fee2e2; color: #991b1b; }
.badge.trabajo-en_camino { background: #ffedd5; color: #9a3412; }
.badge.trabajo-hecho { background: #dcfce7; color: #166534; }
.badge.origen-ig { background: #fce7f3; color: #9d174d; }
.badge.origen-fb { background: #dbeafe; color: #1e40af; }
.badge.origen-go { background: #fef3c7; color: #92400e; }
.badge.origen-dir { background: #f1f5f9; color: #64748b; }

.alert { background: #fef2f2; color: var(--red); border: 1px solid #fecaca; padding: 10px 12px; border-radius: 8px; margin-bottom: 14px; font-size: 14px; }
.alert.amber { background: #fffbeb; color: var(--amber); border-color: #fde68a; }
.alerta-verificar { border-left: 4px solid var(--amber); }
.muted { color: var(--muted); }
.right { text-align: right; }
.mt { margin-top: 18px; }

/* Login */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #0f172a; padding: 20px; }
.login-card { background: #fff; padding: 32px; border-radius: 14px; width: 100%; max-width: 360px; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.login-brand { font-size: 20px; font-weight: 700; text-align: center; margin-bottom: 22px; }

/* Documento (recibo) */
.doc { max-width: 720px; }
.doc-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.totales { margin-left: auto; width: 320px; max-width: 100%; }
.totales .row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.totales .grand { border-top: 2px solid var(--ink); font-weight: 700; font-size: 18px; margin-top: 6px; padding-top: 10px; }

/* ==========================================================================
   Pantalla del tecnico (celular). Todo mas grande y de una sola columna.
   ========================================================================== */
body.movil { background: var(--bg); }
.movil-top {
  background: #0f172a; color: #fff; padding: 14px 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.movil-top h1 { margin: 4px 0 0; font-size: 20px; }
.movil-marca { font-size: 12px; color: #94a3b8; }
.movil-top .btn { background: transparent; border-color: #334155; color: #cbd5e1; }

.movil-tabs { display: flex; background: #1e293b; overflow-x: auto; }
.movil-tabs a {
  color: #cbd5e1; padding: 12px 16px; font-size: 14px; font-weight: 500; white-space: nowrap;
}
.movil-tabs a.on { color: #fff; box-shadow: inset 0 -3px 0 var(--brand); }
.movil-tabs a:hover { text-decoration: none; background: #263449; }

.movil-page { padding: 16px; max-width: 640px; margin: 0 auto; }
.movil-h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 22px 0 10px; }
.movil-pie { margin-top: 24px; font-size: 13px; text-align: center; }

.movil-resumen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; box-shadow: var(--shadow);
}
.movil-resumen .et { color: var(--muted); font-size: 12px; }
.movil-resumen .cifra { font-size: 22px; font-weight: 700; }

.tarjeta {
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--red);
  border-radius: var(--radius); padding: 16px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.tarjeta.en-camino { border-left-color: var(--amber); }
.tarjeta.hecha { border-left-color: var(--green); opacity: .85; }
.tarjeta.vacia { border-left-color: var(--line); color: var(--muted); text-align: center; }
.tarjeta-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; }
.tarjeta .donde { font-size: 19px; font-weight: 700; line-height: 1.3; }
.tarjeta .linea { margin-top: 8px; }
.tarjeta .trabajos { margin: 10px 0 0; padding-left: 20px; }
.tarjeta .trabajos li { margin-bottom: 3px; }
.tarjeta .nota { margin-top: 10px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.tarjeta .cobro { margin-top: 12px; font-size: 17px; }
.tarjeta .acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.tarjeta .acciones .btn { flex: 1 1 auto; }

@media print {
  .sidebar, .topbar, .no-print, .movil-tabs, .movil-top { display: none !important; }
  .page, .movil-page { padding: 0; }
  .app { display: block; }
}

/* ===================== MÓVIL ===================== */
/* En celular la barra lateral desaparece y manda una barra de pestañas abajo,
   como cualquier app del teléfono (mismo patrón de la app de contabilidad).
   Las tablas se deslizan de lado con el dedo en vez de aplastarse. */
.brand-movil { display: none; }
.tabbar { display: none; }
.mas-panel { display: none; }

@media (max-width: 820px) {
  .app { display: block; }
  .sidebar { display: none; }
  .content { min-width: 0; }

  .topbar { padding: 12px 16px; display: flex; align-items: center; gap: 10px; }
  .topbar h1 { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .brand-movil { display: inline; font-size: 20px; }

  .page { padding: 14px 12px 20px; }
  /* aire abajo para que la barra de pestañas no tape el contenido (solo oficina) */
  .con-tabbar .page { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

  /* Tablas: deslizables de lado, columnas con su ancho natural */
  .card { padding: 14px; }
  .card, .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card table, .table-card table { width: max-content; min-width: 100%; }
  th, td { padding: 9px 10px; font-size: 13px; }

  /* Tarjetas de resumen: 2 por fila */
  .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { padding: 14px; }
  .stat .value { font-size: 20px; }

  /* Para dedos, no para mouse (los 16px evitan el zoom automático del iPhone) */
  input, select, textarea { font-size: 16px; min-height: 44px; }
  textarea { min-height: 84px; }
  .btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; }
  .btn-sm { min-height: 36px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-actions { flex-direction: column; }
  .form-actions .btn { width: 100%; }
  .toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .toolbar form { width: 100%; }
  .toolbar select, .toolbar input { flex: 1 1 140px; }
  .totales { width: 100%; }
  .chips { gap: 6px; }
  .chip { padding: 9px 13px; font-size: 13px; }
  .periodo-form { gap: 6px; }
  .periodo-form input[type="date"] { flex: 1 1 130px; }

  /* Barra de pestañas inferior */
  .tabbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    background: #0f172a; border-top: 1px solid #1e293b;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar a, .tabbar button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 2px 9px; font-size: 11px; font-weight: 500;
    color: #94a3b8; background: none; border: none; text-decoration: none; cursor: pointer;
  }
  .tabbar a:hover, .tabbar button:hover { text-decoration: none; }
  .tabbar a.on { color: #fff; }
  .tab-ico { font-size: 20px; line-height: 1; }

  /* Hoja del botón «Más» */
  .mas-panel.abierto {
    display: block; position: fixed; inset: 0; z-index: 70;
    background: rgba(0,0,0,.45);
  }
  .mas-hoja {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: var(--card); border-radius: 16px 16px 0 0;
    padding: 8px 18px calc(20px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 40px rgba(0,0,0,.3);
  }
  .mas-tirador { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 8px auto 12px; }
  .mas-hoja a {
    display: block; padding: 14px 6px; font-size: 16px; font-weight: 500;
    color: var(--ink); border-bottom: 1px solid var(--line);
  }
  .mas-hoja a:hover { text-decoration: none; background: #f8fafc; }
  .mas-quien { padding: 12px 6px 4px; color: var(--muted); font-size: 13px; }
  .mas-salir {
    width: 100%; padding: 12px; margin-top: 6px; border: 1px solid #fecaca;
    border-radius: 10px; background: #fef2f2; color: var(--red);
    font-size: 15px; font-weight: 600; cursor: pointer;
  }
}