/* Panel de contenidos — CSS propio, sin frameworks. Móvil primero. */

:root {
  --bg: #f6f5f3;
  --card: #ffffff;
  --texto: #1f2328;
  --mut: #656d76;
  --borde: #e2e0db;
  --acento: #1F5F8B;
  --error-bg: #fdeceb;
  --error-tx: #8a1f11;
  --foco: #1a56db;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181c;
    --card: #1e2126;
    --texto: #e8eaed;
    --mut: #9aa0aa;
    --borde: #2c2f36;
    --acento: #6ea8fe;
    --error-bg: #3a1a17;
    --error-tx: #ffb4a8;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--texto);
  line-height: 1.5;
}

a { color: var(--acento); }

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

h1 { font-size: 1.4rem; margin: 0 0 .6rem; }
h2 { font-size: 1.05rem; margin: 1.2rem 0 .5rem; }

/* Cabecera */
.cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  padding: .7rem 1rem;
  background: var(--card);
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  z-index: 10;
}
.marca { font-weight: 700; text-decoration: none; color: var(--texto); font-size: 1.05rem; }
.cabecera-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  order: 3;
  width: 100%;
}
.cabecera-nav a { text-decoration: none; color: var(--mut); font-size: .92rem; padding: .2rem 0; }
.cabecera-nav a:hover, .cabecera-nav a:focus-visible { color: var(--acento); }
.cabecera-usuario {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .85rem;
  color: var(--mut);
}
.usuario-nombre { font-weight: 600; color: var(--texto); }
.form-salir { margin: 0; }
.form-salir button {
  background: none;
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: .3rem .7rem;
  color: var(--texto);
  cursor: pointer;
  font-size: .85rem;
}
.form-salir button:hover { border-color: var(--acento); color: var(--acento); }

@media (min-width: 640px) {
  .cabecera-nav { order: 0; width: auto; }
}

/* Banner Odoo caído */
.banner-aviso {
  background: #fff4ce;
  color: #5c4400;
  padding: .6rem 1rem;
  font-size: .9rem;
  text-align: center;
}
@media (prefers-color-scheme: dark) {
  .banner-aviso { background: #3a3013; color: #ffe28a; }
}

.contenido { max-width: 760px; margin: 0 auto; padding: 1.2rem 1rem 3rem; }

.pie {
  text-align: center;
  color: var(--mut);
  font-size: .78rem;
  padding: 1.5rem 1rem 2rem;
}

/* Login */
.login-caja {
  max-width: 380px;
  margin: 3rem auto;
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 1.6rem;
}
.login-sub { color: var(--mut); font-size: .9rem; margin-top: -.3rem; }
.form-login { display: flex; flex-direction: column; gap: .3rem; margin-top: 1rem; }
.form-login label { font-size: .85rem; color: var(--mut); margin-top: .5rem; }
.form-login input {
  padding: .6rem .7rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font-size: 1rem;
  background: var(--bg);
  color: var(--texto);
}
.form-login button {
  margin-top: 1.1rem;
  padding: .7rem;
  border: none;
  border-radius: 8px;
  background: var(--acento);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.form-login button:hover { filter: brightness(1.08); }

.aviso-error {
  background: var(--error-bg);
  color: var(--error-tx);
  padding: .6rem .8rem;
  border-radius: 8px;
  font-size: .9rem;
}

/* Estado vacío */
.estado-vacio {
  color: var(--mut);
  padding: 2rem 0;
  text-align: center;
  font-size: 1rem;
}

/* Chips */
.chip {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}
.chip-pendiente { background: #eef0f2; color: #4b5563; }
.chip-listo_validar { background: #fff3cd; color: #7a5b00; }
.chip-publicado { background: #d7f4e0; color: #146c2e; }
.chip-descartado { background: #f4d7d7; color: #8a1f1f; }
@media (prefers-color-scheme: dark) {
  .chip-pendiente { background: #2c2f36; color: #b7bec9; }
  .chip-listo_validar { background: #4a3c05; color: #ffd97a; }
  .chip-publicado { background: #123a24; color: #7ee3a4; }
  .chip-descartado { background: #4a1414; color: #ff9d9d; }
}

.chip-espacio {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  color: #fff;
  background: var(--color-espacio, var(--acento));
  white-space: nowrap;
}

/* Mi semana */
.bloque-espacio { margin-bottom: 1.6rem; }
.titulo-espacio {
  border-left: 5px solid var(--color-espacio, var(--acento));
  padding-left: .6rem;
}
.lista-piezas-semana { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.pieza-semana {
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: .8rem .9rem;
}
.pieza-semana.vencida { border-color: #c0392b; }
.pieza-semana-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: var(--texto);
}
.pieza-tipo { color: var(--mut); font-size: .8rem; }
.pieza-titulo { font-weight: 600; flex: 1 1 auto; }
.pieza-fechas { display: flex; gap: 1rem; color: var(--mut); font-size: .8rem; margin-top: .35rem; }
.pieza-toca { margin-top: .35rem; font-size: .85rem; color: var(--acento); font-weight: 600; }

/* Filtros */
.form-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: end;
  margin-bottom: 1.2rem;
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: .9rem;
}
.form-filtros label {
  display: flex;
  flex-direction: column;
  font-size: .8rem;
  color: var(--mut);
  gap: .25rem;
}
.form-filtros select {
  padding: .4rem .5rem;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: var(--bg);
  color: var(--texto);
}
.form-filtros button {
  padding: .5rem .9rem;
  border: none;
  border-radius: 6px;
  background: var(--acento);
  color: #fff;
  cursor: pointer;
  font-weight: 600;
}

/* Lista de piezas */
.lista-piezas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.fila-pieza { border: 1px solid var(--borde); border-radius: 10px; background: var(--card); }
.fila-pieza-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  padding: .7rem .9rem;
  text-decoration: none;
  color: var(--texto);
}
.pieza-fecha { margin-left: auto; color: var(--mut); font-size: .82rem; }

/* Ficha de pieza */
.ficha-pieza { background: var(--card); border: 1px solid var(--borde); border-radius: 12px; padding: 1.1rem 1.2rem 1.4rem; }
.ficha-cabecera { display: flex; gap: .5rem; margin-bottom: .6rem; }
.ficha-tipo { color: var(--mut); margin-top: -.4rem; }
.ficha-datos { display: grid; grid-template-columns: 1fr; gap: .4rem; margin: 1rem 0; }
.ficha-datos > div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--borde); padding-bottom: .3rem; }
.ficha-datos dt { color: var(--mut); font-size: .85rem; }
.ficha-datos dd { margin: 0; font-size: .9rem; text-align: right; word-break: break-word; }
.ficha-checklist { display: flex; gap: .6rem; margin: .8rem 0; flex-wrap: wrap; }
.check { padding: .25rem .6rem; border-radius: 999px; font-size: .8rem; background: #eef0f2; color: #4b5563; }
.check.ok { background: #d7f4e0; color: #146c2e; }
@media (prefers-color-scheme: dark) {
  .check { background: #2c2f36; color: #b7bec9; }
  .check.ok { background: #123a24; color: #7ee3a4; }
}
.ficha-contador { color: var(--mut); font-size: .8rem; }
.texto-pieza {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: .8rem;
}
.ficha-imagen img { max-width: 100%; border-radius: 8px; border: 1px solid var(--borde); }
.ficha-responsables ul { padding-left: 1.1rem; }

/* ==================== F1 ==================== */

/* Cabecera de página con acción a la derecha */
.cabecera-pagina {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .8rem;
}
.cabecera-pagina h1 { margin: 0; }
.enlace-calendario { font-size: .9rem; text-decoration: none; white-space: nowrap; }

/* Botones */
.boton-primario {
  display: inline-block;
  padding: .6rem 1rem;
  border: none;
  border-radius: 8px;
  background: var(--acento);
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.boton-primario:hover { filter: brightness(1.08); }
.boton-primario:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.boton-secundario {
  display: inline-block;
  padding: .55rem .95rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: none;
  color: var(--texto);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.boton-secundario:hover { border-color: var(--acento); color: var(--acento); }
.boton-secundario:disabled { opacity: .5; cursor: not-allowed; }

/* Vencidas en Mi semana */
.titulo-vencidas { border-left-color: #c0392b; color: #c0392b; }
.bloque-vencidas .pieza-semana { border-color: #c0392b; }
.chip-vencida { background: #f4d7d7; color: #8a1f1f; }
@media (prefers-color-scheme: dark) {
  .chip-vencida { background: #4a1414; color: #ff9d9d; }
}
.boton-accion {
  display: inline-block;
  margin-top: .45rem;
  font-size: .85rem;
  font-weight: 600;
  color: #fff;
  background: var(--acento);
  padding: .3rem .7rem;
  border-radius: 6px;
  text-decoration: none;
}

/* Avisos flash */
.aviso-ok {
  background: #d7f4e0;
  color: #146c2e;
  padding: .6rem .8rem;
  border-radius: 8px;
  font-size: .9rem;
  margin-bottom: .8rem;
}
@media (prefers-color-scheme: dark) {
  .aviso-ok { background: #123a24; color: #7ee3a4; }
}
.estado-vacio-inline { color: var(--mut); font-size: .9rem; }

/* Secciones de la ficha con formulario propio */
.ficha-seccion { margin: 1.4rem 0; padding-top: 1rem; border-top: 1px solid var(--borde); }
.ficha-seccion h2 { margin-top: 0; }
.form-seccion {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  max-width: 100%;
}
.form-seccion label {
  font-size: .85rem;
  color: var(--mut);
  margin-top: .6rem;
}
.form-seccion input[type="text"],
.form-seccion input[type="url"],
.form-seccion input[type="date"],
.form-seccion input[type="file"],
.form-seccion select,
.form-seccion textarea {
  width: 100%;
  max-width: 100%;
  padding: .55rem .65rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font-size: 1rem;
  background: var(--bg);
  color: var(--texto);
  font-family: inherit;
}
.form-seccion textarea { resize: vertical; }
.etiqueta-checkbox {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--texto) !important;
  font-size: .95rem !important;
}
.etiqueta-limite { color: var(--mut); font-weight: normal; }
.contador-texto { color: var(--mut); font-size: .8rem; margin: .3rem 0 0; }
.contador-texto.contador-excedido { color: #c0392b; font-weight: 600; }
.ayuda-form { color: var(--mut); font-size: .85rem; }
.form-seccion .boton-primario { margin-top: 1rem; align-self: flex-start; }
.form-linea { margin: .5rem 0 0; }

.ficha-imagen-preview { max-width: 100%; max-height: 340px; border-radius: 8px; border: 1px solid var(--borde); display: block; margin-bottom: .6rem; }

.ficha-acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.boton-publicar { background: #146c2e; }

/* Calendario */
.calendario-barra {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.calendario-nav { display: flex; align-items: center; gap: .8rem; font-weight: 600; }
.calendario-nav a { text-decoration: none; font-size: 1.1rem; padding: .1rem .5rem; }
.calendario-mes-actual { min-width: 9rem; text-align: center; text-transform: capitalize; }
.calendario-filtro { padding: 0; border: none; background: none; margin: 0; }

.calendario-grid {
  display: none;
  border: 1px solid var(--borde);
  border-radius: 10px;
  overflow: hidden;
}
.calendario-fila { display: grid; grid-template-columns: repeat(7, 1fr); }
.calendario-cabecera-dias { background: var(--card); font-size: .78rem; color: var(--mut); text-transform: uppercase; }
.calendario-nombre-dia { padding: .4rem; text-align: center; }
.calendario-celda {
  min-height: 88px;
  border-top: 1px solid var(--borde);
  border-left: 1px solid var(--borde);
  padding: .3rem;
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: .2rem;
  overflow: hidden;
}
.calendario-fila .calendario-celda:first-child { border-left: none; }
.calendario-numero-dia { font-size: .8rem; color: var(--mut); }
.calendario-celda.fuera-de-mes { background: var(--bg); opacity: .55; }
.calendario-celda.hoy { background: color-mix(in srgb, var(--acento) 12%, var(--card)); }
.calendario-celda.hoy .calendario-numero-dia { font-weight: 700; color: var(--acento); }
.calendario-chip {
  display: block;
  font-size: .72rem;
  padding: .1rem .35rem;
  border-radius: 5px;
  background: var(--color-espacio, var(--acento));
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendario-chip-evento { background: none; border: 1px dashed var(--color-espacio, var(--acento)); color: var(--texto); }

.calendario-lista { display: block; }
.calendario-lista-dia { border: 1px solid var(--borde); border-radius: 8px; padding: .6rem .8rem; margin-bottom: .5rem; background: var(--card); }
.calendario-lista-dia.hoy { border-color: var(--acento); }
.calendario-lista-dia h3 { margin: 0 0 .4rem; font-size: .95rem; text-transform: capitalize; }
.calendario-lista-dia ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.calendario-lista-dia a { display: flex; align-items: center; gap: .4rem; text-decoration: none; color: var(--texto); font-size: .9rem; }
.calendario-sin-piezas { color: var(--mut); font-size: .82rem; margin: 0; }

@media (min-width: 700px) {
  .calendario-grid { display: block; }
  .calendario-lista { display: none; }
}

/* ==================== F2 ==================== */

/* Enlace "cambiar contraseña" en la cabecera */
.enlace-cuenta { text-decoration: none; color: var(--mut); font-size: .85rem; white-space: nowrap; }
.enlace-cuenta:hover, .enlace-cuenta:focus-visible { color: var(--acento); }

/* Chips de estado de idea */
.chip-idea-abierta { background: #eef0f2; color: #4b5563; }
.chip-idea-convertida { background: #d7f4e0; color: #146c2e; }
.chip-idea-descartada { background: #f4d7d7; color: #8a1f1f; }
@media (prefers-color-scheme: dark) {
  .chip-idea-abierta { background: #2c2f36; color: #b7bec9; }
  .chip-idea-convertida { background: #123a24; color: #7ee3a4; }
  .chip-idea-descartada { background: #4a1414; color: #ff9d9d; }
}

/* Chip "genera pieza" en eventos */
.chip-evento-genera { background: none; border: 1px dashed var(--acento); color: var(--acento); }

/* "Listo para validar" en Mi semana */
.titulo-listo-validar { border-left-color: #146c2e; color: #146c2e; }

/* Chip de tipo "blog" diferenciado en la lista de piezas */
.pieza-tipo-blog { color: var(--acento); font-weight: 600; }

/* Contadores por espacio en /piezas */
.contadores-piezas {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-bottom: 1.1rem;
}
.contador-tarjeta {
  flex: 1 1 200px;
  background: var(--card);
  border: 1px solid var(--borde);
  border-left: 5px solid var(--color-espacio, var(--acento));
  border-radius: 10px;
  padding: .7rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.contador-espacio { font-weight: 700; font-size: .85rem; margin-bottom: .2rem; }
.contador-cifra { font-size: .85rem; color: var(--texto); }
.contador-cifra small { color: var(--mut); font-weight: normal; }

/* Página de ayuda */
.ayuda-guia h2 { margin-top: 1.4rem; }
.ayuda-guia ul { padding-left: 1.2rem; }
.ayuda-guia li { margin-bottom: .3rem; }