/* Parrilla MAW — sistema neutro tipo herramienta: denso, clicable, sin ruido. */

:root {
  color-scheme: light;
  --bg: #ffffff;
  --texto: #37352f;
  --tenue: #787774;
  --borde: #e9e9e7;
  --hover: #f1f1ef;
  --suave: #f7f7f5;
  --azul: #2383e2;
  --sel: #e8f2fc;
  /* tags de estado (fondo / texto) */
  --idea-bg: #e9e9e7;      --idea-tx: #57554f;
  --propuesta-bg: #fdecc8; --propuesta-tx: #6d4c12;
  --aprobado-bg: #dbeddb;  --aprobado-tx: #1f5c33;
  --publicado-bg: #d3e5ef; --publicado-tx: #1c4c6b;
}

:root[data-tema="oscuro"] {
  color-scheme: dark;
  --bg: #191919;
  --texto: #d4d2cc;
  --tenue: #9b9993;
  --borde: #2e2e2c;
  --hover: #242422;
  --suave: #202020;
  --azul: #529cca;
  --sel: #1d3247;
  --idea-bg: #3a3a38;      --idea-tx: #c8c6c1;
  --propuesta-bg: #4a3a1c; --propuesta-tx: #f0c869;
  --aprobado-bg: #1f3d2a;  --aprobado-tx: #7bc794;
  --publicado-bg: #1d3a4d; --publicado-tx: #74b4dc;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font: 400 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, select { font: inherit; color: inherit; }

/* ---------- barra superior ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--borde);
  font-size: 14px;
}
.logo { color: var(--tenue); }
.resumen { color: var(--tenue); font-size: 13px; margin-left: auto; }
#toggle-tema {
  background: none;
  border: none;
  border-radius: 5px;
  padding: 3px 8px;
  cursor: pointer;
  color: var(--tenue);
  font-size: 15px;
}
#toggle-tema:hover { background: var(--hover); color: var(--texto); }

/* ---------- toolbar ---------- */

.toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 8px 20px;
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}
.periodo { display: flex; align-items: center; gap: 2px; }
.periodo button {
  background: none;
  border: none;
  border-radius: 5px;
  padding: 4px 9px;
  cursor: pointer;
  color: var(--tenue);
}
.periodo button:hover { background: var(--hover); color: var(--texto); }
#titulo-periodo { margin-left: 8px; font-weight: 500; }

.filtros { display: flex; gap: 8px; margin-left: auto; }
.filtros select {
  border: 1px solid var(--borde);
  border-radius: 5px;
  background: var(--bg);
  padding: 4px 8px;
  cursor: pointer;
  max-width: 190px;
  color: var(--texto);
}
.filtros select:hover { background: var(--suave); }
.filtros select.activo { border-color: var(--azul); color: var(--azul); }
#filtros-limpiar {
  border: 1px solid var(--borde);
  border-radius: 5px;
  background: var(--bg);
  padding: 4px 9px;
  cursor: pointer;
  color: var(--tenue);
}
#filtros-limpiar:hover { background: var(--hover); color: var(--texto); }

/* ---------- contenido ---------- */

main { max-width: 1360px; margin: 0 auto; padding: 12px 20px 90px; }

/* dos columnas: listado del día a la izquierda, calendario a la derecha */
#vista-calendario {
  display: grid;
  grid-template-columns: minmax(300px, 420px) 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) {
  #vista-calendario { grid-template-columns: 1fr; }
  #grid-mes { order: -1; }   /* en pantallas chicas el calendario va arriba */
}

.grupo-dia { margin: 18px 0 4px; }
.grupo-dia h3 {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--tenue);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.grupo-dia h3 .conteo { font-weight: 400; font-size: 12px; }
.grupo-dia h3.hoy { color: var(--azul); }

/* fila de publicación */

.fila {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 5px;
  cursor: pointer;
  border-bottom: 1px solid var(--borde);
}
.fila:hover { background: var(--hover); }
.fila .flecha {
  width: 16px;
  color: var(--tenue);
  font-size: 11px;
  transition: transform 0.12s ease;
  flex-shrink: 0;
  text-align: center;
}
.fila.abierta .flecha { transform: rotate(90deg); }
.fila .tema {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fila.abierta .tema { white-space: normal; }
.fila .tipo { color: var(--tenue); font-size: 12px; flex-shrink: 0; }
.fila .cliente {
  font-size: 12px;
  color: var(--tenue);
  background: var(--suave);
  border: 1px solid var(--borde);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* tag de estado: select nativo disfrazado de pill */

select.estado {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  text-align: center;
}
select.estado.idea { background: var(--idea-bg); color: var(--idea-tx); }
select.estado.propuesta { background: var(--propuesta-bg); color: var(--propuesta-tx); }
select.estado.aprobado { background: var(--aprobado-bg); color: var(--aprobado-tx); }
select.estado.publicado { background: var(--publicado-bg); color: var(--publicado-tx); }

/* detalle expandido */

.detalle {
  padding: 10px 12px 12px 30px;
  border-bottom: 1px solid var(--borde);
  background: var(--suave);
  border-radius: 0 0 5px 5px;
}
.detalle .copy { white-space: pre-wrap; margin: 0; }
.detalle .hashtags { color: var(--azul); margin-top: 8px; word-break: break-word; }
.detalle .efemeride { color: var(--tenue); font-size: 12px; margin-bottom: 8px; }
.detalle .acciones { margin-top: 10px; }
.detalle .acciones button {
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: 5px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 13px;
}
.detalle .acciones button:hover { background: var(--hover); }
.detalle .sin-copy { color: var(--tenue); font-style: italic; margin: 0; }

/* ---------- mes ---------- */

#grid-mes {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--borde);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 14px;
}
.encabezado-dia {
  text-align: center;
  font-size: 12px;
  color: var(--tenue);
  padding: 6px 0;
  border-bottom: 1px solid var(--borde);
  background: var(--suave);
}
.celda {
  min-height: 96px;
  padding: 4px;
  border-bottom: 1px solid var(--borde);
  border-right: 1px solid var(--borde);
  font-size: 12px;
  color: var(--tenue);
  cursor: pointer;
  overflow: hidden;
}
.celda:nth-child(7n) { border-right: none; }
.celda:hover { background: var(--hover); }
.celda.fuera { background: var(--suave); cursor: default; }
.celda.sel { background: var(--sel); }
.celda .num { padding: 1px 4px; }
.celda.hoy .num {
  background: var(--azul);
  color: #fff;
  border-radius: 4px;
  font-weight: 500;
}
.evento {
  display: block;
  margin-top: 3px;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.evento.idea { background: var(--idea-bg); color: var(--idea-tx); }
.evento.propuesta { background: var(--propuesta-bg); color: var(--propuesta-tx); }
.evento.aprobado { background: var(--aprobado-bg); color: var(--aprobado-tx); }
.evento.publicado { background: var(--publicado-bg); color: var(--publicado-tx); }
.mas { display: block; margin-top: 2px; font-size: 11px; color: var(--tenue); }

#detalle-dia {
  position: sticky;
  top: 58px;   /* debajo de la toolbar fija */
}
#detalle-dia .fila { flex-wrap: wrap; }
#detalle-dia .fila .tema { white-space: normal; flex: 1 1 calc(100% - 26px); }
#detalle-dia .fila .tipo,
#detalle-dia .fila .cliente { margin-left: 26px; }
#detalle-dia .fila .cliente ~ .tipo,
#detalle-dia .fila .tipo ~ .cliente { margin-left: 0; }
#detalle-dia .fila select.estado { margin-left: auto; }
#detalle-dia .sin-dia { color: var(--tenue); font-size: 13px; margin-top: 18px; }

/* ---------- vacío y toast ---------- */

#vacio { text-align: center; margin-top: 60px; color: var(--tenue); }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--suave);
  border: 1px solid var(--borde);
  border-radius: 4px;
  padding: 1px 5px;
}

#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(70px);
  background: var(--texto);
  color: var(--bg);
  padding: 7px 16px;
  border-radius: 6px;
  font-size: 13px;
  transition: transform 0.2s ease;
  pointer-events: none;
}
#toast.visible { transform: translateX(-50%) translateY(0); }

:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  .fila .flecha, #toast { transition: none; }
}

/* ---------- móvil ---------- */

@media (max-width: 600px) {
  .toolbar { gap: 8px; padding: 8px 12px; }
  .filtros { margin-left: 0; width: 100%; }
  .filtros select { flex: 1; max-width: none; }
  main { padding: 8px 12px 90px; }
  .fila .tipo { display: none; }
  .fila .cliente { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
  .celda { min-height: 64px; }
  .evento { display: none; }        /* en móvil el mes muestra puntos */
  .celda .puntos { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 3px; }
  .punto { width: 6px; height: 6px; border-radius: 50%; }
  .punto.idea { background: #b5b3ac; }
  .punto.propuesta { background: #e2a63d; }
  .punto.aprobado { background: #4d9e66; }
  .punto.publicado { background: #5194c0; }
  .mas { display: none; }
  .detalle { padding-left: 12px; }
}
@media (min-width: 601px) {
  .celda .puntos { display: none; }
}