/* =========================================================
   LifePlanner UI — Global CSS (tokens + base components)
   Rule: use tokens (CSS variables) everywhere.
========================================================= */

/* ---------- TOKENS (LIGHT default) ---------- */
:root{
  /* typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, "Apple Color Emoji","Segoe UI Emoji";
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;

  /* spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;

  /* radius & shadow */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .08);
  --shadow-md: 0 8px 20px rgba(15, 23, 42, .10);

  /* colors - slate + blue */
  --bg: #F8FAFC;
  --card: #FFFFFF;
  --text: #0F172A;
  --muted: #475569;
  --muted-2: #64748B;
  --border: #E2E8F0;

  --primary: #2563EB;
  --primary-hover: #1D4ED8;
  --on-primary: #FFFFFF;

  --success: #16A34A;
  --warning: #D97706;
  --danger:  #DC2626;

  /* surfaces */
  --nav-bg: rgba(255,255,255,.75);
  --nav-border: rgba(226,232,240,.9);

  /* focus ring */
  --ring: 0 0 0 3px rgba(37, 99, 235, .25);
}

/* ---------- TOKENS (DARK) ---------- */
[data-theme="dark"]{
  --bg: #020617;
  --card: #0B1220;
  --text: #E5E7EB;
  --muted: #94A3B8;
  --muted-2: #64748B;
  --border: #1E293B;

  --primary: #3B82F6;
  --primary-hover: #60A5FA;
  --on-primary: #0B1220;

  --success: #22C55E;
  --warning: #F59E0B;
  --danger:  #EF4444;

  --nav-bg: rgba(2,6,23,.65);
  --nav-border: rgba(30,41,59,.9);

  --ring: 0 0 0 3px rgba(59, 130, 246, .30);
}

/* ---------- RESET / BASE ---------- */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a{ color: var(--primary); text-decoration: none; }
a:hover{ text-decoration: underline; }

img{ max-width:100%; height:auto; }

hr{
  border:0;
  border-top: 1px solid var(--border);
  margin: var(--s-6) 0;
}

/* ---------- LAYOUT HELPERS ---------- */
.lp-container{
  width: min(1500px, calc(100% - 2*var(--s-6)));
  margin-inline: auto;
}
.lp-container--wide{
  width: min(1700px, calc(100% - 2*var(--s-6)));
}

.lp-stack{ display:flex; flex-direction:column; gap: var(--s-4); }
.lp-row{ display:flex; gap: var(--s-4); align-items:center; }
.lp-between{ display:flex; justify-content:space-between; align-items:center; gap: var(--s-4); }
.lp-wrap{ flex-wrap: wrap; }
.lp-muted{ color: var(--muted); }
.lp-small{ font-size: var(--text-sm); }
.lp-title{
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.lp-subtitle{
  font-size: var(--text-sm);
  color: var(--muted);
  margin: 0;
}

/* ---------- TOPBAR / NAV ---------- */
.lp-topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
}
.lp-topbar-inner{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: var(--s-4) 0;
}
.lp-brand{
  display:flex; align-items:center; gap: var(--s-3);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.lp-nav{
  display:flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.lp-nav a{
  display:inline-flex;
  align-items:center;
  gap: var(--s-2);
  padding: 10px 12px;
  border-radius: 999px;
  color: var(--muted);
  border: 1px solid transparent;
}
.lp-nav a:hover{
  background: rgba(148,163,184,.12);
  color: var(--text);
  text-decoration:none;
}
[data-theme="dark"] .lp-nav a:hover{
  background: rgba(148,163,184,.10);
}

.lp-main{
  padding: var(--s-6) 0 var(--s-10);
}

/* ---------- CARD ---------- */
.lp-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.lp-card-pad{ padding: var(--s-5); }
.lp-card-head{
  padding: var(--s-5);
  border-bottom: 1px solid var(--border);
}
.lp-card-title{
  font-weight: 700;
  margin: 0 0 var(--s-1);
}
.lp-card-body{ padding: var(--s-5); }

/* ---------- BUTTONS ---------- */
.lp-btn{
  appearance:none;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: var(--s-2);
  transition: background .15s, border-color .15s, transform .02s;
}
.lp-btn:hover{ background: rgba(148,163,184,.12); text-decoration:none; }
.lp-btn:active{ transform: translateY(1px); }
.lp-btn:focus{ outline:none; box-shadow: var(--ring); }

.lp-btn-primary{
  background: var(--primary);
  border-color: transparent;
  color: var(--on-primary);
}
.lp-btn-primary:hover{ background: var(--primary-hover); }

.lp-btn-danger{
  background: var(--danger);
  border-color: transparent;
  color: #fff;
}
.lp-btn-danger:hover{ filter: brightness(1.05); }

.lp-btn:disabled,
.lp-btn[aria-disabled="true"]{
  opacity: .55;
  cursor: not-allowed;
}

/* ---------- FORMS ---------- */
.lp-field{ display:flex; flex-direction:column; gap: var(--s-2); }
.lp-label{ font-size: var(--text-sm); color: var(--muted); font-weight: 600; }

.lp-input, .lp-select, .lp-textarea{
  width: 100%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: var(--text-md);
  outline: none;
}
.lp-textarea{ min-height: 110px; resize: vertical; }
.lp-input:focus, .lp-select:focus, .lp-textarea:focus{
  box-shadow: var(--ring);
  border-color: rgba(37, 99, 235, .35);
}
.lp-help{ font-size: var(--text-sm); color: var(--muted-2); }

/* ---------- TABLE ---------- */
.lp-table{
  width:100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card);
}
.lp-table th, .lp-table td{
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align:left;
  vertical-align: middle;
}
.lp-table th{
  font-size: var(--text-sm);
  color: var(--muted);
  background: rgba(148,163,184,.10);
}
[data-theme="dark"] .lp-table th{
  background: rgba(148,163,184,.08);
}
.lp-table tr:hover td{
  background: rgba(148,163,184,.08);
}
[data-theme="dark"] .lp-table tr:hover td{
  background: rgba(148,163,184,.06);
}

/* ---------- BADGES (states) ---------- */
.lp-badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  border: 1px solid var(--border);
  background: rgba(148,163,184,.10);
  color: var(--muted);
}
.lp-badge--ok{ background: rgba(34,197,94,.14); color: var(--success); border-color: rgba(34,197,94,.25); }
.lp-badge--warn{ background: rgba(245,158,11,.14); color: var(--warning); border-color: rgba(245,158,11,.25); }
.lp-badge--bad{ background: rgba(239,68,68,.14); color: var(--danger); border-color: rgba(239,68,68,.25); }

/* ---------- PAGE HEADER ---------- */
.lp-pagehead{
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.lp-pagehead-actions{ display:flex; gap: var(--s-2); flex-wrap: wrap; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  .lp-container{ width: min(1200px, calc(100% - 2*var(--s-4))); }
  .lp-topbar-inner{ padding: var(--s-3) 0; }
  .lp-pagehead{ flex-direction: column; }
}

/* ---------- NAV USERBAR / FOOTER ---------- */
.lp-userbar{
  margin-left: auto;
  display:flex;
  align-items:center;
  gap: var(--s-3);
}
.lp-user{
  color: var(--muted);
  font-weight: 700;
  font-size: var(--text-sm);
}
.lp-link-muted{
  color: var(--muted);
  font-weight: 700;
}
.lp-link-muted:hover{
  color: var(--text);
  text-decoration:none;
}

.lp-footer{
  border-top: 1px solid var(--border);
  padding: var(--s-6) 0;
}
.lp-footer-inner{
  display:flex;
  justify-content:center;
  gap: var(--s-2);
}

/* ---------- AUTH (login/forgot) ---------- */
.lp-auth{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: var(--s-8) var(--s-4);
}
.lp-auth-card{
  width: min(440px, 100%);
}
.lp-auth-head{
  display:flex;
  flex-direction:column;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.lp-alert{
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  padding: 10px 12px;
  background: rgba(148,163,184,.10);
  color: var(--muted);
}
.lp-alert--danger{
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.25);
  color: var(--danger);
}

/* ---------- DASHBOARD ---------- */
.lp-grid-cards{
  display:grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  gap: var(--s-3);
}
@media (max-width: 1000px){
  .lp-grid-cards{ grid-template-columns: repeat(2, minmax(200px, 1fr)); }
}
@media (max-width: 520px){
  .lp-grid-cards{ grid-template-columns: 1fr; }
}

.lp-quicklinks{
  display:flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin: var(--s-3) 0 var(--s-4);
}
.lp-chiplink{
  display:inline-flex;
  align-items:center;
  gap: var(--s-2);
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(148,163,184,.10);
  color: var(--text);
  font-weight: 700;
  font-size: var(--text-sm);
  text-decoration:none;
}
.lp-chiplink:hover{
  background: rgba(148,163,184,.14);
  text-decoration:none;
}

.lp-stat{
  padding: var(--s-4);
}
.lp-stat-k{
  font-size: var(--text-xs);
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.lp-stat-v{
  font-size: 32px;
  font-weight: 900;
  margin-top: var(--s-2);
}
.lp-stat-sub{
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: var(--s-1);
}

.lp-weekbar{
  display:flex;
  gap: var(--s-2);
  align-items:center;
  flex-wrap: wrap;
  margin: var(--s-4) 0 var(--s-3);
}
.lp-weekbar .lp-weektitle{
  font-weight: 900;
}
.lp-weekbar .lp-weekhint{
  margin-left:auto;
  color: var(--muted);
  font-size: var(--text-sm);
}

.lp-weekgrid{
  display:grid;
  grid-template-columns: repeat(7, minmax(170px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}
@media (max-width: 1200px){
  .lp-weekgrid{ grid-template-columns: repeat(4, minmax(170px, 1fr)); }
}
@media (max-width: 800px){
  .lp-weekgrid{ grid-template-columns: repeat(2, minmax(170px, 1fr)); }
}

.lp-day{
  padding: var(--s-4);
  min-height: 150px;
  cursor: pointer;
  position: relative;
}
.lp-day:hover{
  box-shadow: var(--shadow-md);
}
.lp-day--today{
  outline: 2px solid rgba(37,99,235,.55);
  outline-offset: 2px;
}
[data-theme="dark"] .lp-day--today{
  outline-color: rgba(59,130,246,.55);
}
.lp-dayhead{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: var(--s-3);
}
.lp-dayname{
  font-weight: 900;
}
.lp-dayto{
  font-size: var(--text-sm);
  color: var(--muted);
  font-weight: 700;
}
.lp-dayto:hover{ color: var(--text); text-decoration:none; }

.lp-chiplist{
  margin-top: var(--s-3);
  display:flex;
  flex-direction: column;
  gap: var(--s-2);
}
.lp-chip{
  display:inline-flex;
  align-items:center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
  text-decoration:none;
  background: rgba(148,163,184,.08);
}
.lp-chip:hover{ background: rgba(148,163,184,.12); text-decoration:none; }
.lp-more{
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: var(--s-1);
}

.lp-upcoming{
  margin-top: var(--s-3);
  display:flex;
  flex-direction: column;
  gap: var(--s-3);
}
.lp-item{
  display:flex;
  gap: var(--s-3);
  align-items:center;
  padding: var(--s-4);
  text-decoration:none;
}
.lp-item:hover{
  box-shadow: var(--shadow-md);
  text-decoration:none;
}
.lp-item-date{
  min-width: 150px;
  font-weight: 900;
}
.lp-item-label{
  min-width: 140px;
  color: var(--muted);
  font-weight: 800;
  font-size: var(--text-sm);
}
.lp-item-title{ flex:1; color: var(--text); font-weight: 700; }
.lp-item-extra{ color: var(--muted); font-size: var(--text-sm); }

/* ---------- MODAL ---------- */
.lp-modal{
  display:none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9999;
  padding: var(--s-6) var(--s-4);
}
.lp-modal__panel{
  max-width: 980px;
  margin: 6vh auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: 0 20px 60px rgba(0,0,0,.30);
}
.lp-modal__head{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: var(--s-3);
}
.lp-modal__title{
  font-weight: 900;
}
.lp-modal__body{
  margin-top: var(--s-4);
}

/* ---------- ALERT SUCCESS (quita inline) ---------- */
.lp-alert--success{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.25);
  color: var(--success);
}

/* ---------- FILTERS (tasks) ---------- */
.lp-filters-grid{
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-3);
  align-items:end;
}
.lp-filters-grid .lp-field{ grid-column: span 3; }
.lp-filters-grid .lp-field:nth-child(1){ grid-column: span 4; } /* Buscar */
@media (max-width: 1000px){
  .lp-filters-grid .lp-field{ grid-column: span 6; }
  .lp-filters-grid .lp-field:nth-child(1){ grid-column: span 12; }
}
@media (max-width: 520px){
  .lp-filters-grid .lp-field{ grid-column: span 12; }
}

.lp-checkfield{ grid-column: span 3; }
.lp-actionsfield{ grid-column: span 3; }

.lp-check{
  display:inline-flex;
  align-items:center;
  gap: var(--s-2);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(148,163,184,.08);
  color: var(--text);
  font-weight: 700;
  font-size: var(--text-sm);
}

/* ---------- TABLE WRAP (horizontal scroll on mobile) ---------- */
.lp-tablewrap{
  overflow:auto;
  border-radius: var(--r-lg);
}
.lp-table-compact th, .lp-table-compact td{
  padding: 10px 12px;
  white-space: nowrap;
}
.lp-cell-strong{
  font-weight: 800;
}

/* ---------- ROW STATES ---------- */
.lp-row-danger td{
  background: rgba(239,68,68,.10);
}
.lp-row-warn td{
  background: rgba(245,158,11,.12);
}
[data-theme="dark"] .lp-row-danger td{
  background: rgba(239,68,68,.14);
}
[data-theme="dark"] .lp-row-warn td{
  background: rgba(245,158,11,.14);
}

/* --- Acciones en tabla: en una línea (wrap si no cabe) --- */
.lp-actions{
  display:flex;
  flex-wrap:wrap;
  gap: 6px;
  align-items:center;
}

/* evita que forms ocupen toda la fila */
.lp-actions form{
  display:inline-flex;
  margin:0;
}

/* evita botones/links full width dentro de la tabla */
.lp-actions .lp-btn,
.lp-actions button,
.lp-actions a.lp-btn{
  display:inline-flex;
  width:auto !important;
}

/* selects compactos (estado) */
.lp-actions .lp-select,
.lp-actions select{
  width:auto;
}

/* reduce alto de filas de tabla (más “fino”) */
.lp-table-compact th,
.lp-table-compact td{
  padding: 8px 10px;   /* antes 10px 12px */
  line-height: 1.15;
  vertical-align: middle;
}

/* botones extra compactos para acciones */
.lp-btn-xs{
  padding: 5px 9px;
  border-radius: 10px;
  font-size: 12px;
}
.lp-select-xs{
  padding: 5px 9px;
  border-radius: 10px;
  font-size: 12px;
}

/* ============================
   TASKS: tabla compacta nueva
============================ */
.lp-tasks-table th,
.lp-tasks-table td{
  white-space: normal; /* título y fecha pueden partir */
}

/* fila detalles */
.lp-taskdetails td{
  background: transparent !important;
  border-bottom: none;
  padding: 0;
}
.lp-taskdetails-box{
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  color: var(--text);
}

/* ============================
   CONTEXT MENU (right click)
============================ */
.lp-ctx{
  position: fixed;
  z-index: 99999;
  min-width: 260px;
  max-width: min(360px, calc(100vw - 16px));
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: 8px;
}

.lp-ctx__title{
  font-weight: 900;
  padding: 10px 10px 8px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.lp-ctx__item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 10px;
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.lp-ctx__item:hover{
  background: rgba(148,163,184,.12);
  text-decoration: none;
}

.lp-ctx__danger{
  color: var(--danger);
}
.lp-ctx__danger:hover{
  background: rgba(239,68,68,.12);
}

.lp-ctx__sep{
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}

.lp-ctx__row{
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(148,163,184,.08);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lp-ctx__label{
  font-size: var(--text-sm);
  color: var(--muted);
  font-weight: 800;
}
.lp-ctx__select{
  width: 100%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 800;
}
.lp-ctx__select:focus{
  outline: none;
  box-shadow: var(--ring);
}

/* En móvil: menú más cómodo */
@media (max-width: 520px){
  .lp-ctx{
    min-width: 240px;
  }
  .lp-ctx__item{
    padding: 12px 10px;
  }
}
/* ============================
   TASKS -> MOBILE CAPSULES (FINAL)
   Pegar AL FINAL y BORRAR duplicados anteriores
============================ */
@media (max-width: 820px){

  /* wrapper sin scroll */
  .lp-tablewrap{ overflow: visible; }

  /* ocultar cabecera SOLO tasks */
  .lp-tasks-table thead{ display:none !important; }

  /* romper tabla */
  .lp-tasks-table,
  .lp-tasks-table tbody{
    display:block !important;
    width:100% !important;
  }

  /* cada fila = cápsula */
  .lp-tasks-table tr.lp-taskrow{
    position: relative;
    display: grid !important;

    /* 3 columnas: contenido | detalle | botón */
    grid-template-columns: 1fr 1fr auto;
    grid-template-rows: auto auto;
    gap: 8px 12px;

    padding: 12px 12px 12px 38px; /* espacio para estrella */
    margin-bottom: 12px;

    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
  }

  /* ocultar todas las celdas por defecto */
  .lp-tasks-table tr.lp-taskrow > td{
    display:none !important;
    border:0 !important;
    padding:0 !important;
    background: transparent !important;
  }

  /* FAVORITO (estrella) */
  .lp-tasks-table tr.lp-taskrow > td.lp-m-fav{
    display:block !important;
    position:absolute;
    left: 12px;
    top: 12px;
    font-size: 16px;
    font-weight: 900;
    color: var(--text);
  }

  /* TÍTULO */
  .lp-tasks-table tr.lp-taskrow > td.lp-m-title{
    display:block !important;
    grid-column: 1 / 3;  /* ocupa 2 columnas */
    grid-row: 1;
    font-weight: 900;
    line-height: 1.2;
    color: var(--text);
    white-space: normal;
    min-width: 0;
  }

  /* FECHA (col 1, row 2) */
  .lp-tasks-table tr.lp-taskrow > td.lp-m-fecha{
    display:inline-flex !important;
    grid-column: 1 / 2;
    grid-row: 2;
    align-items:center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(148,163,184,.10);
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
  }

  /* TIEMPO (col 2, row 2) */
  .lp-tasks-table tr.lp-taskrow > td.lp-m-tiempo{
    display:inline-flex !important;
    grid-column: 2 / 3;
    grid-row: 2;
    align-items:center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(148,163,184,.10);
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    justify-content: flex-start;
  }

  /* ACCIÓN (col 3, ocupa 2 filas) */
  .lp-tasks-table tr.lp-taskrow > td.lp-m-actions{
    display:flex !important;
    grid-column: 3 / 4;
    grid-row: 1 / 3;
    align-items:center;
    justify-content:flex-end;
  }

  .lp-tasks-table tr.lp-taskrow > td.lp-m-actions .lp-btn{
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* COLORES por estado (aplican al TR) */
  .lp-taskrow.lp-row-danger{
    border-color: rgba(239,68,68,.35) !important;
    background: linear-gradient(to right, rgba(239,68,68,.18), rgba(239,68,68,.04)) !important;
  }
  .lp-taskrow.lp-row-warn{
    border-color: rgba(245,158,11,.35) !important;
    background: linear-gradient(to right, rgba(245,158,11,.20), rgba(245,158,11,.04)) !important;
  }
  /* Fav + recurrente en vertical */
  .lp-tasks-table tr.lp-taskrow > td.lp-m-fav{
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    line-height: 1;
  }

  /* estrella un poco más protagonista */
  .lp-tasks-table tr.lp-taskrow > td.lp-m-fav > span:first-child{
    font-size: 16px;
  }

  /* badge/icono recurrente más discreto */
  .lp-tasks-table tr.lp-taskrow > td.lp-m-fav > span:not(:first-child){
    font-size: 11px;
    opacity: .85;
  }
}
/* =========================
   NAV MOBILE (hamburger)
========================= */

.lp-nav-toggle{
  display:none;
  border:1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 900;
  cursor:pointer;
}
.lp-nav-toggle:focus{ outline:none; box-shadow: var(--ring); }

.lp-nav-panel{
  display:none;
}
/* =========================================================
   NAV MOBILE (<=1200) — FULLSCREEN OVERLAY + PANEL
   Requiere:
   - .lp-nav--desktop, .lp-userbar--desktop (desktop)
   - .lp-nav-toggle (botón hamburguesa)
   - .lp-nav-overlay (fondo)
   - .lp-nav-panel (panel)
   - .lp-nav--mobile (links)
   - .lp-userbar--mobile (user + logout)
   - JS añade/quita .lp-nav-open en <html> o <body>
========================================================= */

/* por defecto: oculto overlay/panel/toggle en desktop */
.lp-nav-toggle{ display:none; }
.lp-nav-overlay{ display:none; }
.lp-nav-panel{ display:none; }

@media (max-width: 1200px){

  /* ocultar nav desktop */
  .lp-nav--desktop,
  .lp-userbar--desktop{
    display:none !important;
  }

  /* mostrar botón hamburguesa */
  .lp-nav-toggle{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(148,163,184,.08);
    color: var(--text);
    cursor:pointer;
  }
  .lp-nav-toggle:hover{
    background: rgba(148,163,184,.12);
  }

  /* overlay fullscreen */
  .lp-nav-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.52);
    backdrop-filter: blur(6px);
    z-index: 9998;
    display:none; /* se abre con .lp-nav-open */
  }

  /* panel fullscreen (no lateral) */
  .lp-nav-panel{
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg);
    z-index: 9999;

    display:none; /* se abre con .lp-nav-open */
    overflow-y: auto;

    padding: 18px 16px 24px;
  }

  /* header del panel */
  .lp-nav-panel-head{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
  }

  .lp-nav-panel-title{
    font-weight: 900;
    font-size: 18px;
    color: var(--text);
    letter-spacing: -0.02em;
  }

  .lp-nav-close{
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border:1px solid var(--border);
    background: rgba(148,163,184,.08);
    color: var(--text);
    cursor:pointer;
    font-weight: 900;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .lp-nav-close:hover{
    background: rgba(148,163,184,.12);
  }

  /* links */
  .lp-nav--mobile{
    display:flex;
    flex-direction: column;
    gap: 10px;
    padding: 6px 0 14px;
  }
  .lp-nav--mobile a{
    width: 100%;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding: 14px 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(148,163,184,.08);
    color: var(--text);
    font-weight: 900;
    font-size: 16px;
    text-decoration:none;
  }
  .lp-nav--mobile a:hover{
    background: rgba(148,163,184,.12);
  }

  /* userbar abajo */
  .lp-userbar--mobile{
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    display:flex;
    justify-content: space-between;
    align-items:center;
    gap: 12px;
  }

  .lp-userbar--mobile .lp-user{
    font-weight: 900;
    color: var(--muted);
  }

  /* bloquear scroll del fondo cuando el menú esté abierto */
  .lp-nav-open{
    overflow: hidden;
  }
  .lp-nav-open body{
    overflow: hidden;
  }
}

/* estado abierto (lo activa JS con class lp-nav-open en <html> o <body>) */
.lp-nav-open .lp-nav-panel{ display:block; }
.lp-nav-open .lp-nav-overlay{ display:block; }
/* ============================
   TASK VIEW (view.php)
============================ */
.lp-taskview-hero-top{
  display:flex;
  flex-direction: column;
  gap: 14px;
}
.lp-taskview-badges{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.lp-taskview-fav{
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.25);
  color: var(--warning);
}

.lp-taskview-meta{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 1000px){
  .lp-taskview-meta{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lp-taskview-kv{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(148,163,184,.06);
}
.lp-taskview-k{
  font-size: var(--text-xs);
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.lp-taskview-v{
  font-weight: 900;
  margin-top: 4px;
}

.lp-taskview-descbox{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  background: rgba(148,163,184,.06);
}

.lp-taskview-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
@media (max-width: 1100px){
  .lp-taskview-grid{ grid-template-columns: 1fr; }
}

.lp-taskview-comment{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  background: rgba(148,163,184,.06);
}
.lp-taskview-comment-meta{
  font-size: var(--text-xs);
  color: var(--muted);
  font-weight: 800;
}
.lp-taskview-comment-text{
  margin-top: 10px;
  font-weight: 700;
}

.lp-taskview-subtask{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(148,163,184,.06);
}
.lp-taskview-subtask-title{
  font-weight: 900;
  color: var(--text);
  text-decoration:none;
}
.lp-taskview-subtask-title:hover{ text-decoration: underline; }

.lp-taskview-subtask-actions{
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items:center;
}

.lp-taskview-links{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
@media (max-width: 900px){
  .lp-taskview-links{ grid-template-columns: 1fr; }
}
.lp-taskview-chiprow{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.lp-taskview-deps{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
@media (max-width: 900px){
  .lp-taskview-deps{ grid-template-columns: 1fr; }
}
.lp-taskview-depitem{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(148,163,184,.06);
}
.lp-taskview-deptext{
  min-width: 0;
}
.lp-taskview-attachments{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 900px){
  .lp-taskview-attachments{ grid-template-columns: 1fr; }
}
.lp-taskview-attach{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(148,163,184,.06);
}
.lp-taskview-attach-name a{
  font-weight: 900;
  color: var(--text);
  text-decoration:none;
}
.lp-taskview-attach-name a:hover{ text-decoration: underline; }
/* ============================
   TASKS HISTORY -> MOBILE CAPSULES
============================ */
@media (max-width: 820px){

  .lp-history-table thead{ display:none !important; }

  .lp-history-table,
  .lp-history-table tbody{
    display:block !important;
    width:100% !important;
  }

  .lp-history-table tr.lp-historyrow{
    position: relative;
    display:grid !important;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 8px 12px;

    padding: 12px 12px 12px 38px;
    margin-bottom: 12px;

    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
  }

  .lp-history-table tr.lp-historyrow > td{
    display:none !important;
    border:0 !important;
    padding:0 !important;
    background: transparent !important;
  }

  /* Fav */
  .lp-history-table tr.lp-historyrow > td.lp-m-fav{
    display:block !important;
    position:absolute;
    left: 12px;
    top: 12px;
    font-size: 16px;
    font-weight: 900;
    color: var(--text);
  }

  /* Título */
  .lp-history-table tr.lp-historyrow > td.lp-m-title{
    display:block !important;
    grid-column: 1 / 2;
    grid-row: 1;
    font-weight: 900;
    line-height: 1.2;
    color: var(--text);
    white-space: normal;
    min-width: 0;
  }

  /* Chips */
  .lp-history-table tr.lp-historyrow > td.lp-m-prio{
    display:block !important;
    grid-column: 1 / 2;
    grid-row: 2;
  }
  .lp-history-table tr.lp-historyrow > td.lp-m-result{
    display:block !important;
    grid-column: 1 / 2;
    grid-row: 3;
  }

  /* Finalizado + Fecha más discreto */
  .lp-history-table tr.lp-historyrow > td.lp-m-final,
  .lp-history-table tr.lp-historyrow > td.lp-m-fecha{
    display:block !important;
    grid-column: 1 / 2;
    grid-row: 4;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
  }

  /* Acciones a la derecha */
  .lp-history-table tr.lp-historyrow > td.lp-m-actions{
    display:flex !important;
    grid-column: 2 / 3;
    grid-row: 1 / 5;
    align-items:center;
    justify-content:flex-end;
  }
}
@media (max-width: 900px){
  .lp-card-pad form > div[style*="grid-template-columns: repeat(12"]{
    display:block !important;
  }
}/* ============================
   TOGGLES + CHECKLIST UI (global)
   - Unificado
   - Fix definitivo centrado check
============================ */

/* ===== Toggle Chip (checkbox bonito con “switch”) ===== */
.lp-toggle{
  position: relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background: rgba(148,163,184,.08);
  color: var(--text);
  font-weight:800;
  cursor:pointer;
  user-select:none;
  transition: background .15s, border-color .15s, transform .02s;
}
.lp-toggle:hover{ background: rgba(148,163,184,.12); }
.lp-toggle:active{ transform: translateY(1px); }

.lp-toggle > input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.lp-toggle__pill{
  width:42px;
  height:24px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(148,163,184,.18);
  position:relative;
  flex:0 0 auto;
  transition: background .15s, border-color .15s;
}
.lp-toggle__pill::after{
  content:"";
  width:18px;
  height:18px;
  border-radius:999px;
  background: var(--card);
  position:absolute;
  top:2px;
  left:2px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s;
}
.lp-toggle > input:checked + .lp-toggle__pill{
  background: rgba(37,99,235,.35);
  border-color: rgba(37,99,235,.45);
}
[data-theme="dark"] .lp-toggle > input:checked + .lp-toggle__pill{
  background: rgba(59,130,246,.35);
  border-color: rgba(59,130,246,.45);
}
.lp-toggle > input:checked + .lp-toggle__pill::after{
  transform: translateX(18px);
}
.lp-toggle > input:focus-visible + .lp-toggle__pill{
  box-shadow: var(--ring);
}

/* ===== Botones auxiliares ===== */
.lp-btn-ghost{
  background: transparent;
  border:1px solid var(--border);
}
.lp-btn-soft{
  background: rgba(148,163,184,.10);
  border:1px solid var(--border);
}

.lp-pillnav{
  display:flex;
  gap:10px;
  align-items:center;
}

.lp-iconbtn{
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(148,163,184,.10);
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.lp-iconbtn:disabled{ opacity:.45; cursor:not-allowed; }

/* ===== Switch (Solo seleccionados) ===== */
.lp-switch{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  user-select:none;
  font-weight:800;
  color: var(--text);
  cursor:pointer;
}
.lp-switch > input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.lp-switch-ui{
  width:44px;
  height:26px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(148,163,184,.12);
  position:relative;
  transition:.2s ease;
  flex:0 0 auto;
}
.lp-switch-ui::after{
  content:"";
  width:20px;
  height:20px;
  border-radius:999px;
  background: var(--card);
  border:1px solid var(--border);
  position:absolute;
  top:50%;
  left:3px;
  transform: translateY(-50%);
  transition:.2s ease;
}
.lp-switch > input:checked + .lp-switch-ui{
  background: rgba(239,131,84,.22);
  border-color: rgba(239,131,84,.45);
}
.lp-switch > input:checked + .lp-switch-ui::after{ left:21px; }
.lp-switch > input:focus-visible + .lp-switch-ui{ box-shadow: var(--ring); }

/* =========================================================
   CHECKLIST ROWS (Proyectos/Objetivos) — FIX DEFINITIVO
   Motivo de “se ve arriba”: regla externa pisa align-items/line-height
   Solución: alineación por baseline + override específico
========================================================= */

/* forzamos layout consistente SOLO en estos labels */
#proy_list .lp-checkrow,
#obj_list  .lp-checkrow{
  position:relative;
  display:flex !important;
  align-items:baseline !important;   /* <- clave anti “sube” */
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background: rgba(148,163,184,.06);
  cursor:pointer;
}

#proy_list .lp-checkrow:hover,
#obj_list  .lp-checkrow:hover{
  background: rgba(148,163,184,.10);
}

#proy_list .lp-checkrow-input,
#obj_list  .lp-checkrow-input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* Caja del check: alineada al “baseline” mediante pequeño translate */
#proy_list .lp-checkrow-box,
#obj_list  .lp-checkrow-box{
  width:18px;
  height:18px;
  border-radius:6px;
  border:1px solid var(--border);
  background: transparent;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 18px;
  margin:0 !important;
  transform: translateY(0px);       /* <- centra respecto al texto real */
}

/* Texto: bloque y baseline limpio */
#proy_list .lp-checkrow-text,
#obj_list  .lp-checkrow-text{
  display:block !important;
  font-weight:800;
  line-height:1.2 !important;
}

/* checked */
#proy_list .lp-checkrow-input:checked + .lp-checkrow-box,
#obj_list  .lp-checkrow-input:checked + .lp-checkrow-box{
  background: rgba(239,131,84,.22);
  border-color: rgba(239,131,84,.55);
}

#proy_list .lp-checkrow-input:checked + .lp-checkrow-box::after,
#obj_list  .lp-checkrow-input:checked + .lp-checkrow-box::after{
  content:"";
  width:9px;
  height:5px;
  border-left:2px solid var(--text);
  border-bottom:2px solid var(--text);
  transform: translateY(-1px) rotate(-45deg);
}

/* focus */
#proy_list .lp-checkrow-input:focus-visible + .lp-checkrow-box,
#obj_list  .lp-checkrow-input:focus-visible + .lp-checkrow-box{
  box-shadow: var(--ring);
}
/* fila compacta tipo tareas */
.lp-project-line{
  display:grid;
  grid-template-columns: 1fr 260px 220px;
  gap:12px;
  align-items:center;
}

.lp-project-line__title{
  font-weight:1000;
  letter-spacing:-.01em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.lp-project-line__progress{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-start;
}
.lp-project-line__pct{
  font-weight:1000;
  width:44px;
  text-align:right;
}
.lp-project-line__bar{
  flex:1 1 auto;
  min-width:120px;
}
.lp-project-line__small{
  min-width:54px;
  text-align:left;
  font-weight:800;
}

.lp-project-line__right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
}
.lp-project-line__date{
  display:flex;
  flex-direction:column;
  gap:2px;
  align-items:flex-end;
  min-width:86px;
}
.lp-project-line__dateVal{
  font-weight:900;
}
.lp-project-line__actions{
  display:flex;
  align-items:center;
  gap:8px;
}

/* móvil: 1 por línea, apila como tareas */
@media (max-width: 720px){
  .lp-project-line{
    grid-template-columns: 1fr;
    align-items:flex-start;
  }
  .lp-project-line__title{
    white-space:normal;
    line-height:1.15;
  }
  .lp-project-line__progress{
    width:100%;
  }
  .lp-project-line__right{
    width:100%;
    justify-content:space-between;
  }
  .lp-project-line__date{
    align-items:flex-start;
  }
}
/* Checklist tipo "botón seleccionable" (SIN :has y con fallbacks) */
.lp-checkrow{
  position:relative;
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  border:1px solid var(--lp-border, rgba(255,255,255,.14));
  border-radius:14px;
  cursor:pointer;
  user-select:none;
  transition:background .15s ease, border-color .15s ease, transform .05s ease;
}

.lp-checkrow:hover{
  background: var(--lp-soft, rgba(255,255,255,.04));
}

.lp-checkrow:active{ transform: translateY(1px); }

/* Ocultamos el checkbox nativo, pero mantenemos accesibilidad */
.lp-checkrow-input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* Caja/indicador */
.lp-checkrow-box{
  width:18px;
  height:18px;
  border-radius:6px;
  border:1.5px solid var(--lp-border, rgba(255,255,255,.22));
  margin-top:2px;
  flex:0 0 auto;
}

/* Texto */
.lp-checkrow-text{
  display:block;
  line-height:1.25;
}

/* Seleccionado (sin :has) */
.lp-checkrow-input:checked + .lp-checkrow-box{
  border-color: var(--lp-primary, #6ea8fe);
  background: var(--lp-primary, #6ea8fe);
}

/* Focus accesible */
.lp-checkrow-input:focus-visible + .lp-checkrow-box{
  outline: 3px solid rgba(110,168,254,.35);
  outline-offset: 2px;
}
/* =========================================================
   CHECKLIST "TARJETA" (tareas/objetivos) — DEFINITIVO
   HTML:
   <label class="lp-checkrow">
     <input class="lp-checkrow-input" type="checkbox">
     <span class="lp-checkrow-box"></span>
     <span class="lp-checkrow-text">...</span>
   </label>
========================================================= */

.lp-checkrow{
  position: relative;
  display:flex;
  align-items:center;
  gap: 12px;

  padding: 12px 12px 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(148,163,184,.06);

  cursor:pointer;
  user-select:none;

  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

[data-theme="dark"] .lp-checkrow{
  background: rgba(148,163,184,.05);
}

.lp-checkrow:hover{
  background: rgba(148,163,184,.10);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .lp-checkrow:hover{
  background: rgba(148,163,184,.08);
}

.lp-checkrow:active{ transform: translateY(1px); }

/* checkbox real (accesible) */
.lp-checkrow-input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* cajita del check */
.lp-checkrow-box{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid rgba(148,163,184,.55);
  background: rgba(2,6,23,.12);
  flex: 0 0 auto;

  display:grid;
  place-items:center;

  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

[data-theme="dark"] .lp-checkrow-box{
  background: rgba(0,0,0,.18);
  border-color: rgba(148,163,184,.40);
}

/* checkmark */
.lp-checkrow-box::after{
  content:"";
  width: 9px;
  height: 5px;
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transform: rotate(-45deg);
  margin-top: -1px;
  transition: border-color .15s ease, transform .15s ease;
}

/* texto */
.lp-checkrow-text{
  display:flex;
  flex-direction:column;
  gap: 2px;
  min-width: 0;
}
.lp-checkrow-text strong{
  font-weight: 900;
  letter-spacing: -0.01em;
}
.lp-checkrow-text .lp-muted{
  opacity: .85;
}

/* seleccionado (verde) */
.lp-checkrow-input:checked + .lp-checkrow-box{
  background: rgba(130,167,124,.28);
  border-color: rgba(130,167,124,.70);
  box-shadow: 0 0 0 4px rgba(130,167,124,.12);
  transform: scale(1.03);
}
.lp-checkrow-input:checked + .lp-checkrow-box::after{
  border-left-color: rgba(255,255,255,.92);
  border-bottom-color: rgba(255,255,255,.92);
}

/* resalta la tarjeta (sin depender de :has) */
.lp-checkrow.is-checked{
  border-color: rgba(130,167,124,.38);
  background: rgba(130,167,124,.06);
}
.lp-checkrow.is-checked:hover{
  background: rgba(130,167,124,.09);
}

/* focus accesible */
.lp-checkrow-input:focus-visible + .lp-checkrow-box{
  box-shadow: var(--ring);
  outline: 2px solid rgba(239,131,84,.65);
  outline-offset: 2px;
}
.lp-toggle--row{
  display:flex;
  align-items:center;
  gap:10px;
  height:42px; /* mismo alto visual que inputs/select */
  margin-top:27px; /* alinea con la línea del select debajo del label */
}
/* =========================
   MODO MÓVIL PROYECTOS
   ========================= */
@media (max-width: 720px) {

  /* Header más compacto */
  .lp-title {
    font-size: 1.2rem;
  }

  .lp-actionsbar {
    gap: 6px;
  }

  /* Resumen más compacto */
  .lp-kvgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

 .lp-tablewrap { overflow: visible; }

  /* ocultar SOLO cabecera */
  .lp-table-proj thead { display: none; }

  /* mantener la tabla y convertir filas a cards */
  .lp-table-proj { width: 100%; border: 0; background: transparent; }
  .lp-table-proj tbody {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .lp-table-proj tr {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    background: rgba(148,163,184,.06);
  }
  .lp-table-proj td {
    border: none;
    padding: 0;
    white-space: normal; /* importante en móvil */
  }
  .lp-table-proj td:last-child { margin-top: 6px; }

  .lp-table-proj .lp-cell-strong { font-size: 1rem; }
  .lp-actions { justify-content: flex-start; }
}
/* ===== Checklist PRO (override) ===== */
.lp-checkrow{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(148,163,184,.06);
  cursor:pointer;
  user-select:none;
  margin-bottom:8px;
}
.lp-checkrow:last-child{ margin-bottom:0; }

.lp-checkrow-input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.lp-checkrow-box{
  width:18px;
  height:18px;
  border-radius:6px;
  border:1.5px solid rgba(148,163,184,.55);
  background: rgba(15,23,42,.06);
  flex:0 0 18px;
  margin-top:2px;
}

.lp-checkrow-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.lp-checkrow-text strong{
  font-weight:900;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* checked (checkbox + radio) */
.lp-checkrow-input:checked + .lp-checkrow-box{
  border-color: rgba(99,102,241,.9);
  background: rgba(99,102,241,.18);
}

/* hover */
.lp-checkrow:hover{
  background: rgba(148,163,184,.10);
}
/* ===== FORCE new style only on proyectos/objetivos lists ===== */
#proy_list .lp-checkrow,
#obj_list .lp-checkrow{
  display:flex !important;
  gap:10px !important;
  align-items:flex-start !important;
  padding:10px 10px !important;
  border-radius:12px !important;
  border:1px solid var(--border) !important;
  background: rgba(148,163,184,.06) !important;
  cursor:pointer !important;
  user-select:none !important;
  margin-bottom:8px !important;
}

#proy_list .lp-checkrow-input,
#obj_list .lp-checkrow-input{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
}

#proy_list .lp-checkrow-box,
#obj_list .lp-checkrow-box{
  width:18px !important;
  height:18px !important;
  border-radius:6px !important;
  border:1.5px solid rgba(148,163,184,.55) !important;
  background: rgba(15,23,42,.06) !important;
  flex:0 0 18px !important;
  margin-top:2px !important;
}

#proy_list .lp-checkrow-text,
#obj_list .lp-checkrow-text{
  display:flex !important;
  flex-direction:column !important;
  gap:2px !important;
  min-width:0 !important;
}

#proy_list .lp-checkrow-input:checked + .lp-checkrow-box,
#obj_list .lp-checkrow-input:checked + .lp-checkrow-box{
  border-color: rgba(99,102,241,.9) !important;
  background: rgba(99,102,241,.18) !important;
}
@media (max-width: 640px){
  .lp-taskview-header{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .lp-taskview-actions{
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  .lp-taskview-actions .lp-btn{
    flex: 1 1 auto !important;
    text-align: center !important;
  }
}
/* Header tarea – desktop */
.lp-taskview-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}

/* Botones */
.lp-taskview-actions{
  display:flex;
  gap:10px;
}

/* 🔥 MÓVIL */
@media (max-width: 640px){
  .lp-taskview-header{
    flex-direction:column;
    align-items:stretch;
  }

  .lp-taskview-actions{
    flex-direction:column;
    width:100%;
  }

  .lp-taskview-actions .lp-btn{
    width:100%;
    text-align:center;
  }
}
.lp-taskview-meta{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

@media (max-width: 640px){
  .lp-taskview-meta{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 380px){
  .lp-taskview-meta{
    grid-template-columns:1fr;
  }
}
/* ===== Filtros plegables (móvil) ===== */
.lp-filters-toggle{
  display:none;
  width:100%;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}

@media (max-width: 640px){
  .lp-filters-toggle{ display:flex; }
  #filtersForm.lp-filters-collapsed{ display:none; }
}
@media (max-width: 640px){
  .lp-filters-toggle{ display:flex; width:100%; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; }
  .lp-filters-grid.lp-filters-collapsed{ display:none; }
}
@media (max-width: 640px){
  /* Tabla -> tarjetas tipo cápsula */
  .lp-objectives-table thead{ display:none; }
  .lp-objectives-table,
  .lp-objectives-table tbody,
  .lp-objectives-table tr,
  .lp-objectives-table td{ display:block; width:100%; }

  .lp-objectives-table tr{
    margin: 10px 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(148,163,184,.06);
  }

  .lp-objectives-table td{
    padding: 8px 0;
    border: 0;
    display:flex;
    justify-content:space-between;
    gap: 12px;
    align-items:baseline;
  }

  .lp-objectives-table td::before{
    content: attr(data-label);
    font-size: .85rem;
    color: var(--muted);
    font-weight: 700;
    margin-right: 10px;
    flex: 0 0 auto;
  }

  /* Título más protagonista */
  .lp-objectives-table .lp-m-title{
    padding-top: 2px;
  }
  .lp-objectives-table .lp-m-title::before{
    content: "Objetivo";
  }
  .lp-objectives-table .lp-m-title{
    font-weight: 900;
  }

  /* Acciones alineadas */
  .lp-objectives-table .lp-m-actions{
    justify-content:flex-end;
  }
  .lp-objectives-table .lp-m-actions::before{
    content: "";
  }
}
/* Objetivos – view */
.lp-objview-meta{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.lp-objview-meta__item{
  padding:12px;
  border-radius:12px;
}

.lp-objview-meta__value{
  font-weight:900;
  font-size:1.05rem;
}

/* Mobile */
@media (max-width: 768px){
  .lp-objview-meta{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
/* grid simple reutilizable */
.lp-grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
@media (max-width: 768px){
  .lp-grid-2{ grid-template-columns:1fr; }
}

/* caja de proyectos dentro del edit */
.lp-obj-proybox{
  max-height:320px;
  overflow:auto;
}
.lp-obj-proyitem{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:8px 0;
  border-bottom:1px dashed rgba(148,163,184,.35);
}
.lp-obj-proyitem:last-child{ border-bottom:none; }
.lp-obj-proytitle{ font-weight:800; }

/* tabla subobjetivos -> cápsulas en móvil */
@media (max-width: 768px){
  .lp-subobj-table thead{ display:none; }
  .lp-subobj-table, .lp-subobj-table tbody, .lp-subobj-table tr, .lp-subobj-table td{
    display:block;
    width:100%;
  }
  .lp-subobj-table tr{
    margin:10px 0;
    padding:12px;
    border:1px solid var(--border);
    border-radius:14px;
    background: rgba(148,163,184,.06);
  }
  .lp-subobj-table td{
    border:none;
    padding:6px 0;
    display:flex;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
  }
  .lp-subobj-table td::before{
    content: attr(data-label);
    color: var(--muted);
    font-size:.85rem;
  }
  .lp-subobj-table .lp-m-actions{
    justify-content:flex-start;
    gap:8px;
  }
}
/* Checklist visual unificado */
.lp-checklist-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:10px 0;
  cursor:pointer;
  border-bottom:1px dashed var(--border);
}
.lp-checklist-item:last-child{ border-bottom:none; }

.lp-checklist-item input{
  display:none;
}

.lp-checklist-box{
  width:18px;
  height:18px;
  border-radius:6px;
  border:2px solid var(--border);
  margin-top:2px;
  flex-shrink:0;
  position:relative;
}

.lp-checklist-item input:checked + .lp-checklist-box{
  background:var(--primary);
  border-color:var(--primary);
}
.lp-checklist-item input:checked + .lp-checklist-box::after{
  content:'✓';
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:12px;
  font-weight:900;
}

.lp-checklist-content{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.lp-checklist-title{
  font-weight:800;
}
.lp-checklist-meta{
  font-size:.85rem;
  color:var(--muted);
}
/* =========================================================
   OBJECTIVES EDIT — OVERRIDES (PEGAR AL FINAL)
========================================================= */

/* PROYECTOS: checklist pro consistente */
#proy_list .lp-checkrow{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  padding:12px 12px 12px 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  background: rgba(148,163,184,.06) !important;
  margin-bottom: 8px !important;
}
#proy_list .lp-checkrow:hover{
  background: rgba(148,163,184,.10) !important;
}
#proy_list .lp-checkrow-box{
  margin-top:0 !important;
  display:grid !important;
  place-items:center !important;
}
#proy_list .lp-checkrow.is-checked{
  border-color: rgba(130,167,124,.38) !important;
  background: rgba(130,167,124,.06) !important;
}

/* SUBOBJETIVOS: móvil en cápsulas limpio */
@media (max-width: 768px){
  .lp-subobj-table thead{ display:none !important; }

  .lp-subobj-table,
  .lp-subobj-table tbody{
    display:block !important;
    width:100% !important;
  }

  .lp-subobj-table tr.lp-subrow{
    display:block !important;
    margin: 10px 0 !important;
    padding: 12px !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    background: rgba(148,163,184,.06) !important;
  }

  .lp-subobj-table td{
    display:flex !important;
    justify-content: space-between !important;
    gap: 14px !important;
    border: 0 !important;
    padding: 8px 0 !important;
    white-space: normal !important;
    align-items: baseline !important;
  }

  .lp-subobj-table td::before{
    content: attr(data-label);
    color: var(--muted);
    font-size: .85rem;
    font-weight: 800;
    flex: 0 0 auto;
  }

  .lp-subobj-table .lp-m-title{
    font-weight: 900;
  }

  .lp-subobj-table .lp-m-actions{
    display:block !important;
  }

  .lp-subobj-table .lp-m-actions::before{
    content:"";
  }

  .lp-subobj-table .lp-actions{
    justify-content:flex-start !important;
    gap:8px !important;
  }
}
.lp-obj-proybox--no-scroll{
  max-height: none !important;
  overflow: visible !important;
}
/* FIX: acciones del header en móvil como botones normales (inline con wrap) */
.lp-taskview-actions{
  display:flex;
  flex-direction:row !important;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

.lp-taskview-actions .lp-btn{
  width:auto !important;
  flex:0 0 auto;
}

/* si tu CSS fuerza full-width en móvil, lo anulamos solo aquí */
.lp-taskview-actions form{
  display:inline-flex;
}
.lp-taskview-actions form .lp-btn{
  width:auto !important;
}
/* =========================================================
   CHECKLIST (index)
========================================================= */
.lp-checklist-head .lp-checklist-kpis{ margin-top: 6px; }
.lp-checklist-kpi{ margin-left: 6px; }

.lp-checklist-actions .lp-btn{ white-space: nowrap; }

.lp-checklist-filters .lp-card-title{ margin-bottom: 10px; }
.lp-checklist-filtersgrid .lp-field{ grid-column: span 3; }
.lp-checklist-filtersgrid .lp-field:nth-child(1){ grid-column: span 4; }
.lp-checklist-filteractions{ grid-column: span 2; }

@media (max-width: 1000px){
  .lp-checklist-filtersgrid .lp-field{ grid-column: span 6; }
  .lp-checklist-filtersgrid .lp-field:nth-child(1){ grid-column: span 12; }
  .lp-checklist-filteractions{ grid-column: span 12; }
}
@media (max-width: 520px){
  .lp-checklist-filtersgrid .lp-field{ grid-column: span 12; }
}

/* Progreso por categoría */
.lp-checklist-percat-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-3);
}
@media (max-width: 1100px){
  .lp-checklist-percat-grid{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 520px){
  .lp-checklist-percat-grid{ grid-template-columns: 1fr; }
}

.lp-checkcat{
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  background: rgba(148,163,184,.06);
}
.lp-checkcat-name{
  font-weight: 900;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.lp-checkcat-count{ font-size: var(--text-sm); color: var(--muted); font-weight: 800; }
.lp-checkcat-bar{
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(148,163,184,.10);
  overflow:hidden;
  margin: 10px 0 6px;
}
.lp-checkcat-barfill{
  height:100%;
  background: rgba(59,130,246,.55);
}
.lp-checkcat-pct{ font-size: var(--text-sm); color: var(--muted); font-weight: 800; }

/* Grupos */
.lp-checklist-group{ margin-top: var(--s-4); }
.lp-checklist-groupname{
  font-weight: 1000;
  letter-spacing: -0.01em;
  font-size: 18px;
}

/* Lista */
.lp-checklist-list{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--s-3);
}

.lp-checkitem{
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items:center;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  background: rgba(148,163,184,.05);
}
.lp-checkitem:hover{
  background: rgba(148,163,184,.08);
  box-shadow: var(--shadow-md);
}

.lp-checktoggle{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(148,163,184,.10);
  color: var(--text);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.lp-checktoggle:focus{ outline:none; box-shadow: var(--ring); }
.lp-checktoggle-icon{
  font-weight: 1000;
  font-size: 16px;
  line-height: 1;
}

.lp-checkitem.is-done .lp-checktoggle{
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.25);
}

.lp-checkitem-title{
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.lp-checkitem-title--done{
  text-decoration: line-through;
  color: var(--muted);
}

.lp-checkitem-actions{
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap: wrap;
}
.lp-checkitem-deleteform{ display:inline-flex; margin:0; }
.lp-checkitem-toggleform{ display:inline-flex; margin:0; }

/* Mobile: acciones en 2 columnas (botones mismo ancho) */
@media (max-width: 720px){
  .lp-checkitem{
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items:start;
  }
  .lp-checkitem-actions{
    grid-column: 1 / -1;
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 6px;
  }
  .lp-checkitem-actions .lp-btn,
  .lp-checkitem-actions form{ width:100%; }
  .lp-checkitem-actions .lp-btn{ justify-content:center; width:100%; }
}
/* =========================
   CHECKLIST – header spacing/alignment
========================= */
.lp-checklist-head{
  align-items: center;           /* baja los botones: ya no quedan pegados arriba */
  margin-top: var(--s-2);        /* separa un poco del nav */
  margin-bottom: var(--s-4);     /* un poco más cerca del filtro */
}

@media (max-width: 900px){
  .lp-checklist-head{
    align-items: stretch;        /* en móvil, columna */
    margin-top: var(--s-2);
  }
}
/* =========================
   CHECKLIST – toggle bigger
========================= */
.lp-checktoggle{
  width: 52px;
  height: 52px;
  border-radius: 16px;
}

.lp-checktoggle-icon{
  font-size: 18px;
  font-weight: 1000;
}

/* un pelín más de empaque en cada item */
.lp-checkitem{
  padding: 14px;
  gap: 14px;
}
/* =========================
   CHECKLIST – item actions (DESKTOP FIX)
========================= */

/* Fuerza layout horizontal y botones con empaque */
@media (min-width: 721px){
  .lp-checkitem-actions{
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .lp-checkitem-actions .lp-btn{
    min-height: 36px;
    padding: 6px 12px;
    font-size: 13px;
    line-height: 1;
    border-radius: 10px;
  }

  .lp-checkitem-actions .lp-btn-danger{
    padding-left: 14px;
    padding-right: 14px;
  }
}
/* =========================
   CHECKLIST – compact desktop
========================= */
@media (min-width: 721px){

  /* contenedor general un poco más estrecho visualmente */
  .lp-checklist-group,
  .lp-checklist-percat,
  .lp-checklist-filters{
    padding: 14px;
  }

  /* item más compacto */
  .lp-checkitem{
    padding: 10px 12px;
    gap: 10px;
    border-radius: 12px;
  }

  /* botón check más pequeño */
  .lp-checktoggle{
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .lp-checktoggle-icon{
    font-size: 15px;
  }

  /* título menos grande */
  .lp-checkitem-title{
    font-size: 14px;
    line-height: 1.2;
  }

  .lp-checkitem-sub{
    font-size: 12px;
  }

  /* acciones un poco más compactas */
  .lp-checkitem-actions .lp-btn{
    min-height: 32px;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 9px;
  }
}
/* =========================
   CALENDARIO (v2 PRO)
   Requiere estas clases/ids:
   - #calendarGrid, .lp-cal-grid, .lp-cal-dow
   - .lp-cal-cell, .lp-cal-events, .lp-cal-badgeitem
   - #dayPanel, #dayModal, #ctxMenu
   - #monthSummaryWrap, #monthSummary, .lp-sum-card
   ========================= */

/* ---------- Tokens (claro / oscuro) ---------- */
:root{
  --lp-bg: #f6f7fb;
  --lp-surface: #ffffff;
  --lp-surface-2: #f1f3f7;
  --lp-border: rgba(17,24,39,.14);
  --lp-border-2: rgba(17,24,39,.22);
  --lp-text: rgba(17,24,39,.95);
  --lp-muted: rgba(17,24,39,.62);

  --lp-chip: rgba(17,24,39,.05);
  --lp-chip-hover: rgba(17,24,39,.08);

  --lp-shadow: 0 12px 40px rgba(0,0,0,.16);
  --lp-shadow-soft: 0 10px 26px rgba(0,0,0,.12);

  --lp-accent: #3b82f6;
  --lp-accent-2: rgba(59,130,246,.14);

  /* badges */
  --lp-badge-bg: rgba(17,24,39,.03);
  --lp-badge-bd: rgba(17,24,39,.18);
}

html[data-theme="dark"]{
  --lp-bg: #070b14;
  --lp-surface: #0e1626;
  --lp-surface-2: #0b1220;
  --lp-border: rgba(255,255,255,.10);
  --lp-border-2: rgba(255,255,255,.16);
  --lp-text: rgba(255,255,255,.92);
  --lp-muted: rgba(255,255,255,.62);

  --lp-chip: rgba(255,255,255,.06);
  --lp-chip-hover: rgba(255,255,255,.09);

  --lp-shadow: 0 18px 60px rgba(0,0,0,.55);
  --lp-shadow-soft: 0 14px 34px rgba(0,0,0,.42);

  --lp-accent: #60a5fa;
  --lp-accent-2: rgba(96,165,250,.16);

  --lp-badge-bg: rgba(255,255,255,.05);
  --lp-badge-bd: rgba(255,255,255,.18);
}

/* ---------- Wrappers ---------- */
#calendarGrid{
  position: relative;
}

/* Si tu HTML pinta el grid con inline styles, esto lo “refuerza” */
.lp-cal-dow{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}
.lp-cal-dow > div{
  text-align:center;
  font-weight: 700;
  font-size: 12px;
  color: var(--lp-muted);
  letter-spacing: .02em;
  padding: 6px 0;
}


/* ---------- Día (celda) ---------- */
.lp-cal-cell{
  height: 128px;          /* iguales */
  min-height: 128px;
  background: var(--lp-surface);
  border: 1px solid var(--lp-border);
  border-radius: 14px;
  padding: 10px;
  overflow: hidden;
  display:flex;
  flex-direction: column;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  transition: border-color .15s ease, transform .12s ease, background .15s ease;
}

.lp-cal-cell:hover{
  border-color: var(--lp-border-2);
  transform: translateY(-1px);
}

.lp-cal-cell.is-out{
  background: var(--lp-surface-2);
  border-style: dashed;
  border-color: var(--lp-border);
  opacity: .85;
}

.lp-cal-cell.is-today{
  border-color: color-mix(in srgb, var(--lp-accent) 55%, var(--lp-border));
  box-shadow: 0 0 0 3px var(--lp-accent-2);
}

.lp-cal-cellhead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom: 8px;
}

.lp-cal-daynum{
  font-weight: 800;
  font-size: 12px;
  color: var(--lp-text);
  opacity: .92;
}

.lp-cal-events{
  flex:1;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* ---------- Badge evento (ellipsis real, sin romper alturas) ---------- */
.lp-cal-badgeitem{
  display:block;
  max-width: 100%;
  min-width: 0;
  text-decoration:none;

  font-size: 12px;
  line-height: 1.15;
  padding: 6px 8px;
  border-radius: 10px;

  background: var(--lp-badge-bg);
  border: 1px solid var(--lp-badge-bd);
  color: var(--lp-text);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  transition: background .15s ease, border-color .15s ease;
}

.lp-cal-badgeitem:hover{
  background: var(--lp-chip-hover);
  border-color: var(--lp-border-2);
}

/* (Opcional) colores por tipo si añades className según entity/kind */
.lp-cal-badgeitem.is-task{ border-left: 3px solid rgba(96,165,250,.9); }
.lp-cal-badgeitem.is-proj{ border-left: 3px solid rgba(34,197,94,.85); }
.lp-cal-badgeitem.is-goal{ border-left: 3px solid rgba(244,63,94,.85); }

/* ---------- Barra filtros (chips) ---------- */
.lp-cal-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.lp-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--lp-chip);
  border: 1px solid var(--lp-border);
  color: var(--lp-text);
  font-weight: 650;
  font-size: 12px;
}
.lp-chip input{ transform: translateY(1px); }

/* ---------- Resumen del mes (parte inferior) ---------- */
#monthSummaryWrap .lp-card-title,
#monthSummaryWrap h3{
  color: var(--lp-text);
}

#monthSummary{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

.lp-sum-card{
  background: var(--lp-surface);
  border: 1px solid var(--lp-border);
  border-radius: 14px;
  padding: 12px 14px;
  min-width: 150px;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
.lp-sum-card .t{
  font-size: 12px;
  color: var(--lp-muted);
  margin-bottom: 8px;
}
.lp-sum-card .v{
  font-size: 22px;
  font-weight: 850;
  color: var(--lp-text);
}

/* Si tu resumen se renderiza con divs sueltos, esto lo mejora */
#monthSummary > div{
  background: var(--lp-surface) !important;
  border-color: var(--lp-border) !important;
  color: var(--lp-text) !important;
}

/* ---------- Panel flotante (dayPanel) ---------- */
#dayPanel{
  z-index: 9998;
}

#dayPanel > div{
  background: var(--lp-surface) !important;
  border: 1px solid var(--lp-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--lp-shadow-soft) !important;
  color: var(--lp-text) !important;
}

#dayPanel .lp-btn,
#dayPanel a,
#dayPanel button{
  color: var(--lp-text);
}

#dayPanelEvents > div{
  background: color-mix(in srgb, var(--lp-surface) 85%, transparent) !important;
  border: 1px solid var(--lp-border) !important;
  border-radius: 12px !important;
}

/* Botones dentro del panel */
#dayPanel a, #dayPanel button{
  background: var(--lp-chip) !important;
  border: 1px solid var(--lp-border) !important;
}
#dayPanel a:hover, #dayPanel button:hover{
  background: var(--lp-chip-hover) !important;
  border-color: var(--lp-border-2) !important;
}

/* ---------- Modal (dayModal) ---------- */
#dayModal{
  z-index: 9999;
}

#dayModalBackdrop{
  background: rgba(0,0,0,.45) !important;
}

#dayModal > div:nth-child(2),
#dayModal > div[style*="max-width"]{
  background: var(--lp-surface) !important;
  border: 1px solid var(--lp-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--lp-shadow) !important;
  color: var(--lp-text) !important;
}

#dayModalEvents > div{
  border: 1px solid var(--lp-border) !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--lp-surface) 92%, transparent) !important;
}

/* ---------- Context menu ---------- */
#ctxMenu > div{
  background: var(--lp-surface) !important;
  border: 1px solid var(--lp-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--lp-shadow-soft) !important;
}

#ctxMenu button{
  color: var(--lp-text) !important;
}
#ctxMenu button:hover{
  background: var(--lp-chip-hover) !important;
}

/* ---------- Navegación superior (botones prev/next/hoy/ir) ---------- */
.lp-cal-nav .lp-btn,
.lp-cal-nav button,
.lp-cal-nav a{
  background: var(--lp-chip);
  border: 1px solid var(--lp-border);
  color: var(--lp-text);
  border-radius: 12px;
}
.lp-cal-nav .lp-btn:hover,
.lp-cal-nav button:hover,
.lp-cal-nav a:hover{
  background: var(--lp-chip-hover);
  border-color: var(--lp-border-2);
}

/* ---------- Responsive (móvil “calendario real”) ---------- */
@media (max-width: 820px){
  .lp-cal-grid{ gap: 8px; }
  .lp-cal-cell{ height: 96px; min-height:96px; padding: 8px; border-radius: 12px; }
  .lp-cal-badgeitem{ font-size: 11px; padding: 5px 6px; border-radius: 9px; }
}

@media (max-width: 640px){
  /* Mantener formato calendario, pero compacto */
  .lp-cal-dow{ gap: 6px; }
  .lp-cal-grid{ gap: 6px; }
  .lp-cal-cell{ height: 88px; min-height:88px; padding: 7px; border-radius: 12px; }
  .lp-cal-events{ gap: 5px; }

  /* oculta exceso visual: muestra 2 badges máximo (sin romper altura) */
  .lp-cal-events .lp-cal-badgeitem:nth-child(n+3){ display:none; }

  /* panel/modal ocupan mejor en móvil */
  #dayModal > div[style*="max-width"]{
    max-width: calc(100% - 24px) !important;
    margin: 50px auto !important;
  }
}
/* ===== FIX: calendario no debe colapsar a 1 columna ===== */
#calendarGrid {
  width: 100%;
  max-width: 1100px;
}

#calendarGrid .lp-cal-dow {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

#calendarGrid .lp-cal-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

/* cada día igual */
#calendarGrid .lp-cal-cell {
  min-height: 120px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

/* badges con elipsis */
#calendarGrid .lp-cal-badge {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ===== CALENDAR FIX DEFINITIVO (tu HTML real) ===== */

/* El contenedor NO es la rejilla de días */
#calendarGrid.lp-cal-grid{
  display: block !important;
  max-width: none !important;   /* quita el cuello de botella */
  width: 100% !important;
}

/* Cabecera de días (Lu..Do) */
#calendarGrid .lp-cal-dow{
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

/* Rejilla de celdas */
#calendarGrid .lp-cal-cells{
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

/* Celdas */
#calendarGrid .lp-cal-cell{
  min-height: 128px;
  height: auto;
}
/* =========================================================
   CALENDARIO — FIX PANEL FLOTA + MODAL CENTRADO + CTX COLORS
   (PEGAR AL FINAL DEL CSS)
========================================================= */

/* 1) Panel flotante del día: debe ser FIXED para que left/top del JS funcionen */
#dayPanel.lp-cal-daypanel{
  position: fixed !important;
  z-index: 9998;
  width: 340px;
  max-width: calc(100vw - 20px);
  max-height: calc(100vh - 20px);
  overflow: auto;
}

/* el “inner” como tarjeta */
#dayPanel .lp-cal-daypanel-inner{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 14px;
}

/* 2) Modal nuevo (tu HTML usa .lp-modal-backdrop + .lp-modal-dialog) */
#dayModal.lp-modal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  padding: var(--s-6) var(--s-4) !important;
  background: transparent !important; /* el fondo lo da el backdrop */
}

#dayModal .lp-modal-backdrop{
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,.45) !important;
}


@media (max-width: 640px){
  #dayModal .lp-modal-dialog{
    margin: 10vh auto !important;
  }
}

/* 3) Context menu: colores consistentes con tu theme */
#ctxMenu.lp-cal-ctx{
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

#ctxMenu.lp-cal-ctx .lp-ctx__item{
  color: var(--text) !important;
}

#ctxMenu.lp-cal-ctx .lp-ctx__item:hover{
  background: rgba(148,163,184,.12) !important;
}

[data-theme="dark"] #ctxMenu.lp-cal-ctx .lp-ctx__item:hover{
  background: rgba(148,163,184,.10) !important;
}

#ctxMenu.lp-cal-ctx .lp-ctx__danger{
  color: var(--danger) !important;
}

#ctxMenu.lp-cal-ctx .lp-ctx__danger:hover{
  background: rgba(239,68,68,.12) !important;
}
/* =========================================================
   MENÚ OPCIONES (día + eventos) — neutraliza estilos globales
   (PEGAR AL FINAL)
========================================================= */

/* Contenedores típicos (ctx general + menús dentro del panel del día) */
#ctxMenu,
#dayPanel .lp-menu,
#dayPanel .lp-ctx,
#dayPanel .lp-dropdown,
#dayPanel [role="menu"]{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-md) !important;
  padding: 6px !important;
  min-width: 220px;
}

/* Items del menú: reset de “botón global” */
#ctxMenu button,
#ctxMenu a,
#ctxMenu .lp-ctx__item,
#dayPanel .lp-menu button,
#dayPanel .lp-menu a,
#dayPanel .lp-ctx button,
#dayPanel .lp-ctx a,
#dayPanel .lp-dropdown button,
#dayPanel .lp-dropdown a,
#dayPanel [role="menu"] button,
#dayPanel [role="menu"] a{
  appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px;

  width: 100% !important;
  padding: 9px 10px !important;
  margin: 0 !important;

  border-radius: 10px !important;
  text-align: left !important;
  color: var(--text) !important;
  font: inherit !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
}

/* Hover / focus */
#ctxMenu button:hover,
#ctxMenu a:hover,
#ctxMenu .lp-ctx__item:hover,
#dayPanel .lp-menu button:hover,
#dayPanel .lp-menu a:hover,
#dayPanel .lp-ctx button:hover,
#dayPanel .lp-ctx a:hover,
#dayPanel .lp-dropdown button:hover,
#dayPanel .lp-dropdown a:hover,
#dayPanel [role="menu"] button:hover,
#dayPanel [role="menu"] a:hover{
  background: rgba(148,163,184,.12) !important;
}

#ctxMenu button:focus-visible,
#dayPanel [role="menu"] button:focus-visible{
  outline: 2px solid rgba(59,130,246,.55) !important;
  outline-offset: 2px !important;
}

/* Disabled */
#ctxMenu button:disabled,
#dayPanel [role="menu"] button:disabled{
  opacity: .45 !important;
  cursor: not-allowed !important;
}

/* Danger */
#ctxMenu .lp-ctx__danger,
#dayPanel .lp-ctx__danger{
  color: var(--danger) !important;
}

#ctxMenu .lp-ctx__danger:hover,
#dayPanel .lp-ctx__danger:hover{
  background: rgba(239,68,68,.12) !important;
}
/* Calendario: eventos del día - más aire y orden */
#dayPanel .event-item,
#dayPanel .lp-day-event,
#dayPanel .day-event,
#dayPanel [data-day-event]{
  display: flex;
  align-items: center;
  gap: 10px;              /* separación entre texto y botón */
  padding-right: 10px;    /* margen interno a la derecha */
}

#dayPanel .event-item .event-title,
#dayPanel .lp-day-event .event-title,
#dayPanel .day-event .event-title,
#dayPanel [data-day-event] .event-title{
  flex: 1;
  min-width: 0;
  padding-right: 6px;     /* evita que el texto “choque” con … */
}

#dayPanel .event-item .event-more,
#dayPanel .lp-day-event .event-more,
#dayPanel .day-event .event-more,
#dayPanel [data-day-event] .event-more,
#dayPanel .event-item .btn-more,
#dayPanel .lp-day-event .btn-more,
#dayPanel .day-event .btn-more{
  flex: 0 0 auto;
  margin-left: auto;
  width: 32px;
  height: 28px;
  border-radius: 10px;
  padding: 0;
}
/* Detalle del día: 1 evento por línea + sin reborde raro en el título */
#dayPanel .event-item,
#dayPanel .lp-day-event,
#dayPanel .day-event,
#dayPanel [data-day-event]{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

/* El texto en una sola línea con ... */
#dayPanel .event-item .event-title,
#dayPanel .lp-day-event .event-title,
#dayPanel .day-event .event-title,
#dayPanel [data-day-event] .event-title{
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* quitar reborde/estilo heredado del calendario */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Botón "..." siempre a la derecha */
#dayPanel .event-item .event-more,
#dayPanel .lp-day-event .event-more,
#dayPanel .day-event .event-more,
#dayPanel [data-day-event] .event-more,
#dayPanel .event-item .btn-more,
#dayPanel .lp-day-event .btn-more,
#dayPanel .day-event .btn-more{
  flex: 0 0 auto;
  margin-left: auto;
}
/* =========================================================
   CALENDARIO — DAY PANEL (detalle) eventos: 1 línea + ellipsis + aire
   (PEGAR AL FINAL DEL CSS)
========================================================= */

/* Asegura panel flotante bien (tu JS le pone left/top) */
#dayPanel.lp-cal-daypanel{
  position: fixed !important;
  z-index: 9998;
  width: 340px;
  max-width: calc(100vw - 20px);
  max-height: calc(100vh - 20px);
  overflow: auto;
}

/* Cada fila del evento en el panel */
#dayPanel #dayPanelEvents .lp-cal-dayrow{
  display: flex;
  align-items: center;
  gap: 10px;                 /* separación texto ↔ botón */
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid var(--lp-border);
  background: color-mix(in srgb, var(--lp-surface) 92%, transparent);
}

/* Hover suave */
#dayPanel #dayPanelEvents .lp-cal-dayrow:hover{
  border-color: var(--lp-border-2);
  background: var(--lp-chip-hover);
}

/* Link del evento: SIN borde raro + 1 línea + ellipsis */
#dayPanel #dayPanelEvents .lp-cal-dayrow-link{
  flex: 1;
  min-width: 0;

  display: block;
  text-decoration: none;
  color: var(--lp-text) !important;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Botón ⋯: fijo a la derecha y con tamaño consistente */
#dayPanel #dayPanelEvents .lp-cal-dayrow > .lp-btn{
  flex: 0 0 auto;
  margin-left: auto;

  width: 34px;
  height: 30px;
  padding: 0 !important;

  border-radius: 10px !important;
  background: var(--lp-chip) !important;
  border: 1px solid var(--lp-border) !important;
  color: var(--lp-text) !important;
}

#dayPanel #dayPanelEvents .lp-cal-dayrow > .lp-btn:hover{
  background: var(--lp-chip-hover) !important;
  border-color: var(--lp-border-2) !important;
}


/* =========================================================
   CALENDARIO — MODAL detalle: centrado y con más aire
========================================================= */

#dayModal.lp-modal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  padding: 28px 16px !important; /* más aire */
}

#dayModal .lp-modal-backdrop{
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,.45) !important;
}

#dayModal .lp-modal-dialog.lp-cal-modal{
  position: relative !important;
  margin: 8vh auto !important;              /* baja el modal */
  width: min(980px, calc(100% - 24px)) !important;
  max-height: calc(100vh - 16vh) !important;/* evita que “apriete” */
  overflow: auto !important;

  background: var(--lp-surface) !important;
  border: 1px solid var(--lp-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--lp-shadow) !important;
}

@media (max-width: 640px){
  #dayModal .lp-modal-dialog.lp-cal-modal{
    margin: 10vh auto !important;
    max-height: calc(100vh - 20vh) !important;
  }
}


/* =========================================================
   CALENDARIO — Context menu: colores y items “limpios”
========================================================= */

#ctxMenu.lp-cal-ctx{
  background: transparent !important;
  z-index: 10000 !important;
}

#ctxMenu.lp-cal-ctx .lp-ctx__box{
  background: var(--lp-surface) !important;
  border: 1px solid var(--lp-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--lp-shadow-soft) !important;
  padding: 6px !important;
  min-width: 240px;
}

#ctxMenu.lp-cal-ctx .lp-ctx__item{
  appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  width: 100% !important;
  padding: 9px 10px !important;
  border-radius: 10px !important;

  color: var(--lp-text) !important;
  text-align: left !important;
  cursor: pointer !important;
}

#ctxMenu.lp-cal-ctx .lp-ctx__item:hover{
  background: var(--lp-chip-hover) !important;
}

#ctxMenu.lp-cal-ctx .lp-ctx__sep{
  height: 1px;
  background: var(--lp-border);
  margin: 6px 4px;
}

#ctxMenu.lp-cal-ctx .lp-ctx__danger{
  color: #ef4444 !important;
}

#ctxMenu.lp-cal-ctx .lp-ctx__danger:hover{
  background: rgba(239,68,68,.12) !important;
}
/* ===== MODAL "DETALLE DEL DÍA" — centrado + cómodo ===== */

/* contenedor modal */
#dayModal.lp-modal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
}

/* backdrop */
#dayModal .lp-modal-backdrop{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.45) !important;
}

/* diálogo centrado SIEMPRE (sin depender de margin) */
#dayModal .lp-modal-dialog.lp-cal-modal{
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: min(980px, calc(100vw - 24px)) !important;
  max-height: min(720px, calc(100vh - 120px)) !important;
  overflow: auto !important;

  background: var(--lp-surface) !important;
  border: 1px solid var(--lp-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--lp-shadow) !important;
  color: var(--lp-text) !important;
}

/* cabecera con aire */
#dayModal .lp-modal-head{
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--lp-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

/* cuerpo con padding cómodo */
#dayModal .lp-modal-body{
  padding: 14px 16px 16px !important;
}

/* cards de eventos con más separación */
#dayModalEvents{
  display: grid !important;
  gap: 10px !important;
}

#dayModalEvents .lp-cal-evcard{
  padding: 12px 12px !important;
}

/* acciones: que no se apelmacen */
#dayModalEvents .lp-cal-evcard-actions{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-end !important;
}

/* móvil: un poco más arriba para no tapar todo */
@media (max-width: 640px){
  #dayModal .lp-modal-dialog.lp-cal-modal{
    top: 52% !important;
    max-height: calc(100vh - 90px) !important;
  }
}
/* ===== Selector Mes / Año (header calendario) ===== */

.lp-cal-jump{
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 8px;
  background: var(--lp-surface);
  border: 1px solid var(--lp-border);
  border-radius: 14px;

  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}

/* Select mes */
.lp-cal-jump .lp-cal-select{
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--lp-border);
  background: var(--lp-surface-2);
  color: var(--lp-text);
  font-size: 13px;
}

/* Input año */
.lp-cal-jump .lp-cal-year{
  width: 90px;
  height: 36px;
  padding: 0 10px;
  text-align: center;

  border-radius: 10px;
  border: 1px solid var(--lp-border);
  background: var(--lp-surface-2);
  color: var(--lp-text);
  font-size: 13px;
}

/* Botón Ir */
.lp-cal-jump .lp-cal-gobtn{
  height: 36px;
  padding: 0 14px;

  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;

  background: var(--lp-accent);
  color: #fff;
  border: 0;
}

.lp-cal-jump .lp-cal-gobtn:hover{
  filter: brightness(1.05);
}

/* Modo oscuro: un poco más integrado */
html[data-theme="dark"] .lp-cal-jump{
  background: color-mix(in srgb, var(--lp-surface) 85%, transparent);
}
/* Mes actual grande encima del calendario */
.lp-cal-current-month{
  text-align: center;
  margin: 6px 0 14px 0;
}

.lp-cal-current-month span{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--lp-text);
}

/* En pantallas grandes, un poco más protagonista */
@media (min-width: 900px){
  .lp-cal-current-month span{
    font-size: 26px;
  }
}
/* ===== NOTAS (V1 estética) ===== */
.lp-notes-filterrow{ gap:12px; align-items:flex-end; }
.lp-notes-filteractions{ margin-left:auto; gap:10px; align-items:flex-end; }

.lp-notes-q{ width: 320px; max-width: 100%; }

.lp-notes-tablewrap{ overflow:auto; }
.lp-notes-title{ font-weight: 750; }
.lp-notes-titlecell{ vertical-align: top; }

.lp-notes-pagination{ margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--lp-border); }

.lp-notes-modal{
  max-width: 980px;
  width: min(980px, calc(100% - 24px));
  margin: 6vh auto;
}

.lp-notes-textarea{
  resize: vertical;
  min-height: 280px;
  font-family: inherit;
}

/* Móvil */
@media (max-width: 640px){
  .lp-notes-filteractions{ margin-left: 0; width: 100%; justify-content:flex-end; }
  .lp-notes-modal{ margin: 10vh auto; }
  .lp-notes-textarea{ min-height: 240px; }
}
/* ===== NOTAS: ajustes V1 ===== */

/* Botones Filtrar/Limpiar iguales */
.lp-notes-filteractions .lp-btn{ min-height: 38px; }

/* Título clicable (ver nota) */
.lp-notes-titlelink{
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--lp-text);
  font-weight: 750;
  cursor: pointer;
  text-align: left;
}
.lp-notes-titlelink:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Fondo del “creador/editor” dentro del modal */
.lp-notes-modalbody{
  background: color-mix(in srgb, var(--lp-surface) 92%, transparent);
  border: 1px solid var(--lp-border);
  border-radius: 14px;
  padding: 14px;
}

/* Caja de lectura */
.lp-notes-viewbox{
  background: color-mix(in srgb, var(--lp-surface) 92%, transparent);
  border: 1px solid var(--lp-border);
  border-radius: 14px;
  padding: 14px;
  white-space: pre-wrap;       /* respeta saltos */
  line-height: 1.45;
  min-height: 280px;
}

/* Textarea */
.lp-notes-textarea{
  resize: vertical;
  min-height: 320px;
  font-family: inherit;
}

/* Mobile */
@media (max-width: 640px){
  .lp-notes-textarea{ min-height: 240px; }
  .lp-notes-viewbox{ min-height: 240px; }
}
/* ===== MODAL VER NOTA: botón Cerrar ===== */

.lp-notes-viewmodal .lp-modal-head{
  display: flex;
  align-items: center;
  justify-content: space-between; /* título a la izquierda, cerrar a la derecha */
  gap: 12px;
}

/* Botón cerrar más visible */
.lp-notes-viewmodal .lp-modal-head .lp-btn{
  min-height: 36px;
  padding: 0 14px;
  font-size: 14px;
  border-radius: 10px;
}
.lp-tablewrap{ overflow:auto; }
.lp-table{
  width:100%;
  border-collapse: collapse;
}
.lp-table th, .lp-table td{
  padding: 10px 12px;
  border-top: 1px solid var(--lp-border, rgba(255,255,255,.12));
  text-align: left;
  vertical-align: middle;
}
.lp-table thead th{
  color: var(--lp-muted, rgba(255,255,255,.65));
  font-weight: 800;
  font-size: 12px;
  border-top: 0;
}
/* Separación ya la damos con gap inline, pero esto ayuda si lo reutilizas */
.lp-stack{ display:flex; flex-direction:column; }

/* ===== SWITCH PERFIL (V1 FINAL — azul, visible y alineado) ===== */
.lp-switch{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  cursor:pointer;
  user-select:none;
}

/* El checkbox ES el switch (forzamos visibilidad) */
.lp-switch input[type="checkbox"]{
  -webkit-appearance:none;
  appearance:none;

  width:44px;
  height:24px;
  min-width:44px;

  border-radius:999px;
  background: rgba(148,163,184,.25);
  border: 1px solid var(--lp-border);

  position:relative;
  display:inline-block;
  visibility:visible;
  opacity:1;

  cursor:pointer;
  transition: background .18s ease, border-color .18s ease;
  box-sizing:border-box;
  margin:0;
  padding:0;

  flex-shrink:0;
}

/* Thumb */
.lp-switch input[type="checkbox"]::after{
  content:"";
  position:absolute;
  top:2px;
  left:2px;

  width:18px;
  height:18px;
  border-radius:50%;

  background: var(--lp-surface);
  box-shadow: 0 4px 10px rgba(0,0,0,.35);

  transition: transform .18s ease;
}

/* ON — AZUL */
.lp-switch input[type="checkbox"]:checked{
  background: var(--lp-accent);
  border-color: var(--lp-accent);
}

.lp-switch input[type="checkbox"]:checked::after{
  transform: translateX(20px);
}

/* Texto */
.lp-switch .lp-switch-text{
  color: var(--lp-text);
  font-weight:600;
  line-height:1;
}
/* ===== ADMIN GRID (V1) ===== */
.lp-admin-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}

@media (max-width: 720px){
  .lp-admin-grid{ grid-template-columns: 1fr; }
}

.lp-admin-tile{
  display:block;
  text-decoration:none;
  padding:14px 14px;
  border-radius:16px;
  border:1px solid var(--lp-border);
  background: color-mix(in srgb, var(--lp-surface) 92%, transparent);
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  transition: transform .12s ease, border-color .15s ease, background .15s ease;
}

.lp-admin-tile:hover{
  transform: translateY(-1px);
  border-color: var(--lp-border-2);
  background: color-mix(in srgb, var(--lp-surface) 86%, transparent);
}

.lp-admin-tile-title{
  color: var(--lp-text);
  font-weight: 800;
  letter-spacing: .01em;
  margin-bottom: 4px;
}

.lp-admin-tile.is-disabled{
  opacity:.55;
  pointer-events:none;
}
/* ===== ADMIN USERS (V1) ===== */
.lp-admin-userform{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
  max-width: 920px;
}
.lp-admin-userform .lp-row{ grid-column: 1 / -1; }
@media (max-width: 820px){
  .lp-admin-userform{ grid-template-columns: 1fr; }
}

.lp-admin-tablewrap{
  width:100%;
  overflow:auto;
  border-radius: 14px;
  border: 1px solid var(--lp-border);
}

.lp-admin-table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 920px;
  background: transparent;
}

.lp-admin-table thead th{
  text-align:left;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--lp-muted);
  padding: 12px 12px;
  border-bottom: 1px solid var(--lp-border);
  background: color-mix(in srgb, var(--lp-surface) 88%, transparent);
  position: sticky;
  top: 0;
  z-index: 1;
}

.lp-admin-table tbody td{
  padding: 12px 12px;
  border-bottom: 1px solid var(--lp-border);
  color: var(--lp-text);
  vertical-align: top;
}

.lp-admin-strong{ font-weight: 800; }
.lp-admin-ellipsis{
  max-width: 360px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-admin-actions{
  display:flex;
  flex-wrap: wrap;
  gap:8px;
  align-items:center;
}

.lp-admin-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--lp-border);
  font-size: 12px;
  font-weight: 750;
  min-width: 58px;
}
.lp-admin-pill.is-on{
  border-color: color-mix(in srgb, var(--lp-accent) 45%, var(--lp-border));
  background: color-mix(in srgb, var(--lp-accent) 12%, transparent);
}
.lp-admin-pill.is-off{
  opacity: .75;
}

.lp-admin-danger{
  border-color: rgba(239,68,68,.35) !important;
  background: rgba(239,68,68,.10) !important;
}
.lp-admin-danger:hover{
  border-color: rgba(239,68,68,.55) !important;
  background: rgba(239,68,68,.14) !important;
}

.lp-admin-modal{
  max-width: 980px !important;
  width: min(980px, calc(100% - 24px)) !important;
}
/* =========================================================
   POST-ITS BOARDS PAGE
========================================================= */

.lp-postits-boards-page{
  gap: 18px;
}

.lp-postits-boards-head{
  align-items: center;
}

.lp-postits-boards-head-actions{
  margin-left: auto;
}

.lp-postits-boards-create,
.lp-postits-boards-list{
  background: color-mix(in srgb, var(--card) 96%, transparent);
}

.lp-postits-board-create{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.lp-postits-board-create-actions{
  display: flex;
  align-items: end;
}

.lp-postits-boards-table{
  width: 100%;
}

.lp-postits-boards-table th:nth-child(2),
.lp-postits-boards-table td:nth-child(2){
  width: 140px;
}

.lp-postits-boards-table th:nth-child(3),
.lp-postits-boards-table td:nth-child(3){
  width: 120px;
}

.lp-postits-boards-table th:last-child,
.lp-postits-boards-table td:last-child{
  width: 520px;
}

.lp-postits-board-name strong{
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.lp-postits-board-type{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.lp-postits-board-type.is-own{
  background: rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.25);
  color: var(--primary);
}

.lp-postits-board-type.is-shared{
  background: rgba(148,163,184,.10);
  border-color: var(--border);
  color: var(--muted);
}

.lp-postits-board-actions-cell{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.lp-postits-board-renameform,
.lp-postits-board-deleteform{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.lp-postits-board-renameform{
  flex-wrap: wrap;
}

.lp-postits-board-renameinput{
  width: 220px;
  min-width: 220px;
}

.lp-postits-board-actions-cell .lp-btn{
  white-space: nowrap;
}

@media (max-width: 980px){
  .lp-postits-board-create{
    grid-template-columns: 1fr;
  }

  .lp-postits-board-create-actions{
    justify-content: flex-start;
  }

  .lp-postits-boards-table th:last-child,
  .lp-postits-boards-table td:last-child{
    width: auto;
  }
}

@media (max-width: 720px){
  .lp-postits-boards-head{
    align-items: flex-start;
  }

  .lp-postits-board-actions-cell{
    align-items: flex-start;
  }

  .lp-postits-board-renameform{
    width: 100%;
  }

  .lp-postits-board-renameinput{
    width: 100%;
    min-width: 0;
  }
}
/* =========================================================
   DASHBOARD MOBILE FIX
========================================================= */

@media (max-width: 720px){

  .lp-weekbar{
    gap: 10px;
    align-items: center;
  }

  .lp-weekbar .lp-btn{
    min-width: 42px;
    padding: 8px 12px;
  }

  .lp-weektitle{
    width: 100%;
    order: 10;
    font-weight: 900;
  }

  .lp-weekhint{
    width: 100%;
    order: 11;
    margin-left: 0 !important;
  }

  /* Próximos 14 días + Actividad reciente */
  .lp-upcoming{
    gap: 10px;
  }

  .lp-item{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: start;
    padding: 14px;
  }

  .lp-item-date{
    min-width: 0;
    font-size: 13px;
    font-weight: 900;
    color: var(--primary);
  }

  .lp-item-label{
    min-width: 0;
    font-size: 13px;
    font-weight: 800;
    color: var(--muted);
  }

  .lp-item-title{
    min-width: 0;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.2;
    word-break: break-word;
  }

  .lp-item-extra{
    min-width: 0;
    font-size: 13px;
    color: var(--muted);
    word-break: break-word;
  }

  /* Filtro próximos 14 días */
  .lp-between{
    align-items: flex-start;
  }

  .lp-between form.lp-row{
    width: 100%;
    margin-left: 0 !important;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .lp-between form.lp-row .lp-select{
    min-width: 160px;
  }
}