* { box-sizing: border-box; font-family: Arial, sans-serif; }
body { margin: 0; background: #f4f7fb; color: #1f2937; }
.topbar { background: #111827; color: #fff; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.brand { font-weight: 700; font-size: 20px; }
.nav-links { display: flex; gap: 12px; flex-wrap: wrap; }
.nav-links a { color: #fff; text-decoration: none; }
.container { max-width: 1200px; margin: 24px auto; padding: 0 16px 40px; }
h1, h2, h3 { margin-top: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }
.card, .panel, .login-card { background: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid { display: grid; gap: 10px; }
input, textarea, select, button { width: 100%; padding: 11px 12px; border: 1px solid #d1d5db; border-radius: 10px; }
button { background: #2563eb; color: white; border: none; cursor: pointer; font-weight: 700; }
button:hover { opacity: 0.95; }
button.danger { background: #dc2626; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 12px 10px; border-bottom: 1px solid #e5e7eb; vertical-align: top; text-align: left; }
.login-card { max-width: 420px; margin: 60px auto; }
.alert.error { background: #fee2e2; color: #991b1b; padding: 12px; border-radius: 10px; margin-bottom: 12px; }
.day-block { border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.inline-form { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
.inline-form input, .inline-form button { width: auto; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.hint { background: #eff6ff; border-radius: 12px; padding: 14px; margin-top: 16px; }
.narrow { max-width: 760px; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

.alert.success { background: #dcfce7; color: #166534; padding: 12px; border-radius: 10px; margin-bottom: 12px; }
.button-link { display:inline-block; background:#2563eb; color:#fff; text-decoration:none; padding:10px 14px; border-radius:10px; font-weight:700; }
.cell-pre { white-space: pre-wrap; margin-top: 6px; color: #4b5563; }


.subtle { color:#6b7280; margin:0; }
.section-head-inline, .calendar-header-row { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.month-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.month-picker-form { margin:0; }
.month-nav { text-decoration:none; color:#1d4ed8; font-weight:700; }
.calendar-summary-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-top:16px; }
.calendar-summary-cards.compact { margin-bottom:16px; }
.mini-stat { background:#f8fbff; border:1px solid #dbe4ff; border-radius:14px; padding:14px; }
.mini-stat-label { display:block; color:#6b7280; font-size:13px; margin-bottom:6px; }
.calendar-grid-wrap { overflow-x:auto; }
.calendar-weekdays, .calendar-week-row { display:grid; grid-template-columns:repeat(7, minmax(110px, 1fr)); gap:10px; min-width:820px; }
.calendar-weekdays { margin-bottom:10px; }
.calendar-weekdays div { background:#eef2ff; color:#334155; border-radius:10px; padding:10px; font-weight:700; text-align:center; }
.calendar-week-row { margin-bottom:10px; }
.calendar-day { background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:10px; min-height:130px; display:flex; flex-direction:column; gap:8px; }
.calendar-day.compact { min-height:88px; }
.calendar-day.is-outside { background:#f8fafc; color:#94a3b8; }
.calendar-day.is-today { border:2px solid #2563eb; box-shadow:0 0 0 3px rgba(37,99,235,0.08); }
.calendar-day.has-tasks { background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%); }
.calendar-day-top { display:flex; justify-content:space-between; align-items:center; }
.calendar-day-number { font-weight:700; font-size:18px; }
.day-badge { background:#2563eb; color:#fff; border-radius:999px; min-width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; padding:0 8px; }
.calendar-day-body { display:grid; gap:6px; }
.calendar-empty { color:#9ca3af; font-size:13px; margin:0; }
.calendar-task-item { background:#eef6ff; border-left:4px solid #2563eb; border-radius:10px; padding:8px; display:grid; gap:4px; }
.calendar-task-item span { font-size:12px; color:#4b5563; }
.calendar-task-item.single-line { padding:6px 8px; }
.calendar-task-item.single-line strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; font-size:12px; }
.calendar-more { font-size:12px; color:#1d4ed8; font-weight:700; }
.dashboard-calendar .calendar-weekdays, .dashboard-calendar .calendar-week-row { min-width:620px; }
@media (max-width: 900px) {
  .section-head-inline, .calendar-header-row, .month-toolbar { align-items:flex-start; }
}


.calendar-legend { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.legend-pill { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:8px 12px; font-size:13px; font-weight:700; border:1px solid transparent; }
.legend-pill.tarea { background:#dbeafe; color:#1d4ed8; border-color:#bfdbfe; }
.legend-pill.prueba { background:#fee2e2; color:#b91c1c; border-color:#fecaca; }
.legend-pill.actividad { background:#fef9c3; color:#a16207; border-color:#fde68a; }
.legend-pill.material { background:#fef3c7; color:#b45309; border-color:#fde68a; }
.calendar-task-item.tarea { background:#eef6ff; border-left:4px solid #2563eb; }
.calendar-task-item.prueba { background:#fff1f2; border-left:4px solid #dc2626; }
.calendar-task-item.actividad { background:#fffbeb; border-left:4px solid #eab308; }
.calendar-task-item.material { background:#fff7ed; border-left:4px solid #f59e0b; }


.button-secondary { background:#475569; color:#fff; }
.qr-panel { text-align:center; }

@media (max-width: 900px) {
  body { background:#edf2f7; }
  .topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 14px 16px;
    align-items: flex-start;
  }
  .brand { width: 100%; font-size: 18px; }
  .nav-links {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .nav-links a {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 10px 12px;
    text-align: center;
    font-size: 14px;
  }
  .container {
    margin: 16px auto;
    padding: 0 12px 28px;
  }
  .card, .panel, .login-card {
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  }
  .cards,
  .grid-2,
  .calendar-summary-cards,
  .form-grid {
    gap: 12px;
  }
  h1 { font-size: 24px; line-height: 1.15; }
  h2 { font-size: 20px; line-height: 1.2; }
  h3 { font-size: 17px; line-height: 1.25; }
  p, label, td, th, input, textarea, select, button { font-size: 16px; }
  input, textarea, select, button {
    min-height: 46px;
    border-radius: 12px;
  }
  textarea { min-height: 120px; }
  .hint { padding: 12px; }
  .inline-form {
    flex-direction: column;
    align-items: stretch;
  }
  .inline-form input, .inline-form button { width: 100%; }
  .actions { display:grid; grid-template-columns:1fr; gap:10px; }
  .button-link {
    display:block;
    width:100%;
    text-align:center;
    padding:12px 14px;
  }
  .calendar-grid-wrap {
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .calendar-weekdays, .calendar-week-row { gap: 8px; }
  .calendar-day { min-height: 120px; border-radius: 14px; }
  .calendar-day.compact { min-height: 84px; }
  .day-badge { min-width: 22px; height: 22px; }
  table, thead, tbody, th, td, tr { display: block; }
  thead { display: none; }
  tbody { display: grid; gap: 12px; }
  tr {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
  }
  td {
    border: 0;
    padding: 6px 0;
  }
  td:empty { display:none; }
  td form + form { margin-top: 8px; }
}

@media (max-width: 600px) {
  .nav-links { grid-template-columns: 1fr 1fr; }
  .cards { grid-template-columns: 1fr; }
  .calendar-summary-cards { grid-template-columns: 1fr; }
  .month-toolbar, .section-head-inline, .calendar-header-row {
    flex-direction: column;
    align-items: stretch;
  }
  .dashboard-calendar .calendar-weekdays,
  .dashboard-calendar .calendar-week-row,
  .calendar-weekdays,
  .calendar-week-row {
    min-width: 720px;
  }
  .qr-panel #whatsapp-qr {
    width: 100%;
    max-width: 260px;
  }
}


.quick-actions-panel {
  min-width: 0;
}
.quick-actions-panel p,
.quick-actions-panel .hint,
.quick-actions-panel .cell-pre,
.quick-actions-panel a,
.quick-actions-panel strong,
.quick-actions-panel div {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.quick-actions-grid form {
  margin: 0 !important;
  min-width: 0;
}
.quick-actions-grid button {
  height: 100%;
  min-height: 52px;
}
.last-email-preview {
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  line-height: 1.6;
  background: #f8fbff;
  border: 1px solid #dbe4ff;
  border-radius: 12px;
  padding: 12px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
@media (max-width: 900px) {
  .quick-actions-panel {
    overflow: hidden;
  }
  .quick-actions-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .quick-actions-panel .hint {
    padding: 12px;
  }
  .quick-actions-panel .cell-pre,
  .quick-actions-panel .last-email-preview {
    max-width: 100%;
  }
}


html, body {
  max-width: 100%;
  overflow-x: hidden;
}
.container,
.grid-2,
.cards,
.panel,
.card,
.section-head-inline,
.calendar-grid-wrap,
.quick-actions-grid,
.quick-actions-grid form {
  min-width: 0;
  max-width: 100%;
}
.quick-actions-grid button,
.button-link {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: center;
}
.quick-actions-panel > p,
.quick-actions-panel .hint,
.quick-actions-panel .last-email-preview,
.quick-actions-panel .cell-pre {
  max-width: 100%;
}
@media (max-width: 600px) {
  .quick-actions-panel {
    padding-left: 14px;
    padding-right: 14px;
  }
  .quick-actions-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .quick-actions-grid button {
    min-height: 54px;
    padding: 14px 12px;
    font-size: 15px;
    line-height: 1.3;
    border-radius: 14px;
  }
  .section-head-inline .button-link {
    width: 100%;
    padding: 12px 14px;
  }
  .quick-actions-panel p {
    line-height: 1.45;
  }
}