/* Electro — 03-components.css */
  .inst-view { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
  .my-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .my-card { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 14px; }
  .my-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
  .my-card-id { font-size: 11px; color: var(--hint); font-family: 'DM Mono', monospace; }
  .my-card-title { font-size: 14px; font-weight: 500; margin-bottom: 3px; }
  .my-card-addr { font-size: 12px; color: var(--muted); margin-bottom: 10px; display: flex; align-items: center; gap: 4px; }
  .my-actions { display: flex; gap: 6px; flex-wrap: wrap; }
  .btn-xs { padding: 4px 10px; font-size: 12px; border-radius: var(--radius); border: 0.5px solid var(--border-md); background: var(--surface); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-family: 'DM Sans', sans-serif; transition: background .15s; }
  .btn-xs:hover { background: var(--bg); }
  .btn-xs-green { background: var(--green-light); color: var(--green); border-color: #C0DD97; }
  .btn-xs-amber { background: var(--amber-light); color: var(--amber); border-color: #FAC775; }
  .note-incoming { background: var(--bg); border-radius: var(--radius); padding: 10px 12px; font-size: 13px; margin-bottom: 10px; }
  .note-who { font-size: 11px; color: var(--hint); margin-bottom: 4px; }

  /* NEW INSTALLER VIEW */
  .inst-head { display:flex; align-items:center; padding:16px 20px; border-bottom:0.5px solid var(--border); background:var(--surface); }
  .inst-home-body { padding:16px; display:flex; flex-direction:column; gap:14px; }
  .inst-team-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  @media (max-width:560px) { .inst-team-grid { grid-template-columns:1fr; } }
  .inst-team-card { background:var(--surface); border:0.5px solid var(--border); border-radius:var(--radius-lg); padding:16px; cursor:pointer; display:flex; flex-direction:column; gap:8px; transition:border-color .15s, transform .12s; position:relative; }
  .inst-team-card:hover { border-color:var(--border-md); }
  .inst-team-card:active { transform:scale(0.98); }
  .inst-team-card.mine { border-color:var(--blue); background:var(--blue-light); }
  .inst-team-card.other { opacity:.78; }
  .inst-team-card-top { display:flex; align-items:center; gap:10px; }
  .inst-team-card-name { font-size:14px; font-weight:500; }
  .inst-team-card-tag { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
  .inst-team-card .mine-tag { display:none; font-size:10px; padding:2px 6px; border-radius:8px; background:var(--blue); color:white; margin-left:auto; }
  .inst-team-card.mine .mine-tag { display:inline-block; }
  .inst-team-card-stats { display:flex; gap:8px; margin-top:4px; }
  .inst-team-stat { flex:1; display:flex; flex-direction:column; align-items:center; padding:6px 4px; background:var(--bg); border-radius:var(--radius); border:0.5px solid var(--border); }
  .inst-team-stat-num { font-size:16px; font-weight:500; line-height:1; }
  .inst-team-stat-lbl { font-size:10px; color:var(--muted); margin-top:2px; }
  .inst-team-card-foot { font-size:12px; color:var(--blue); display:flex; align-items:center; gap:5px; margin-top:6px; }
  .inst-team-card.other .inst-team-card-foot { color:var(--muted); }

  /* Ruta del día (vista instalador) */
  .ruta-dia { border-color:var(--blue-light); }
  .ruta-dia-done { border-color:var(--green-light); }
  .ruta-dia-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
  .ruta-dia-sub { font-size:12px; color:var(--muted); }
  .ruta-dia-maps-btn { flex-shrink:0; white-space:nowrap; }
  .ruta-dia-empty-msg { font-size:13px; color:var(--muted); padding:4px 0 2px; }
  .ruta-dia-stops { display:flex; flex-direction:column; gap:6px; }
  .ruta-dia-stop { display:flex; align-items:center; gap:10px; padding:10px 10px 10px 8px; background:var(--bg); border:0.5px solid var(--border); border-radius:var(--radius); cursor:pointer; transition:border-color .15s, background .15s; }
  .ruta-dia-stop:hover { border-color:var(--border-md); background:var(--surface); }
  .ruta-dia-stop:active { transform:scale(0.995); }
  .ruta-dia-num { width:26px; height:26px; border-radius:50%; background:var(--blue); color:white; font-size:12px; font-weight:500; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:'DM Mono',monospace; }
  .ruta-dia-stop-body { flex:1; min-width:0; }
  .ruta-dia-stop-top { display:flex; align-items:center; gap:8px; margin-bottom:3px; }
  .ruta-dia-hora { font-family:'DM Mono',monospace; font-size:12px; font-weight:500; color:var(--blue-text); }
  .ruta-dia-cliente { font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ruta-dia-dir { font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:4px; margin-top:2px; }
  .ruta-dia-nav-btn { flex-shrink:0; width:36px; height:36px; border-radius:var(--radius); background:var(--blue-light); color:var(--blue); display:flex; align-items:center; justify-content:center; text-decoration:none; border:0.5px solid var(--blue-light); transition:background .15s; }
  .ruta-dia-nav-btn:hover { background:var(--blue); color:white; }
  @media (max-width:480px) { .ruta-maps-lbl { display:none; } .ruta-dia-maps-btn { padding:8px 10px; } }

  /* Panel deslizable de lista */
  .inst-list-panel {
    position:absolute; inset:0;
    background:var(--bg);
    display:flex; flex-direction:column;
    transform:translateX(100%);
    transition:transform .25s cubic-bezier(.4,0,.2,1);
    z-index:5; overflow:hidden;
  }
  .inst-list-panel.open { transform:translateX(0); }
  .inst-list-panel .inst-list { flex:1; overflow-y:auto; }

  .inst-stats { display:flex; gap:8px; padding:12px 16px; overflow-x:auto; background:var(--surface); border-bottom:0.5px solid var(--border); }
  .inst-stat { flex:1; min-width:88px; padding:10px 12px; border-radius:var(--radius); background:var(--bg); border:0.5px solid var(--border); display:flex; flex-direction:column; gap:2px; }
  .inst-stat-num { font-size:20px; font-weight:500; line-height:1; }
  .inst-stat-lbl { font-size:11px; color:var(--muted); }
  .inst-list { padding:14px 16px 100px; display:flex; flex-direction:column; gap:18px; }
  .inst-group { display:flex; flex-direction:column; gap:8px; }
  .inst-group-head { font-size:12px; font-weight:500; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; padding:0 2px; display:flex; align-items:center; gap:6px; }
  .inst-group-count { background:var(--bg); border:0.5px solid var(--border); color:var(--muted); font-size:11px; padding:1px 7px; border-radius:10px; font-weight:500; text-transform:none; letter-spacing:0; }
  .inst-group.today .inst-group-head { color:var(--red); }
  .inst-group.today .inst-group-count { background:var(--red-light); color:var(--red); border-color:transparent; }
  .inst-card { background:var(--surface); border:0.5px solid var(--border); border-radius:var(--radius-lg); padding:14px; cursor:pointer; transition:border-color .15s, background .15s; display:flex; flex-direction:column; gap:8px; }
  .inst-card:hover { border-color:var(--border-md); }
  .inst-card.readonly { background:transparent; opacity:.7; }
  .inst-card.readonly:hover { border-color:var(--border); }
  .inst-card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .inst-card-id { font-size:11px; color:var(--hint); font-family:'DM Mono',monospace; }
  .inst-card-readonly-tag { font-size:10px; padding:2px 6px; border-radius:10px; background:var(--bg); color:var(--muted); border:0.5px solid var(--border); display:inline-flex; align-items:center; gap:3px; }
  .inst-card-client { font-size:14px; font-weight:500; color:var(--text); }
  .inst-card-prod { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:5px; }
  .inst-card-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:2px; }
  .inst-card-time { font-size:11px; color:var(--muted); display:inline-flex; align-items:center; gap:4px; }
  .inst-empty { padding:32px 16px; text-align:center; color:var(--hint); font-size:13px; }
  .inst-empty i { font-size:32px; color:var(--hint); display:block; margin-bottom:8px; }

  /* DETALLE INSTALADOR */

  /* ── CALENDARIO SEMANAL ── */
  .wcal-wrap { background:var(--surface); border:0.5px solid var(--border); border-radius:var(--radius-lg); padding:14px; display:flex; flex-direction:column; gap:12px; }
  .wcal-head { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
  .wcal-title { font-size:14px; font-weight:500; display:flex; align-items:center; gap:6px; }
  .wcal-nav { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .wcal-range { font-size:13px; font-weight:500; padding:6px 12px; background:var(--bg); border:0.5px solid var(--border); border-radius:var(--radius); min-width:130px; text-align:center; }
  .cal-nav-btn { background:var(--bg); border:0.5px solid var(--border-md); border-radius:var(--radius); padding:6px 8px; cursor:pointer; color:var(--text); display:inline-flex; align-items:center; gap:4px; font-family:'DM Sans',sans-serif; font-size:12px; }
  .cal-nav-btn:hover { background:var(--border); }
  .cal-nav-btn.today { color:var(--blue-text); border-color:var(--blue-light); background:var(--blue-light); font-weight:500; }

  .wcal-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; }
  @media (max-width:900px) { .wcal-grid { grid-template-columns:repeat(7, minmax(120px, 1fr)); overflow-x:auto; padding-bottom:4px; } }
  @media (max-width:560px) { .wcal-grid { grid-template-columns:repeat(7, minmax(150px, 1fr)); } }

  .wcal-day { background:var(--bg); border:0.5px solid var(--border); border-radius:var(--radius); padding:8px; display:flex; flex-direction:column; gap:6px; min-height:120px; }
  .wcal-day.is-today { background:var(--blue-light); border-color:transparent; }
  .wcal-day-head { display:flex; align-items:baseline; gap:6px; padding-bottom:4px; border-bottom:0.5px solid var(--border); }
  .wcal-day.is-today .wcal-day-head { border-bottom-color:rgba(24,95,165,0.2); }
  .wcal-dow { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:500; }
  .wcal-daynum { font-size:16px; font-weight:500; color:var(--text); }
  .wcal-daynum.today-num { color:var(--blue-text); }
  .wcal-day-count { font-size:10px; color:var(--muted); margin-left:auto; background:var(--surface); border:0.5px solid var(--border); padding:1px 7px; border-radius:10px; }
  .wcal-day.is-today .wcal-day-count { background:rgba(255,255,255,0.6); }

  .wcal-day-body { display:flex; flex-direction:column; gap:5px; min-height:40px; transition:border-color .15s, background .15s; border-radius:6px; }
  .wcal-day-body.drag-over { border:2px dashed var(--blue); background:var(--blue-light); }
  .wcal-evt { background:var(--surface); border:0.5px solid var(--border); border-left:3px solid var(--muted); border-radius:6px; padding:6px 8px; cursor:pointer; transition:transform .08s, background .12s, opacity .12s; display:flex; gap:6px; align-items:flex-start; }
  .wcal-evt[draggable="true"] { cursor:grab; }
  .wcal-evt.wcal-evt-dragging { opacity:0.45; cursor:grabbing; }
  .wcal-evt:hover { background:var(--bg); transform:translateX(1px); }
  .wcal-evt.s-pendiente  { border-left-color:var(--amber); }
  .wcal-evt.s-urgente    { border-left-color:var(--red); }
  .wcal-evt.s-en-curso   { border-left-color:var(--blue); }
  .wcal-evt.s-completado { border-left-color:var(--green); opacity:.7; }
  .wcal-evt.s-problema   { border-left-color:var(--red); }
  .wcal-evt-line1 { font-size:11px; line-height:1.3; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .wcal-evt-time { font-weight:500; color:var(--muted); }
  .wcal-evt-client { font-weight:500; }
  .wcal-evt-prod { font-size:10px; color:var(--muted); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
  .wcal-empty { font-size:11px; color:var(--hint); text-align:center; padding:8px 0; }
  .wcal-add-btn { width:100%; background:transparent; border:1px dashed var(--border); border-radius:6px; padding:6px; color:var(--hint); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .12s, color .12s, border-color .12s; font-family:'DM Sans',sans-serif; }
  .wcal-add-btn:hover { background:var(--blue-light); color:var(--blue-text); border-color:var(--blue); }
  .wcal-add-btn i { font-size:14px; }

  .wcal-legend { display:flex; gap:14px; flex-wrap:wrap; padding-top:6px; border-top:0.5px solid var(--border); font-size:11px; color:var(--muted); }
  .wcal-legend > span { display:inline-flex; align-items:center; gap:5px; }
  .wcal-legend .dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
  .wcal-legend .dot.av-teal  { background:var(--teal-light); }
  .wcal-legend .dot.av-amber { background:var(--amber-av); }
  .wcal-legend .dot.av-coral { background:var(--coral-light); }
  .wcal-legend .dot.av-blue  { background:var(--blue-light); }
  .wcal-legend .dot.av-green { background:var(--green-light); }
  .wcal-legend .dot.av-purple{ background:var(--purple-light); }

  #modal-inst-detail .info-line { display:flex; gap:8px; align-items:flex-start; padding:8px 0; border-bottom:0.5px solid var(--border); font-size:13px; }
  #modal-inst-detail .info-line:last-child { border-bottom:none; }
  #modal-inst-detail .info-line-key { color:var(--muted); min-width:80px; font-size:12px; }
  #modal-inst-detail .info-line-val { flex:1; color:var(--text); }
  #modal-inst-detail .quick-acciones { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:14px 0; }
  #modal-inst-detail .quick-btn { padding:10px; border-radius:var(--radius); border:0.5px solid var(--border-md); background:var(--surface); color:var(--text); cursor:pointer; font-family:'DM Sans',sans-serif; font-size:13px; display:flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; transition:background .12s; }
  #modal-inst-detail .quick-btn:hover { background:var(--bg); }
  #modal-inst-detail .quick-btn.primary { background:var(--blue-light); color:var(--blue-text); border-color:transparent; }
  #modal-inst-detail .quick-btn.green { background:var(--green-light); color:var(--green); border-color:transparent; }
  #modal-inst-detail .notas-mini { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; max-height:200px; overflow-y:auto; }

  /* TOAST */