:root {
  /* Paleta oficial Provocando Mentes (Kit Marca PM) */
  --bg: #fafafa;
  --panel: #ffffff;
  --ink: #000000;
  --ink-soft: #6b6b6b;
  --line: #e5e5e5;
  --accent: #BD545B;      /* rose - marca */
  --accent-soft: #F5E5E6;
  --hito: #BD545B;        /* rose - marca */
  --hito-bg: #F5E5E6;
  --contenido: #FC8088;   /* coral - marca */
  --contenido-bg: #FFECED;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Poppins', "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

h1, h2, h3, .btn-primary, .brand-mark { font-family: 'Poppins', "Segoe UI", system-ui, sans-serif; font-weight: 700; }

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 28px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 14px; }

.brand-mark {
  padding: 10px 16px;
  border-radius: 8px;
  background: #000000;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.05;
  text-align: left;
  letter-spacing: 0.2px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
a.brand-mark:hover { opacity: 0.85; }

.brand h1 { font-size: 18px; margin: 0; }
.brand p { font-size: 12px; margin: 0; color: var(--ink-soft); }

.topbar-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.clock-block { text-align: right; line-height: 1.3; }
.clock-time { font-size: 20px; font-weight: 700; letter-spacing: 0.5px; font-variant-numeric: tabular-nums; }
.clock-date { font-size: 12px; color: var(--ink-soft); text-transform: capitalize; }

.btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: var(--radius);
  font-size: 14px;
  cursor: pointer;
}
.btn-primary:hover { opacity: 0.9; }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}
.btn-ghost:hover { background: var(--accent-soft); }

.btn-today { margin-left: auto; }

.btn-danger {
  background: transparent;
  border: 1px solid #c0392b;
  color: #c0392b;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
}

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 18px;
  padding: 20px 24px;
  max-width: 1520px;
  margin: 0;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.filter-group {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}

.filter-group h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-soft);
  margin: 0 0 12px 0;
}

.filter-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.35;
  margin-bottom: 8px;
  cursor: pointer;
}
.filter-row input[type="checkbox"] { flex-shrink: 0; margin-top: 3px; }

.dot {
  width: 10px;
  height: 10px;
  min-width: 10px;
  min-height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  margin-top: 5px;
}
.dot-hito { background: var(--hito); }
.dot-contenido { background: var(--contenido); }

.upcoming-list { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; }

.upcoming-item {
  padding: 8px 10px;
  border-radius: 8px;
  border-left: 3px solid var(--hito);
  background: var(--hito-bg);
  font-size: 13px;
  cursor: pointer;
}
.upcoming-item.contenido { border-left-color: var(--contenido); background: var(--contenido-bg); }
.upcoming-item .u-date { display: block; font-size: 11px; color: var(--ink-soft); }

.calendar-wrap {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.cal-nav h2 { margin: 0; font-size: 19px; min-width: 170px; text-transform: capitalize; }

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 8px;
  text-align: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 150px;
  gap: 8px;
}

.day-cell {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  font-size: 13px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.day-cell:hover { border-color: var(--accent); }
.day-cell.outside { background: #fafaf8; color: #c4c2bc; }
.day-cell.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.day-num { font-weight: 600; font-size: 14px; }

.evt-chip {
  font-size: 11.5px;
  padding: 3px 6px 3px 7px;
  border-radius: 5px;
  border-left: 2.5px solid var(--hito);
  background: var(--hito-bg);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.evt-chip.contenido { border-left-color: var(--contenido); background: var(--contenido-bg); }
.evt-chip.past { border-left-color: #9a9a9a; background: #ececec; color: #6b6b6b; }

.focos-intro { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 12px 0; }
.btn-focos {
  display: block;
  text-align: center;
  text-decoration: none;
  width: 100%;
}

.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(31,36,33,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
}
.modal-overlay.hidden { display: none; }
.hidden { display: none !important; }

.modal {
  background: #fff;
  border-radius: var(--radius);
  padding: 24px;
  width: 380px;
  max-width: 90vw;
}
.modal.modal-wide { width: 460px; }
.modal h2 { margin-top: 0; font-size: 16px; }

.modal label {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.modal input, .modal select, .modal textarea {
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 14px;
  font-family: inherit;
}

.modal-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
.modal-actions-right { display: flex; gap: 8px; }

.report-range { display: flex; gap: 12px; }
.report-range label { flex: 1; }

.report-results {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 8px;
  max-height: 360px;
  overflow-y: auto;
}

.report-row {
  display: grid;
  grid-template-columns: 110px 1fr 30px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.report-row-total {
  grid-template-columns: 1fr auto;
  font-weight: 700;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.report-row-muted { color: var(--ink-soft); grid-template-columns: 1fr auto; }

.report-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report-count { text-align: right; font-weight: 600; }

.report-bar-wrap {
  background: var(--line);
  border-radius: 20px;
  height: 8px;
  overflow: hidden;
}
.report-bar {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 20px;
}
.report-empty { font-size: 13px; color: var(--ink-soft); }

.login-error { font-size: 12px; color: #c0392b; margin: -6px 0 12px 0; }

.modal label.login-remember {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 400;
  margin: -6px 0 14px 0;
}
.login-remember input { flex-shrink: 0; margin: 0; }

/* ---------- Responsive: tablet ---------- */
@media (max-width: 1024px) {
  .layout { grid-template-columns: 180px 1fr; gap: 14px; padding: 16px; }
  .grid { grid-auto-rows: 120px; }
  .day-cell { padding: 6px; }
}

/* ---------- Responsive: tablet pequeña / móvil grande ---------- */
@media (max-width: 760px) {
  .topbar { padding: 12px 16px; }
  .topbar-right { align-items: flex-start; }

  .layout {
    grid-template-columns: 1fr;
    padding: 14px;
    gap: 14px;
  }
  .sidebar {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .sidebar .filter-group { flex: 1 1 220px; }

  .grid { grid-auto-rows: 90px; gap: 5px; }
  .day-cell { padding: 5px; font-size: 11px; gap: 3px; }
  .day-num { font-size: 12px; }
  .evt-chip { font-size: 10px; }
  .cal-nav h2 { font-size: 16px; min-width: 0; }
  .weekdays { font-size: 10.5px; }
}

/* ---------- Responsive: móvil ---------- */
@media (max-width: 480px) {
  .brand p { display: none; }
  .brand-mark { font-size: 10px; padding: 8px 12px; }

  .sidebar { flex-direction: column; }
  .sidebar .filter-group { flex: 1 1 auto; }

  .grid { grid-auto-rows: 68px; }
  .day-cell .evt-chip:nth-child(n+3) { display: none; }
  .cal-nav { flex-wrap: wrap; gap: 8px; }
  .btn-today { margin-left: 0; }

  .modal { padding: 18px; }
}

/* Focos de contenido (focos.html) */
.focos-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 32px 28px 60px;
}
.focos-title-row { display: flex; align-items: center; gap: 12px; }
.focos-title-row h1 { flex: 1; min-width: 0; }
.back-arrow {
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  text-decoration: none;
  flex-shrink: 0;
}
.back-arrow:hover { opacity: 0.75; }

.focos-page h1 { font-size: 22px; margin: 0; }
.focos-page .focos-sub { font-size: 13px; color: var(--ink-soft); margin: 0 0 28px 0; }

.foco-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.foco-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  border-top: 4px solid var(--accent);
  cursor: pointer;
}
.foco-card:hover { border-color: var(--accent); }
.foco-card:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

.note-history-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 12px;
}
.note-history-bar button { font-size: 16px; padding: 4px 12px; }
.note-history-bar button:disabled { cursor: not-allowed; }
.note-step-label { font-size: 12px; color: var(--ink-soft); min-width: 50px; text-align: center; }

#noteText { margin-bottom: 4px; }
.foco-card .foco-num { font-size: 11px; color: var(--ink-soft); font-weight: 600; letter-spacing: 0.5px; }
.foco-card h3 { margin: 4px 0 8px 0; font-size: 16px; }
.foco-card .foco-comunica { font-size: 13px; margin: 0 0 10px 0; }
.foco-card .foco-equivale {
  display: inline-block;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 10px;
}
.foco-card ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink); }
.foco-card li { margin-bottom: 4px; }

@media (max-width: 760px) {
  .focos-page { padding: 24px 16px 40px; }
}

/* Inicio (inicio.html) */
.inicio-hero {
  background: #ffffff;
  color: #000000;
  padding: 28px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}
.inicio-hero-left { flex-shrink: 0; }
.inicio-hero-right { text-align: left; flex: 1 1 320px; min-width: 0; max-width: 520px; }

.inicio-brand { font-size: 22px; line-height: 1.05; margin: 0 0 2px 0; color: #000000; }
.inicio-submark {
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  opacity: 0.75;
  margin: 0;
}
.inicio-tagline {
  font-size: 18px;
  font-weight: 600;
  color: #000000;
  line-height: 1.15;
  margin: 4px 0 0 0;
}
.inicio-sub { font-size: 16px; font-weight: 400; color: var(--ink-soft); line-height: 1.15; margin: 2px 0 0 0; }

@media (max-width: 640px) {
  .inicio-hero { flex-direction: column; align-items: flex-start; }
  .inicio-hero-right { text-align: left; }
}

.estudio-section {
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 28px 0;
}
.estudio-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-soft);
  margin: 0 0 12px 0;
}
.estudio-grid { display: grid; grid-template-columns: minmax(260px, 360px); }
.home-card-estudio { border-top: 4px solid #000000; }

.inicio-projects {
  background: #000000;
  padding: 40px 28px 60px;
}
.inicio-projects > * {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.inicio-projects h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #bbbbbb;
  margin: 0;
}

.proyectos-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.proyectos-filter { display: flex; gap: 8px; }
.proyectos-filter select {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}
.proyectos-filter select option.month-past {
  text-decoration: line-through;
  color: #bbbbbb;
}

.home-empty { font-size: 13px; color: #bbbbbb; margin-top: 8px; }

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.home-card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  border-top: 4px solid var(--accent);
  text-decoration: none;
  color: var(--ink);
}
.home-card:hover { border-color: var(--accent); box-shadow: 0 2px 12px rgba(0,0,0,0.06); }

.home-card-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-soft);
}
.home-card h3 { margin: 0 0 14px 0; font-size: 18px; }
.home-card p { font-size: 13px; color: var(--ink-soft); margin: 0 0 14px 0; }
.home-card-cta { font-weight: 700; color: var(--accent); font-size: 14px; }

@media (max-width: 760px) {
  .inicio-hero { padding: 40px 20px; }
  .inicio-hero h1 { font-size: 30px; }
  .inicio-projects { padding: 28px 16px 40px; }
}

/* Acceso directo (index.html) — pantalla oscura, sin caja blanca */
.acceso-main {
  background: #000000;
  min-height: calc(100vh - 108px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}
.acceso-box {
  width: 380px;
  max-width: 100%;
  text-align: center;
}
.acceso-box h2 {
  color: var(--contenido);
  font-size: 34px;
  margin: 0 0 10px 0;
}
.acceso-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  margin: 0 0 32px 0;
}
.acceso-box form { text-align: left; }

.acceso-field { margin-bottom: 18px; }
.acceso-field label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  margin-bottom: 6px;
}
.acceso-field input {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: #ffffff;
}
.acceso-field input::placeholder { color: rgba(255,255,255,0.35); }
.acceso-field input:focus { outline: none; border-color: var(--contenido); }

.acceso-remember {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  font-weight: 400;
  margin: -6px 0 22px 0;
}
.acceso-remember input { flex-shrink: 0; margin: 0; }

.acceso-submit {
  width: 100%;
  background: #ffffff;
  color: #000000;
  border: none;
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.acceso-submit:hover { opacity: 0.9; }
.acceso-box .login-error { color: #ff8a8a; }

/* Panel de Elisa (panel.html) */
.panel-page {
  background: #000000;
  min-height: calc(100vh - 76px);
  padding: 28px 24px 60px;
}
.panel-page > * {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.panel-block {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}
.panel-block h2 { margin: 0 0 4px 0; font-size: 16px; }
.panel-sub { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 14px 0; }
.panel-block-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.panel-notice {
  font-size: 12.5px;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 16px 0;
}

.home-card.panel-inactiva {
  border-top-color: #bbbbbb;
  opacity: 0.55;
  cursor: default;
}
.home-card.panel-inactiva:hover { box-shadow: none; }
.home-card.panel-inactiva .home-card-cta { color: #bbbbbb; }

.panel-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.panel-table th, .panel-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.panel-table th { color: var(--ink-soft); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; }
.panel-empty { font-size: 13px; color: var(--ink-soft); }

@media (max-width: 760px) {
  .acceso-box { padding: 24px; }
  .panel-page { padding: 20px 16px 40px; }
  .panel-table { font-size: 12px; }
}