/* Colibrist - estilos compartidos (light + dark) */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ============ tema claro (default) ============ */
:root {
   --bg:          #f7f8fa;
   --bg-2:        #ffffff;
   --panel:       #ffffff;
   --sidebar:     #1f2937;
   --sidebar-2:   #111827;
   --sidebar-bd:  #374151;
   --sidebar-mut: #9ca3af;
   --sidebar-it:  #d1d5db;
   --sidebar-hov: #374151;
   --text:        #1f2937;
   --text-soft:   #6b7280;
   --text-light:  #9ca3af;
   --line:        #e5e7eb;
   --line-2:      #f3f4f6;
   --accent:      #6366f1;
   --accent-h:    #4f46e5;
   --accent-soft: #eef2ff;

   --pri-a1:      #dc2626;
   --pri-a2:      #ea580c;
   --pri-a3:      #d97706;
   --pri-b:       #2563eb;
   --pri-c:       #6b7280;
   --pri-d:       #8b5cf6;
   --pri-e:       #9ca3af;

   --ok:          #10b981;
   --warn:        #f59e0b;
   --danger:      #ef4444;

   --frog-bg-1:   #fef3c7;
   --frog-bg-2:   #fde68a;
   --frog-text:   #1f2937;
   --frog-label:  #92400e;

   --tip-bg:      #fffbeb;
   --tip-bd:      #f59e0b;
   --tip-text:    #78350f;
   --tip-title:   #92400e;

   --info-bg:     #eef2ff;
   --info-bd:     #6366f1;
   --info-text:   #3730a3;
   --info-title:  #4338ca;

   --radius:      10px;
   --shadow:      0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
   --shadow-h:    0 4px 12px rgba(0,0,0,.08);

   /* color de la linea de jerarquia entre tarea padre y subtareas (50% accent) */
   --subtask-line: rgba(99, 102, 241, .55);

   /* divisor horizontal entre tareas en una lista (mas visible que --line) */
   --task-divider: rgba(0, 0, 0, .16);
}

/* ============ tema oscuro ============ */
[data-theme="dark"] {
   --bg:          #0f172a;
   --bg-2:        #1e293b;
   --panel:       #1e293b;
   --sidebar:     #0b1220;
   --sidebar-2:   #050810;
   --sidebar-bd:  #1f2a3d;
   --sidebar-mut: #64748b;
   --sidebar-it:  #cbd5e1;
   --sidebar-hov: #1f2a3d;
   --text:        #e5e7eb;
   --text-soft:   #94a3b8;
   --text-light:  #64748b;
   --line:        #334155;
   --line-2:      #1e293b;
   --accent:      #818cf8;
   --accent-h:    #a5b4fc;
   --accent-soft: #312e81;

   --pri-a1:      #ef4444;
   --pri-a2:      #f97316;
   --pri-a3:      #f59e0b;
   --pri-b:       #3b82f6;
   --pri-c:       #94a3b8;
   --pri-d:       #a78bfa;
   --pri-e:       #64748b;

   --frog-bg-1:   #422006;
   --frog-bg-2:   #78350f;
   --frog-text:   #fef3c7;
   --frog-label:  #fbbf24;

   --tip-bg:      #1c1917;
   --tip-bd:      #f59e0b;
   --tip-text:    #fde68a;
   --tip-title:   #fbbf24;

   --info-bg:     #1e1b4b;
   --info-bd:     #818cf8;
   --info-text:   #c7d2fe;
   --info-title:  #a5b4fc;

   --shadow:      0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
   --shadow-h:    0 4px 12px rgba(0,0,0,.5);

   /* en oscuro usamos el accent claro al 60% para que la linea se note bien */
   --subtask-line: rgba(129, 140, 248, .6);

   /* divisor horizontal entre tareas (claro al 18% para verse sobre fondo oscuro) */
   --task-divider: rgba(255, 255, 255, .18);
}

body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   color: var(--text);
   background: var(--bg);
   font-size: 14px;
   line-height: 1.5;
   transition: background .2s, color .2s;
}

.app {
   display: grid;
   grid-template-columns: 240px 1fr;
   min-height: 100vh;
}

/* ===== SIDEBAR ===== */
.sidebar {
   background: var(--sidebar);
   color: #fff;
   padding: 20px 0;
   display: flex;
   flex-direction: column;
   transition: background .2s;
}
.sidebar .brand {
   padding: 0 20px 20px;
   border-bottom: 1px solid var(--sidebar-bd);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
}
.sidebar .brand h1 {
   font-size: 22px;
   font-weight: 700;
   letter-spacing: -.3px;
   text-align: center;
}
.sidebar .brand .logo {
   width: 110px; height: 110px;
   border-radius: 14px;
   object-fit: contain;
   display: block;
}
.sidebar .group {
   padding: 16px 12px 8px;
}
.sidebar .group-title {
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: .8px;
   color: var(--sidebar-mut);
   padding: 0 8px 8px;
   font-weight: 600;
}
.sidebar a.item {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 8px 12px;
   border-radius: 6px;
   color: var(--sidebar-it);
   text-decoration: none;
   font-size: 14px;
   margin-bottom: 2px;
}
.sidebar a.item:hover {
   background: var(--sidebar-hov);
   color: #fff;
}
.sidebar a.item.active {
   background: var(--accent);
   color: #fff;
}
.sidebar a.item .ico {
   font-size: 16px; width: 20px; text-align: center;
}
.sidebar a.item .count {
   margin-left: auto;
   font-size: 11px;
   background: rgba(255,255,255,.12);
   padding: 2px 7px;
   border-radius: 10px;
}
.sidebar a.item.active .count { background: rgba(255,255,255,.2); }

.sidebar .footer {
   margin-top: auto;
   padding: 16px 20px;
   border-top: 1px solid var(--sidebar-bd);
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 12px;
   color: var(--sidebar-mut);
}
.theme-toggle {
   background: rgba(255,255,255,.08);
   border: none;
   color: #fff;
   width: 32px; height: 32px;
   border-radius: 8px;
   cursor: pointer;
   font-size: 14px;
   transition: background .2s;
}
.theme-toggle:hover { background: rgba(255,255,255,.18); }

/* ===== MAIN ===== */
.main {
   padding: 24px 32px;
   overflow-y: auto;
}
.main header.top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 20px;
}
.main header.top h2 {
   font-size: 24px;
   font-weight: 700;
   letter-spacing: -.5px;
}
.main header.top .sub {
   color: var(--text-soft);
   font-size: 13px;
   margin-top: 2px;
}
.btn {
   border: none;
   background: var(--accent);
   color: #fff;
   padding: 8px 14px;
   border-radius: 8px;
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   transition: background .15s;
}
.btn:hover { background: var(--accent-h); }
.btn.ghost {
   background: transparent;
   color: var(--text-soft);
   border: 1px solid var(--line);
}
.btn.ghost:hover { background: var(--bg-2); color: var(--text); }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn.ghost.danger {
   color: var(--danger);
   border-color: rgba(239,68,68,.45);
   background: transparent;
}
.btn.ghost.danger:hover {
   background: var(--danger);
   border-color: var(--danger);
   color: #fff;
}
[data-theme="dark"] .btn.ghost.danger {
   border-color: rgba(239,68,68,.55);
}
[data-theme="dark"] .btn.ghost.danger:hover {
   background: var(--danger);
   color: #fff;
}
.btn.danger {
   background: var(--danger);
}
.btn.danger:hover {
   background: #dc2626;
}

/* modal de confirmacion (reemplaza window.confirm y window.alert) */
.modal.modal-confirm {
   width: 420px;
}
.modal-confirm .confirm-body {
   font-size: 14px;
   line-height: 1.55;
   color: var(--text);
   white-space: pre-line;
   margin-bottom: 16px;
   padding-bottom: 4px;
}
/* tono informativo: titulo accent (info) en lugar del estilo neutro de confirm */
.modal.modal-confirm.is-info h3 {
   color: var(--accent);
   display: flex;
   align-items: center;
   gap: 8px;
}
.modal.modal-confirm.is-info h3::before {
   content: "ⓘ";
   font-size: 20px;
   line-height: 1;
}

/* acciones a la derecha en cabecera de space.php */
.main header.top .space-header-actions {
   display: flex;
   gap: 8px;
   align-items: center;
   flex-shrink: 0;
}

/* ===== CARDS ===== */
.card {
   background: var(--panel);
   border-radius: var(--radius);
   box-shadow: var(--shadow);
   padding: 20px;
   margin-bottom: 16px;
   transition: background .2s, box-shadow .2s;
}
.card h3 {
   font-size: 15px;
   font-weight: 600;
   margin-bottom: 12px;
   display: flex;
   align-items: center;
   gap: 8px;
   color: var(--text);
}
.card h3 .badge {
   font-size: 10px;
   padding: 2px 8px;
   border-radius: 10px;
   background: var(--bg);
   color: var(--text-soft);
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: .5px;
}
.card .section-desc {
   font-size: 12px;
   color: var(--text-soft);
   margin: -6px 0 14px;
   padding-bottom: 12px;
   border-bottom: 1px dashed var(--line);
   line-height: 1.55;
}

/* ===== TASKS ===== */
.task {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 10px 12px;
   border-radius: 8px;
   transition: background .15s;
}
.task:hover { background: var(--bg); }

/* divisor horizontal entre tareas en una lista vertical (top-level y subtareas).
   Se aplica a todas excepto la primera para que la lista quede claramente
   separada en filas. */
.task-list > .task ~ .task,
.subtask-list > .task ~ .task {
   border-top: 1px solid var(--task-divider);
}

.task .check {
   width: 20px; height: 20px;
   border: 2px solid var(--text-light);
   border-radius: 5px;
   cursor: pointer;
   flex-shrink: 0;
   display: grid;
   place-items: center;
   transition: all .2s;
   background: transparent;
}
.task .check:hover { border-color: var(--accent); }
.task.done .check {
   background: var(--ok);
   border-color: var(--ok);
   color: #fff;
   font-size: 12px;
}
.task.done .check::after { content: "✓"; }
.task.done .title {
   text-decoration: line-through;
   color: var(--text-light);
}

.task .pri {
   font-size: 10px;
   font-weight: 700;
   padding: 3px 7px;
   border-radius: 4px;
   color: #fff;
   min-width: 26px;
   text-align: center;
}
.pri-a1 { background: var(--pri-a1); }
.pri-a2 { background: var(--pri-a2); }
.pri-a3 { background: var(--pri-a3); }
.pri-b  { background: var(--pri-b); }
.pri-c  { background: var(--pri-c); }
.pri-d  { background: var(--pri-d); }
.pri-e  { background: var(--pri-e); }

/* banderas de color para Quick */
.flag {
   display: inline-block;
   width: 14px; height: 14px;
   border-radius: 3px;
   cursor: pointer;
   flex-shrink: 0;
   border: 1px solid rgba(0,0,0,.1);
   transition: transform .12s;
}
.flag:hover { transform: scale(1.15); }
.flag-red    { background: #ef4444; }
.flag-orange { background: #f97316; }
.flag-yellow { background: #eab308; }
.flag-blue   { background: #3b82f6; }
.flag-gray   { background: #9ca3af; }
.flag-none   {
   background: transparent;
   border: 1.5px dashed var(--text-light);
}

.flag-picker {
   display: inline-flex;
   gap: 6px;
   padding: 6px 10px;
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: 8px;
   box-shadow: var(--shadow);
   position: absolute;
   z-index: 100;
}
.flag-picker .flag.selected {
   outline: 2px solid var(--accent);
   outline-offset: 1px;
}

/* fechas - badge en la tarea */
.date-badge {
   font-size: 11px;
   color: var(--text-soft);
   background: var(--bg);
   padding: 2px 8px;
   border-radius: 10px;
   display: inline-flex;
   align-items: center;
   gap: 4px;
   white-space: nowrap;
}
.date-badge.overdue {
   color: var(--danger);
   background: rgba(239,68,68,.1);
}

/* subtareas: indent + linea de jerarquia (indent calculado para que la subtarea
   quede visualmente despues del check del padre, no antes) */
.subtask-list {
   margin-left: 56px;
   border-left: 3px solid var(--subtask-line);
   padding-left: 14px;
   margin-top: 4px;
   margin-bottom: 4px;
   position: relative;
}
.subtask-list .task {
   font-size: 13px;
   padding: 6px 10px;
   position: relative;
}
.subtask-list .task .check {
   width: 16px; height: 16px;
}
/* conector horizontal estilo arbol: linea de la barra vertical hacia el check
   de cada subtarea, para que se vea claro que cuelgan del padre */
.subtask-list .task::before {
   content: '';
   position: absolute;
   left: -14px;
   top: 50%;
   width: 12px;
   height: 3px;
   background: var(--subtask-line);
   border-radius: 0 2px 2px 0;
}
.subtask-add {
   font-size: 11px;
   padding: 6px 10px;
   color: var(--text-light);
   cursor: pointer;
   margin-left: 60px;
}
.subtask-add:hover { color: var(--accent); }

/* alinear input de subtarea con el resto del subtask-list */
.subtask-input-wrap .add-task-input {
   margin-left: 56px !important;
   width: calc(100% - 56px) !important;
}

/* toggle de subtareas en la tarea padre — caret estilo arbol de carpetas
   posicionado a la izquierda del check; solo se renderiza cuando hay subtareas */
.task .subtask-toggle {
   background: var(--accent-soft);
   border: 1px solid transparent;
   color: var(--accent);
   cursor: pointer;
   font-size: 11px;
   font-weight: 600;
   padding: 2px 6px;
   border-radius: 6px;
   display: inline-flex;
   align-items: center;
   gap: 3px;
   user-select: none;
   transition: background .12s, color .12s, border-color .12s;
   line-height: 1;
   flex-shrink: 0;
}
.task .subtask-toggle:hover {
   background: var(--accent);
   color: #fff;
   border-color: var(--accent);
}
/* placeholder cuando no hay subtareas: mantiene la alineacion vertical de toda
   la columna. Es un span (no button) sin hover, pintado como deshabilitado. */
.task .subtask-toggle.is-empty {
   background: var(--bg-2);
   color: var(--text-light);
   opacity: .55;
   cursor: default;
}
.task .subtask-toggle.is-empty:hover {
   background: var(--bg-2);
   color: var(--text-light);
   border-color: transparent;
}
.task .subtask-toggle .caret {
   font-size: 11px;
   transition: transform .15s;
   display: inline-block;
}
.task .subtask-toggle .cnt {
   font-variant-numeric: tabular-nums;
}
.task.subtasks-collapsed .subtask-toggle .caret {
   transform: rotate(-90deg);
}
.task.subtasks-collapsed + .subtask-list {
   display: none;
}
.task.subtasks-collapsed + .subtask-list + .subtask-input-wrap {
   /* si la lista esta colapsada, tambien escondemos el input de "agregar subtarea" */
   display: none !important;
}

/* edicion inline */
.editable {
   cursor: text;
   padding: 2px 6px;
   margin: -2px -6px;
   border-radius: 4px;
   transition: background .12s;
}
.editable:hover { background: var(--bg); }
.editable:hover::after {
   content: " ✏";
   font-size: 10px;
   opacity: .5;
}
.title-input {
   font: inherit;
   color: var(--text);
   background: var(--bg);
   border: 1px solid var(--accent);
   border-radius: 4px;
   padding: 2px 6px;
   margin: -2px -6px;
   width: 100%;
   max-width: 600px;
   outline: none;
}

/* filter bar */
.filter-bar {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   align-items: center;
   background: var(--panel);
   padding: 12px;
   border-radius: var(--radius);
   margin-bottom: 16px;
   box-shadow: var(--shadow);
}
.filter-bar .input { width: auto; flex: 0 1 auto; padding: 6px 10px; font-size: 13px; }
.filter-bar .input.search { flex: 1; min-width: 180px; }
.filter-bar label {
   font-size: 11px;
   color: var(--text-soft);
   text-transform: uppercase;
   letter-spacing: .5px;
   font-weight: 600;
}

/* detalle / panel lateral - para fechas y notas (modal-like) */
.task-detail-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0,0,0,.4);
   display: none;
   z-index: 200;
}
.task-detail-overlay.open { display: block; }
.task-detail {
   position: fixed;
   top: 0; right: 0; bottom: 0;
   width: 400px;
   background: var(--panel);
   box-shadow: -4px 0 16px rgba(0,0,0,.15);
   padding: 24px;
   overflow-y: auto;
   transform: translateX(100%);
   transition: transform .25s ease;
   z-index: 201;
}
.task-detail.open { transform: translateX(0); }
.task-detail h3 { margin-bottom: 16px; font-size: 16px; }
.task-detail .field { margin-bottom: 16px; }
.task-detail .field label {
   display: block;
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: .5px;
   color: var(--text-soft);
   font-weight: 600;
   margin-bottom: 6px;
}
.task-detail textarea.input {
   min-height: 80px;
   resize: vertical;
   font-family: inherit;
}
.task-detail .close-btn {
   position: absolute;
   top: 16px; right: 16px;
   background: transparent;
   border: none;
   font-size: 22px;
   cursor: pointer;
   color: var(--text-soft);
}

.task .title {
   flex: 1 1 auto;
   min-width: 0;
   font-size: 14px;
   color: var(--text);
   /* fix: el wrap respeta el contenedor; antes la 2a linea se desbordaba en
      flex porque min-width:auto impedia que el .title se redujera bajo su
      contenido. Con min-width:0 + word-break, hace wrap dentro del ancho. */
   word-break: break-word;
   overflow-wrap: anywhere;
}
/* cuando hay preview de notas, el titulo no estira: deja espacio para el preview */
.task.has-notes .title { flex: 0 1 auto; }

/* preview inline de notas: una linea, ellipsis, atenuado como tarea completada.
   Se usa en task-list (.task), cyclic-row, proj-task del dashboard y pri-task. */
.notes-preview {
   flex: 1 1 0;
   min-width: 0;
   max-width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--text-light);
   font-size: 12px;
   font-style: italic;
}
.notes-preview::before {
   content: '— ';
   opacity: .6;
   font-style: normal;
}

/* contenedor flex en cyclic-meta para que titulo + notes-preview compartan
   la primera linea sin alterar la altura del row. */
.cyclic-title-line {
   display: flex;
   align-items: baseline;
   gap: 8px;
   min-width: 0;
}
.cyclic-title-line > .cyclic-title {
   flex: 0 1 auto;
   min-width: 0;
   word-break: break-word;
}

/* listados compactos del dashboard (proj-task / pri-task): cuando la fila tiene
   nota, el titulo deja de estirarse para que el preview ocupe el espacio
   sobrante; sin nota, el titulo conserva su flex:1 original. */
.proj-task.has-notes .proj-task-title { flex: 0 1 auto; }
.pri-task.has-notes  .pri-task-title  { flex: 0 1 auto; }
.task .meta {
   font-size: 11px;
   color: var(--text-light);
}
.task .actions,
.cyclic-row .actions {
   display: none;
   gap: 4px;
}
.task:hover .actions,
.cyclic-row:hover .actions { display: inline-flex; }
.task .icon-btn,
.cyclic-row .icon-btn,
.users-table .icon-btn {
   background: transparent;
   border: none;
   color: var(--text-light);
   cursor: pointer;
   font-size: 14px;
   width: 24px; height: 24px;
   border-radius: 4px;
   /* inline-grid: el contenido se centra (place-items) y el boton se queda
      inline aunque su contenedor no sea flex (caso de .users-table .col-actions). */
   display: inline-grid; place-items: center;
   vertical-align: middle;
}
.task .icon-btn:hover,
.cyclic-row .icon-btn:hover,
.users-table .icon-btn:hover { background: var(--bg); color: var(--text); }
.task .icon-btn.danger:hover,
.cyclic-row .icon-btn.danger:hover,
.users-table .icon-btn.danger:hover { color: var(--danger); }

/* hero - eat the frog */
.frog-hero {
   background: linear-gradient(135deg, var(--frog-bg-1) 0%, var(--frog-bg-2) 100%);
   border-radius: var(--radius);
   padding: 20px 24px;
   margin-bottom: 20px;
   border-left: 4px solid var(--pri-a1);
   display: flex;
   align-items: center;
   gap: 16px;
}
.frog-hero .frog {
   font-size: 40px;
}
.frog-hero h3 {
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: var(--frog-label);
   margin-bottom: 4px;
}
.frog-hero .frog-task {
   font-size: 18px;
   font-weight: 600;
   color: var(--frog-text);
}

/* stats */
.stats {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 12px;
   margin-bottom: 20px;
}
.stat {
   background: var(--panel);
   border-radius: var(--radius);
   padding: 16px;
   box-shadow: var(--shadow);
}
.stat .label {
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: .5px;
   color: var(--text-soft);
   margin-bottom: 6px;
}
.stat .val { font-size: 26px; font-weight: 700; color: var(--text); }
.stat .val.ok    { color: var(--ok); }
.stat .val.warn  { color: var(--warn); }

/* historial table */
.hist-row {
   display: grid;
   grid-template-columns: 130px 1fr 140px 110px;
   align-items: center;
   gap: 12px;
   padding: 10px 12px;
   border-bottom: 1px solid var(--line-2);
}
.hist-row:last-child { border-bottom: none; }
.hist-row .when {
   font-size: 12px;
   color: var(--text-soft);
}
.hist-row .what {
   font-size: 14px;
   text-decoration: line-through;
   color: var(--text-light);
}
.hist-row .where {
   font-size: 12px;
   padding: 3px 8px;
   border-radius: 10px;
   background: var(--bg);
   color: var(--text-soft);
   text-align: center;
}

.tab-bar {
   display: flex;
   gap: 4px;
   border-bottom: 1px solid var(--line);
   margin-bottom: 20px;
}
.tab {
   padding: 10px 16px;
   font-size: 13px;
   color: var(--text-soft);
   cursor: pointer;
   border-bottom: 2px solid transparent;
   margin-bottom: -1px;
   text-decoration: none;
}
.tab.active {
   color: var(--accent);
   border-bottom-color: var(--accent);
   font-weight: 600;
}
.tab:hover:not(.active) { color: var(--text); }

/* info / explicacion boxes (colapsable) */
.info-box {
   background: var(--info-bg);
   border-left: 3px solid var(--info-bd);
   color: var(--info-text);
   border-radius: var(--radius);
   padding: 16px 20px;
   margin-bottom: 20px;
   font-size: 13px;
   line-height: 1.6;
   position: relative;
}
.info-box h4 {
   color: var(--info-title);
   font-size: 13px;
   font-weight: 700;
   margin-bottom: 6px;
   display: flex; align-items: center; gap: 6px;
   cursor: pointer;
   user-select: none;
}
.info-box h4::after {
   content: "▾";
   margin-left: auto;
   font-size: 11px;
   opacity: .6;
   transition: transform .2s;
}
.info-box.collapsed h4::after { transform: rotate(-90deg); }
.info-box.collapsed h4 { margin-bottom: 0; }
.info-box .info-body {
   max-height: 1000px;
   overflow: hidden;
   transition: max-height .25s ease, opacity .2s, margin .2s;
   opacity: 1;
}
.info-box.collapsed .info-body {
   max-height: 0;
   opacity: 0;
   margin-top: 0;
}
.info-box ul { margin: 6px 0 0 18px; }
.info-box li { margin-bottom: 3px; }
.info-box strong { color: var(--info-title); }

.tip-box {
   background: var(--tip-bg);
   border-left: 3px solid var(--tip-bd);
   color: var(--tip-text);
   border-radius: var(--radius);
   padding: 14px 18px;
   margin-bottom: 16px;
   font-size: 13px;
}
.tip-box h4 {
   color: var(--tip-title);
   font-size: 12px;
   font-weight: 700;
   margin-bottom: 4px;
   text-transform: uppercase;
   letter-spacing: .5px;
}

/* form inputs */
.input {
   width: 100%;
   padding: 10px 14px;
   border: 1px solid var(--line);
   border-radius: 8px;
   font-size: 14px;
   font-family: inherit;
   background: var(--panel);
   color: var(--text);
   transition: border .15s;
}
.input:focus {
   outline: none;
   border-color: var(--accent);
}
.input-row {
   display: flex; gap: 8px; margin-top: 12px;
}
select.input {
   cursor: pointer;
}

/* sidebar - fila de espacio con acciones de hover */
.sidebar .space-row {
   position: relative;
   display: flex;
   align-items: stretch;
}
.sidebar .space-row > a.item,
.sidebar .space-row > .item.space-parent {
   /* dejamos espacio a la derecha para que las acciones no encimen el texto del nombre */
   padding-right: 12px;
   flex: 1;
   min-width: 0;
}

/* handle de arrastre para reordenar proyectos Quick (visible en hover) */
.sidebar .space-drag-handle {
   width: 14px;
   color: rgba(255,255,255,.4);
   font-size: 12px;
   letter-spacing: -3px;
   line-height: 1;
   user-select: none;
   cursor: grab;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   opacity: 0;
   transition: opacity .12s, color .12s;
}
.sidebar .space-row:hover .space-drag-handle,
.sidebar .space-group:hover > .space-row > .space-drag-handle {
   opacity: 1;
}
.sidebar .space-drag-handle:hover {
   color: #fff;
}
.sidebar [data-space-id]:active .space-drag-handle {
   cursor: grabbing;
}

/* indicadores visuales durante el drag */
.sidebar [data-space-id].dragging {
   opacity: .35;
}
.sidebar [data-space-id].drop-before {
   box-shadow: inset 0 2px 0 var(--accent);
}
.sidebar .space-row .space-name {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.sidebar .space-row-actions {
   position: absolute;
   right: 6px;
   top: 50%;
   transform: translateY(-50%);
   display: none;
   gap: 2px;
   z-index: 2;
}
.sidebar .space-row:hover .space-row-actions {
   display: inline-flex;
}
/* al hover ocultamos el contador para que no choque con los botones */
.sidebar .space-row:hover .count {
   visibility: hidden;
}
.sidebar .row-act {
   background: rgba(255,255,255,.08);
   border: none;
   color: var(--sidebar-it);
   width: 22px; height: 22px;
   border-radius: 5px;
   font-size: 12px;
   line-height: 1;
   cursor: pointer;
   display: grid;
   place-items: center;
   padding: 0;
   transition: background .12s, color .12s, transform .12s;
}
.sidebar .row-act:hover {
   background: rgba(255,255,255,.18);
   color: #fff;
   transform: scale(1.06);
}
.sidebar .row-act.danger:hover {
   background: rgba(239,68,68,.25);
   color: #fecaca;
}
.sidebar .row-act.is-disabled {
   opacity: .35;
   cursor: not-allowed;
}
.sidebar .row-act.is-disabled:hover {
   background: rgba(255,255,255,.08);
   color: var(--sidebar-it);
   transform: none;
}

/* sidebar - grupo de proyecto padre (Quick) */
.sidebar .space-group { margin-bottom: 2px; }
.sidebar .space-parent {
   font-weight: 500;
}
/* caret aparte del link, asi el row se navega al padre y el caret colapsa */
.sidebar .space-caret {
   background: transparent;
   border: none;
   color: var(--sidebar-it);
   font-size: 10px;
   line-height: 1;
   width: 16px;
   /* sin height fijo: que stretch del row marque la altura, asi queda parejo con el link */
   align-self: stretch;
   padding: 0;
   margin-right: 2px;
   opacity: .7;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: transform .15s, opacity .12s, color .12s;
   flex-shrink: 0;
}
.sidebar .space-caret:hover { opacity: 1; color: #fff; }
.sidebar .space-group.collapsed .space-caret { transform: rotate(-90deg); }

/* leaves Quick top-level: alinear el icono con el de los padres,
   que tienen un caret de 16+2=18px adelante del link */
.sidebar .quick-top-list > .space-row > a.item {
   margin-left: 18px;
}
.sidebar .space-children {
   display: block;
   padding-left: 12px;
   border-left: 1px solid var(--sidebar-bd);
   margin-left: 14px;
   margin-top: 2px;
}
.sidebar .space-group.collapsed .space-children { display: none; }
.sidebar a.item.child {
   font-size: 13px;
   padding: 6px 10px;
}
.sidebar a.item.item-add {
   color: var(--sidebar-mut);
   font-style: italic;
}
.sidebar .space-parent-name { flex: 1; }

/* numero de tarea + drag handle */
.task .task-num {
   font-size: 11px;
   color: var(--text-light);
   font-variant-numeric: tabular-nums;
   font-weight: 600;
   min-width: 22px;
   text-align: right;
   user-select: none;
}
/* numeracion jerarquica de subtareas: "1.1" "1.2" - mas ancho que el padre */
.task .task-num.sub {
   font-size: 10px;
   min-width: 26px;
   font-weight: 500;
   opacity: .85;
}
.task .drag-handle {
   cursor: grab;
   color: var(--text-light);
   font-size: 14px;
   letter-spacing: -3px;
   padding: 0 2px;
   user-select: none;
   opacity: 0;
   transition: opacity .12s;
}
.task[draggable="true"]:hover .drag-handle { opacity: 1; }
.task[draggable="true"]:active .drag-handle { cursor: grabbing; }
.task.dragging { opacity: .35; }
.task.drop-before { box-shadow: inset 0 2px 0 var(--accent); }

/* tareas completadas: mostramos solo el boton borrar */
.task.done .actions { display: inline-flex; }
.task.done .actions .icon-btn:not(.danger):not(.restore) { display: none; }

/* boton ↶ restaurar (reemplaza el click del check en tareas done para evitar
   restaurar por error al expandir/colapsar subtareas con un mis-click) */
.task .icon-btn.restore {
   color: var(--accent);
}
.task .icon-btn.restore:hover {
   background: var(--accent-soft);
   color: var(--accent);
}

/* check de tarea completada: visual-only, no parece clickeable */
.task.done .check.is-done-static {
   cursor: default;
   pointer-events: none;
}

/* vista del proyecto padre Quick: grid de sub-proyectos */
.child-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   gap: 12px;
}
.child-card {
   display: flex;
   flex-direction: column;
   gap: 6px;
   align-items: flex-start;
   padding: 16px;
   background: var(--bg);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   text-decoration: none;
   color: var(--text);
   transition: transform .12s, border-color .12s, background .12s;
}
.child-card:hover {
   transform: translateY(-2px);
   border-color: var(--accent);
   background: var(--accent-soft);
}
.child-card .child-icon { font-size: 22px; }
.child-card .child-name { font-weight: 600; font-size: 14px; }
.child-card .child-count { font-size: 11px; color: var(--text-soft); text-transform: uppercase; letter-spacing: .5px; }
.child-card.child-card-add {
   border-style: dashed;
   color: var(--text-soft);
   align-items: center;
   justify-content: center;
   text-align: center;
}
.child-card.child-card-add .child-icon { color: var(--accent); }

/* hint debajo de campos del modal */
.modal .field-hint {
   font-size: 11px;
   color: var(--text-soft);
   margin-top: 4px;
   line-height: 1.4;
}

/* icono clickable de espacio (cabecera de space.php) */
.space-icon-btn {
   display: inline-block;
   cursor: pointer;
   padding: 2px 8px;
   border-radius: 8px;
   transition: background .12s, transform .12s;
   user-select: none;
}
.space-icon-btn:hover {
   background: var(--accent-soft);
   transform: scale(1.08);
}

/* modal generico (nuevo espacio + icon picker) */
.modal-overlay {
   position: fixed; inset: 0;
   background: rgba(0,0,0,.45);
   display: none;
   z-index: 200;
}
.modal-overlay.open { display: block; }
.modal {
   position: fixed;
   top: 50%; left: 50%;
   width: 440px; max-width: 92vw;
   background: var(--panel);
   color: var(--text);
   border-radius: var(--radius);
   box-shadow: 0 8px 32px rgba(0,0,0,.25);
   padding: 24px 24px 20px;
   z-index: 201;
   display: none;
   transform: translate(-50%, -48%) scale(.96);
   opacity: 0;
   transition: transform .15s ease, opacity .15s;
}
.modal.open {
   display: block;
   transform: translate(-50%, -50%) scale(1);
   opacity: 1;
}
.modal h3 { margin-bottom: 16px; font-size: 16px; }
.modal .close-btn {
   position: absolute;
   top: 10px; right: 14px;
   background: transparent; border: none;
   font-size: 24px; cursor: pointer;
   color: var(--text-soft);
   line-height: 1;
}
.modal .close-btn:hover { color: var(--text); }
.modal .field { margin-bottom: 16px; }
.modal .field label {
   display: block;
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: .5px;
   color: var(--text-soft);
   font-weight: 600;
   margin-bottom: 6px;
}

.icon-grid {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
   gap: 6px;
   max-height: 280px;
   overflow-y: auto;
   padding: 4px;
   margin: -4px;
   /* scrollbar discreto */
   scrollbar-width: thin;
   scrollbar-color: var(--line) transparent;
}
.icon-grid::-webkit-scrollbar {
   width: 8px;
}
.icon-grid::-webkit-scrollbar-track {
   background: transparent;
}
.icon-grid::-webkit-scrollbar-thumb {
   background: var(--line);
   border-radius: 4px;
}
.icon-grid::-webkit-scrollbar-thumb:hover {
   background: var(--text-light);
}
.icon-grid .icon-opt {
   width: 100%;
   aspect-ratio: 1;
   display: grid; place-items: center;
   font-size: 20px;
   background: var(--bg);
   border: 2px solid transparent;
   border-radius: 8px;
   cursor: pointer;
   transition: transform .12s, border-color .12s, background .12s;
   font-family: inherit;
   color: inherit;
   padding: 0;
}
.icon-grid .icon-opt:hover {
   transform: scale(1.12);
   background: var(--accent-soft);
}
.icon-grid .icon-opt.selected {
   border-color: var(--accent);
   background: var(--accent-soft);
}

/* placeholder for new task inline */
.add-task-inline {
   padding: 10px 12px;
   border: 1px dashed var(--line);
   border-radius: 8px;
   margin-top: 10px;
   color: var(--text-light);
   font-size: 13px;
   cursor: pointer;
   transition: all .15s;
}
.add-task-inline:hover {
   border-color: var(--accent);
   color: var(--accent);
}

/* ===== home dashboard widgets ===== */

.empty-state {
   text-align: center;
   color: var(--text-light);
   padding: 22px 12px;
   font-size: 13px;
   line-height: 1.55;
}

.section-divider {
   display: flex;
   align-items: center;
   gap: 12px;
   margin: 28px 0 14px;
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1.2px;
   color: var(--text-soft);
}
.section-divider::before
,.section-divider::after {
   content: "";
   flex: 1;
   height: 1px;
   background: var(--line);
}

/* --- pill que identifica al proyecto --- */
.proj-pill {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   padding: 3px 9px;
   border-radius: 12px;
   background: var(--bg);
   color: var(--text-soft);
   font-size: 11px;
   font-weight: 500;
   text-decoration: none;
   border: 1px solid transparent;
   white-space: nowrap;
   transition: all .15s;
}
.proj-pill:hover {
   border-color: var(--accent);
   color: var(--accent);
   background: var(--accent-soft);
}
.proj-pill .proj-pill-ico {
   font-size: 12px;
   line-height: 1;
}
.proj-pill.sm {
   font-size: 10.5px;
   padding: 2px 7px;
}

/* --- widget: capturado hoy --- */
.feed-list {
   display: flex;
   flex-direction: column;
}
.feed-row {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 9px 4px;
}
.feed-row + .feed-row {
   border-top: 1px solid var(--task-divider);
}
.feed-row .check {
   width: 18px;
   height: 18px;
   border: 2px solid var(--text-light);
   border-radius: 50%;
   cursor: pointer;
   flex-shrink: 0;
   transition: border-color .15s, background .15s;
}
.feed-row .check:hover { border-color: var(--accent); }
.feed-row .flag {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   flex-shrink: 0;
}
.feed-title {
   flex: 1;
   font-size: 14px;
   color: var(--text);
   line-height: 1.35;
}

/* --- widget: vista por proyecto (grid) --- */
.proj-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 14px;
}
.proj-card {
   background: var(--bg);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 12px 14px 10px;
   display: flex;
   flex-direction: column;
   transition: border-color .15s, transform .12s;
}
.proj-card:hover {
   border-color: var(--accent);
}
.proj-card.is-empty {
   opacity: .75;
}
.proj-card-head {
   display: flex;
   align-items: center;
   gap: 10px;
   text-decoration: none;
   color: var(--text);
   padding-bottom: 10px;
   border-bottom: 1px solid var(--line-2);
   margin-bottom: 8px;
}
.proj-ico {
   font-size: 22px;
   line-height: 1;
   flex-shrink: 0;
}
.proj-meta {
   flex: 1;
   min-width: 0;
}
.proj-parent {
   font-size: 11px;
   color: var(--accent);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .8px;
   line-height: 1.2;
   margin-bottom: 2px;
}
.proj-name {
   font-size: 14px;
   font-weight: 600;
   color: var(--text);
   line-height: 1.25;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.proj-count {
   font-size: 11px;
   font-weight: 700;
   padding: 3px 8px;
   border-radius: 10px;
   background: var(--accent-soft);
   color: var(--accent);
   flex-shrink: 0;
}
.proj-task-list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 6px;
}
.proj-task {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   color: var(--text);
   line-height: 1.35;
}
.proj-task .flag {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   flex-shrink: 0;
}
.proj-task-title {
   flex: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.proj-empty {
   font-size: 12px;
   color: var(--text-light);
   text-align: center;
   padding: 8px 0 4px;
}
.proj-more {
   margin-top: 8px;
   font-size: 11px;
   color: var(--accent);
   text-decoration: none;
   align-self: flex-end;
}
.proj-more:hover { text-decoration: underline; }

/* --- widget: por prioridad --- */
.pri-buckets {
   display: flex;
   flex-direction: column;
   gap: 14px;
}
.pri-bucket {
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 10px 12px;
   background: var(--bg);
}
.pri-bucket-head {
   display: flex;
   align-items: center;
   gap: 8px;
   padding-bottom: 8px;
   margin-bottom: 6px;
   border-bottom: 1px solid var(--line-2);
}
.pri-bucket-head .flag {
   width: 12px;
   height: 12px;
   border-radius: 50%;
}
.pri-bucket-name {
   font-size: 12px;
   font-weight: 700;
   color: var(--text);
   text-transform: uppercase;
   letter-spacing: .5px;
}
.pri-bucket-count {
   margin-left: auto;
   font-size: 11px;
   color: var(--text-soft);
   background: var(--panel);
   padding: 2px 8px;
   border-radius: 10px;
}
.pri-task-list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
}
.pri-task {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 6px 2px;
   font-size: 13px;
}
.pri-task + .pri-task {
   border-top: 1px solid var(--task-divider);
}
.pri-task-title {
   flex: 1;
   color: var(--text);
   line-height: 1.35;
}

/* --- widget: resumenes (charts) --- */
.legend {
   display: inline-flex;
   gap: 14px;
   margin-left: 10px;
   font-size: 11px;
}
.legend-item {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   color: var(--text-soft);
}
.legend-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   display: inline-block;
}
.legend-dot.ok     { background: var(--ok); }
.legend-dot.warn   { background: var(--warn); }
.legend-dot.accent { background: var(--accent); }

.resumen-section {
   margin-top: 4px;
}
.resumen-section + .resumen-section {
   margin-top: 22px;
   padding-top: 18px;
   border-top: 1px dashed var(--line);
}
.resumen-title {
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .5px;
   color: var(--text-soft);
   margin: 0 0 12px;
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 12px;
}
.resumen-sub {
   font-size: 11px;
   font-weight: 500;
   color: var(--text-light);
   text-transform: none;
   letter-spacing: 0;
}

/* barras horizontales pendientes vs resueltas */
.bar-row {
   display: grid;
   grid-template-columns: 140px 1fr 150px;
   gap: 14px;
   align-items: center;
   padding: 9px 0;
   font-size: 13px;
}
.bar-row + .bar-row { border-top: 1px solid var(--task-divider); }
.bar-label {
   display: flex;
   align-items: center;
   gap: 6px;
   color: var(--text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.bar-ico { font-size: 14px; line-height: 1; flex-shrink: 0; }
.bar-name {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.bar-wrap {
   width: 100%;
}
.bar-track {
   display: flex;
   height: 12px;
   background: var(--bg);
   border-radius: 6px;
   overflow: hidden;
   min-width: 18px;
}
.bar-seg {
   height: 100%;
   transition: flex .2s;
}
.bar-seg.done    { background: var(--ok); }
.bar-seg.pending { background: var(--warn); }
.bar-counts {
   text-align: right;
   font-size: 12px;
   color: var(--text-soft);
   display: flex;
   align-items: baseline;
   justify-content: flex-end;
   gap: 4px;
}
.bar-counts .ok   { color: var(--ok);   font-weight: 700; }
.bar-counts .warn { color: var(--warn); font-weight: 700; }
.bar-sep { color: var(--text-light); }
.bar-pct {
   margin-left: 6px;
   font-size: 10.5px;
   color: var(--text-light);
   white-space: nowrap;
}

/* chart de actividad ultimos 14 dias */
.activity-chart {
   display: grid;
   grid-template-columns: repeat(14, 1fr);
   gap: 6px;
   align-items: end;
   height: 110px;
   margin-bottom: 8px;
}
.activity-day {
   display: flex;
   flex-direction: column;
   align-items: center;
   height: 100%;
   gap: 4px;
   cursor: default;
}
.activity-day.is-today .activity-day-label {
   color: var(--accent);
   font-weight: 700;
}
.activity-bars {
   display: flex;
   gap: 2px;
   align-items: flex-end;
   height: 88px;
   width: 100%;
   justify-content: center;
}
.activity-bar {
   flex: 1;
   max-width: 10px;
   min-height: 2px;
   border-radius: 2px 2px 0 0;
   background: var(--line);
   transition: height .2s;
}
.activity-bar.created { background: var(--accent); }
.activity-bar.done    { background: var(--ok); }
.activity-day:hover .activity-bar { opacity: .85; }
.activity-day-label {
   font-size: 10px;
   color: var(--text-light);
   white-space: nowrap;
}
.activity-legend {
   display: flex;
   gap: 14px;
   justify-content: center;
   font-size: 11px;
   margin-top: 6px;
}


/* ============================================================
   AUTH PAGES (login, forgot, reset) - layout standalone
   ============================================================ */

.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-h); }

.auth-body {
   background: var(--bg-2);
   min-height: 100vh;
}
.auth-body .app { display: block; }   /* deshabilita el grid de sidebar+main */

.auth-shell {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 32px 16px 80px;
}

.auth-card {
   width: 100%;
   max-width: 380px;
   background: var(--bg);
   border: 1px solid var(--line);
   border-radius: 16px;
   padding: 32px 28px;
   box-shadow: 0 8px 32px rgba(0,0,0,.05);
}
[data-theme="dark"] .auth-card {
   box-shadow: 0 8px 32px rgba(0,0,0,.35);
}

.auth-brand {
   text-align: center;
   margin-bottom: 24px;
}
.auth-logo {
   width: 88px;
   height: 88px;
   border-radius: 18px;
   object-fit: contain;
   display: block;
   margin: 0 auto 12px;
}
.auth-brand h1 {
   font-size: 22px;
   font-weight: 700;
   letter-spacing: -.5px;
   margin: 0;
}
.auth-brand .auth-tag {
   color: var(--text-soft);
   font-size: 13px;
   margin-top: 4px;
}

.auth-form { display: flex; flex-direction: column; gap: 4px; }
.auth-form label {
   font-size: 12px;
   font-weight: 500;
   color: var(--text-soft);
   margin-top: 12px;
   margin-bottom: 4px;
}
.auth-form .input {
   width: 100%;
   font-size: 14px;
   padding: 10px 12px;
}
.auth-help {
   color: var(--text-soft);
   font-size: 13px;
   line-height: 1.5;
   margin: 0 0 8px;
}
.auth-submit {
   width: 100%;
   justify-content: center;
   padding: 11px 14px;
   font-size: 14px;
   font-weight: 600;
   margin-top: 18px;
}

.auth-error {
   background: rgba(239,68,68,.10);
   border: 1px solid rgba(239,68,68,.35);
   color: var(--danger);
   padding: 10px 12px;
   border-radius: 8px;
   font-size: 13px;
   margin-bottom: 14px;
}
.auth-info {
   background: rgba(99,102,241,.10);
   border: 1px solid rgba(99,102,241,.35);
   color: var(--accent);
   padding: 10px 12px;
   border-radius: 8px;
   font-size: 13px;
   line-height: 1.5;
   margin-bottom: 4px;
}
.auth-debug {
   background: var(--bg-2);
   border: 1px dashed var(--line);
   border-radius: 8px;
   padding: 10px 12px;
   font-size: 12px;
   color: var(--text-soft);
   margin-top: 12px;
   line-height: 1.5;
   word-break: break-all;
}
.auth-debug code {
   font-family: ui-monospace, monospace;
   font-size: 11px;
   background: var(--bg);
   padding: 1px 5px;
   border-radius: 4px;
}
.auth-debug a { color: var(--accent); }

.auth-links {
   text-align: center;
   margin-top: 16px;
   font-size: 13px;
   color: var(--text-soft);
}
.auth-links a {
   color: var(--accent);
   text-decoration: none;
}
.auth-links a:hover { text-decoration: underline; }

.auth-footer {
   position: fixed;
   bottom: 16px;
   right: 16px;
}
.auth-footer .theme-toggle {
   background: var(--bg);
   color: var(--text-soft);
   border: 1px solid var(--line);
}
.auth-footer .theme-toggle:hover {
   background: var(--bg-2);
   color: var(--text);
}


/* ============================================================
   ADMIN USERS - tabla + role pills
   ============================================================ */

.users-table-wrap {
   overflow-x: auto;
   margin-top: 8px;
}
.users-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 13px;
}
.users-table thead th {
   text-align: left;
   font-weight: 600;
   color: var(--text-soft);
   font-size: 12px;
   padding: 10px 12px;
   border-bottom: 1px solid var(--line);
   text-transform: uppercase;
   letter-spacing: .4px;
}
.users-table tbody td {
   padding: 12px;
   border-bottom: 1px solid var(--task-divider);
   vertical-align: middle;
}
.users-table tbody tr:last-child td { border-bottom: none; }
.users-table tbody tr:hover { background: var(--bg-2); }

.users-table tr.is-inactive { opacity: .55; }

.users-table .col-actions {
   text-align: right;
   white-space: nowrap;
}
.users-table .col-actions .icon-btn {
   margin-left: 2px;
}
.users-table .muted { color: var(--text-soft); font-size: 12px; }

.role-pill {
   display: inline-block;
   padding: 2px 8px;
   border-radius: 999px;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .3px;
}
.role-pill.role-admin {
   background: rgba(99,102,241,.12);
   color: var(--accent);
   border: 1px solid rgba(99,102,241,.35);
}
.role-pill.role-user {
   background: var(--bg-2);
   color: var(--text-soft);
   border: 1px solid var(--line);
}
.role-pill.sm {
   font-size: 10px;
   padding: 1px 6px;
   margin-left: 6px;
   vertical-align: middle;
}

.status-pill {
   display: inline-block;
   padding: 2px 8px;
   border-radius: 999px;
   font-size: 11px;
   font-weight: 600;
}
.status-pill.on {
   background: rgba(16,185,129,.12);
   color: var(--ok);
   border: 1px solid rgba(16,185,129,.35);
}
.status-pill.off {
   background: rgba(148,163,184,.18);
   color: var(--text-soft);
   border: 1px solid var(--line);
}

.badge.sm {
   font-size: 9px;
   padding: 1px 5px;
   margin-left: 6px;
   vertical-align: middle;
}


/* ============================================================
   SIDEBAR FOOTER (user pill + logout) - update v5
   ============================================================ */

.sidebar .footer {
   flex-direction: column;
   align-items: stretch;
   gap: 10px;
}

/* user-pill ahora vive dentro de .brand, debajo de "Colibrist" */
.sidebar .brand .user-pill {
   margin-top: 10px;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 6px 10px;
   border-radius: 999px;
   background: rgba(255,255,255,.08);
   font-size: 12px;
   color: rgba(255,255,255,.92);
   max-width: 100%;
   overflow: hidden;
}
.sidebar .brand .user-pill .user-ico {
   font-size: 13px;
   flex-shrink: 0;
}
.sidebar .brand .user-pill .user-name {
   font-weight: 500;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.sidebar .brand .user-pill .role-pill.sm {
   margin-left: 2px;
   background: rgba(99,102,241,.30);
   color: #fff;
   border-color: rgba(255,255,255,.25);
   padding: 1px 7px;
}

/* footer-actions: Salir ocupa todo el ancho horizontal disponible */
.sidebar .footer-actions {
   display: flex;
   align-items: center;
   gap: 8px;
}
.sidebar .footer-link {
   flex: 1;
   text-align: center;
   color: rgba(255,255,255,.92);
   font-size: 13px;
   font-weight: 500;
   text-decoration: none;
   padding: 9px 12px;
   border-radius: 8px;
   background: rgba(255,255,255,.08);
   transition: background .15s, color .15s;
}
.sidebar .footer-link:hover {
   background: rgba(255,255,255,.18);
}

/* ============================================================ */
/* v6 - VISIBILITY pill + badge                                  */
/* ============================================================ */
.vis-pill {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 4px 10px;
   font-size: 12px;
   font-weight: 600;
   border-radius: 999px;
   background: var(--bg-2);
   border: 1px solid var(--line);
   color: var(--text-light);
   white-space: nowrap;
}
.vis-pill.is-shared {
   background: rgba(34,197,94,.12);
   border-color: rgba(34,197,94,.40);
   color: var(--ok);
}
.vis-toggle {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 6px 12px;
   font-size: 12px;
   font-weight: 600;
   border-radius: 999px;
   background: var(--bg-2);
   border: 1px solid var(--line);
   color: var(--text-light);
   cursor: pointer;
   transition: background .15s, border-color .15s, color .15s;
}
.vis-toggle:hover {
   background: var(--bg);
   border-color: var(--accent);
   color: var(--accent);
}
.vis-toggle.is-shared {
   background: rgba(34,197,94,.12);
   border-color: rgba(34,197,94,.40);
   color: var(--ok);
}
.vis-toggle.is-shared:hover {
   background: rgba(34,197,94,.20);
   border-color: var(--ok);
}
.vis-pill.is-group,
.vis-toggle.is-group {
   background: rgba(99,102,241,.12);
   border-color: rgba(99,102,241,.40);
   color: var(--accent);
}
.vis-toggle.is-group:hover {
   background: rgba(99,102,241,.20);
   border-color: var(--accent);
}

/* v6.5 - modal de visibilidad: opciones radio + lista de miembros */
.vis-options {
   display: flex;
   flex-direction: column;
   gap: 6px;
   margin: 8px 0 12px;
}
.vis-opt {
   display: grid;
   grid-template-columns: auto auto 1fr;
   align-items: center;
   gap: 10px;
   padding: 8px 10px;
   border: 1px solid var(--line);
   border-radius: 8px;
   cursor: pointer;
   transition: background .12s, border-color .12s;
}
.vis-opt:hover           { background: var(--bg-2); }
.vis-opt input[type=radio]:checked ~ .vis-opt-text strong { color: var(--accent); }
.vis-opt:has(input:checked) {
   background: var(--accent-soft);
   border-color: var(--accent);
}
.vis-opt-emoji  { font-size: 18px; }
.vis-opt-text strong { display: block; font-size: 13px; }
.vis-opt-text small  { display: block; font-size: 11px; color: var(--text-light); margin-top: 1px; }

.vis-members {
   display: flex;
   flex-direction: column;
   gap: 4px;
   max-height: 240px;
   overflow-y: auto;
   border: 1px solid var(--line);
   border-radius: 8px;
   padding: 6px;
}
.vis-member {
   display: grid;
   grid-template-columns: auto auto 1fr;
   align-items: center;
   gap: 8px;
   padding: 6px 8px;
   border-radius: 6px;
   cursor: pointer;
   font-size: 13px;
}
.vis-member:hover     { background: var(--bg-2); }
.vis-member.is-me     { opacity: .85; }
.vis-member input[type=checkbox] { cursor: pointer; }
.vis-member.is-me input[type=checkbox] { cursor: not-allowed; }
.vis-member-name      { font-weight: 500; }

/* badge pequeño en sidebar para spaces SHARED */
.sidebar .vis-badge {
   margin-left: 4px;
   font-size: 11px;
   opacity: .85;
}

/* contador con estado warn (cíclicas vencidas) */
.sidebar .count.warn {
   background: rgba(245,158,11,.30);
   color: #fde68a;
}

/* ============================================================ */
/* v6 - CYCLIC: lista de tareas cíclicas y card "due hoy"        */
/* ============================================================ */
.cyclic-list {
   display: flex;
   flex-direction: column;
   gap: 0;
}
.cyclic-row {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   padding: 10px 4px;
   border-top: 1px solid var(--task-divider);
}
.cyclic-row:first-child {
   border-top: none;
}
.cyclic-row.is-due {
   background: linear-gradient(90deg, rgba(245,158,11,.07) 0%, transparent 100%);
}
.cyclic-row.has-reminder {
   background: linear-gradient(90deg, rgba(99,102,241,.06) 0%, transparent 100%);
}
.cyclic-reminder {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   color: var(--accent);
   font-weight: 600;
}
/* fila de 3 selects de recordatorio en el modal cyclic */
.reminders-row {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 6px;
}
.reminders-row .reminder-pick {
   font-size: 13px;
}
/* en dark mode el icono nativo del calendario y de los <input type="date">
   queda casi invisible (es negro sobre fondo oscuro). Invertirlo para que
   contraste igual que el texto. */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
   filter: invert(.85);
   cursor: pointer;
}

/* ============================================================
   Buckets de "Proximas a vencer" en dashboard ciclico
   ============================================================ */
.upcoming-bucket {
   margin-top: 14px;
}
.upcoming-bucket:first-child {
   margin-top: 0;
}
.upcoming-bucket-head {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 4px 0 6px 0;
   border-bottom: 1px solid var(--task-divider);
   margin-bottom: 4px;
}
.upcoming-bucket-title {
   font-weight: 600;
   font-size: 13px;
   color: var(--text);
}
.upcoming-bucket-desc {
   font-size: 12px;
   color: var(--text-light);
   margin-left: auto;
   font-style: italic;
}

/* ============================================================
   Tabs en historial.php (Completadas vs Cumplimientos ciclicos)
   ============================================================ */
.hist-tabs {
   display: flex;
   gap: 4px;
   margin: 12px 0 14px 0;
   border-bottom: 1px solid var(--line);
}
.hist-tab {
   padding: 8px 16px;
   text-decoration: none;
   color: var(--text-light);
   border-bottom: 2px solid transparent;
   margin-bottom: -1px;
   font-weight: 500;
   font-size: 14px;
   transition: color .15s, border-color .15s;
}
.hist-tab:hover {
   color: var(--text);
}
.hist-tab.is-active {
   color: var(--accent);
   border-bottom-color: var(--accent);
   font-weight: 600;
}
/* fila de cumplimiento ciclico: misma anatomia que hist-row pero con
   columna extra para el tipo de evento */
.hist-row-cyclic .what {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 4px;
}

/* ============================================================
   Bitacora por tarea (modal #task-history-modal)
   ============================================================ */
.task-history-list {
   max-height: 380px;
   overflow-y: auto;
   border: 1px solid var(--line);
   border-radius: 8px;
   padding: 4px;
   background: var(--bg-2);
}
.task-history-list .history-row {
   display: grid;
   grid-template-columns: auto auto 1fr;
   gap: 10px;
   padding: 8px 10px;
   align-items: center;
   border-bottom: 1px solid var(--task-divider);
   font-size: 13px;
}
.task-history-list .history-row:last-child {
   border-bottom: none;
}
.history-pill {
   display: inline-flex;
   align-items: center;
   font-size: 12px;
   font-weight: 600;
   padding: 2px 8px;
   border-radius: 999px;
   background: var(--bg);
   border: 1px solid var(--line);
   white-space: nowrap;
}
.history-pill.is-ticked {
   background: color-mix(in srgb, var(--ok) 14%, transparent);
   border-color: color-mix(in srgb, var(--ok) 35%, transparent);
   color: var(--ok);
}
.history-pill.is-resch {
   background: color-mix(in srgb, var(--accent) 14%, transparent);
   border-color: color-mix(in srgb, var(--accent) 35%, transparent);
   color: var(--accent);
}
.history-pill.is-created {
   background: color-mix(in srgb, var(--text-light) 14%, transparent);
   border-color: var(--line);
   color: var(--text);
}
.history-pill.is-edited {
   background: color-mix(in srgb, var(--warn) 14%, transparent);
   border-color: color-mix(in srgb, var(--warn) 35%, transparent);
   color: var(--warn);
}
.history-pill.is-done {
   background: color-mix(in srgb, var(--ok) 14%, transparent);
   border-color: color-mix(in srgb, var(--ok) 35%, transparent);
   color: var(--ok);
}
.history-when {
   color: var(--text-light);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
}
.history-detail {
   color: var(--text-light);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.cyclic-tick {
   flex-shrink: 0;
   padding: 6px 12px;
   font-size: 13px;
   font-weight: 600;
   border-radius: 8px;
   background: var(--ok);
   color: #fff;
   border: 1px solid transparent;
   cursor: pointer;
   transition: background .15s, transform .05s;
}
.cyclic-tick:hover {
   background: #15803d;
}
.cyclic-tick:active {
   transform: scale(.97);
}
/* deshabilitado cuando next_due > hoy: visual claro de "ya cumplida en su
   ultimo ciclo, no la vuelvas a tickear hasta que vuelva a vencer". */
.cyclic-tick.is-disabled,
.cyclic-tick:disabled {
   background: var(--bg-2);
   color: var(--text-light);
   border-color: var(--line);
   cursor: not-allowed;
   opacity: .7;
}
.cyclic-tick.is-disabled:hover,
.cyclic-tick:disabled:hover {
   background: var(--bg-2);
   transform: none;
}
.cyclic-meta {
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 4px;
}
.cyclic-title {
   font-size: 14px;
   font-weight: 500;
   color: var(--text);
   line-height: 1.3;
}
.cyclic-title.editable {
   cursor: text;
   border-bottom: 1px dashed transparent;
}
.cyclic-title.editable:hover {
   border-bottom-color: var(--line);
}
.cyclic-sub {
   font-size: 12px;
   color: var(--text-light);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 6px;
}
.cyclic-recurrence {
   color: var(--accent);
   font-weight: 500;
}
.cyclic-next.is-due {
   color: var(--warn);
   font-weight: 600;
}
.cyclic-sep {
   opacity: .4;
}
/* avatar circular reusable: en cyclic-assigned, sidebar y admin_users */
.user-avatar {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 22px;
   height: 22px;
   border-radius: 50%;
   font-size: 13px;
   line-height: 1;
   color: #fff;
   background: var(--accent);
   flex-shrink: 0;
   box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.user-avatar.is-empty {
   background: var(--bg-2);
   color: var(--text-light);
   border: 1px dashed var(--line);
   box-shadow: none;
}

/* pill del responsable en cada fila de tarea ciclica - mas prominente que la
   version v6.1: usa el color del avatar como tinte de fondo y border */
.cyclic-assigned {
   --avatar-color: var(--accent);
   font-family: inherit;
   font-size: 13px;
   font-weight: 600;
   color: var(--avatar-color);
   background: color-mix(in srgb, var(--avatar-color) 12%, transparent);
   border: 1px solid color-mix(in srgb, var(--avatar-color) 35%, transparent);
   border-radius: 999px;
   padding: 3px 10px 3px 3px;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   cursor: pointer;
   transition: background .15s, border-color .15s, transform .15s;
}
.cyclic-assigned:hover {
   background: color-mix(in srgb, var(--avatar-color) 22%, transparent);
   border-color: var(--avatar-color);
   transform: translateY(-1px);
}
.cyclic-assigned.is-empty {
   color: var(--text-light);
   background: transparent;
   border: 1px dashed var(--line);
   font-weight: 500;
   font-style: italic;
   padding-left: 8px;
}
.cyclic-assigned.is-empty:hover {
   background: var(--bg-2);
   border-color: var(--accent);
   color: var(--accent);
}
.cyclic-assigned-name {
   line-height: 1;
}

/* pickers en el modal de admin_users */
.avatar-picker {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
   gap: 6px;
   max-height: 180px;
   overflow-y: auto;
   padding: 8px;
   border: 1px solid var(--line);
   border-radius: 8px;
   background: var(--bg-2);
}
.avatar-picker .avatar-opt {
   width: 36px;
   height: 36px;
   border-radius: 8px;
   border: 1px solid transparent;
   background: var(--bg);
   font-size: 18px;
   line-height: 1;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: border-color .15s, transform .15s;
}
.avatar-picker .avatar-opt:hover {
   border-color: var(--accent);
   transform: scale(1.05);
}
.avatar-picker .avatar-opt.selected {
   border-color: var(--accent);
   background: color-mix(in srgb, var(--accent) 18%, var(--bg));
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}
.color-picker {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}
.color-picker .color-opt {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   border: 2px solid transparent;
   cursor: pointer;
   transition: transform .15s, border-color .15s;
}
.color-picker .color-opt:hover {
   transform: scale(1.1);
}
.color-picker .color-opt.selected {
   border-color: var(--text);
   box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

/* avatar en la tabla de admin */
.users-table td .user-avatar {
   width: 28px;
   height: 28px;
   font-size: 16px;
}
.cyclic-add {
   margin-top: 12px;
}
.cyclic-due-card h3 .badge.warn {
   background: rgba(245,158,11,.18);
   color: var(--warn);
}

/* ============================================================ */
/* v6 - modal de nueva tarea cíclica: weekday picker             */
/* ============================================================ */
.weekday-picker {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}
.weekday-picker label {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 6px 10px;
   font-size: 13px;
   border: 1px solid var(--line);
   border-radius: 8px;
   cursor: pointer;
   user-select: none;
   background: var(--bg-2);
   transition: background .15s, border-color .15s;
}
.weekday-picker label:hover {
   border-color: var(--accent);
}
.weekday-picker input[type="checkbox"] {
   margin: 0;
   accent-color: var(--accent);
}
.weekday-picker label:has(input:checked) {
   background: rgba(99,102,241,.14);
   border-color: var(--accent);
   color: var(--accent);
   font-weight: 600;
}