/* Blog (0.28.0): the list, the editor and Ajustes Del Blog, after Mockups/blog-admin. Its own file so screens.css
   stays the daily screens'. */
#v-blog .link.back { align-self: flex-start; background: none; border: 0; padding: 0; color: #4A5A52; font-size: 13px; cursor: pointer; }
#v-blog .warnline { margin: 0; }

/* the list */
.bl-top { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.bl-top.solo { grid-template-columns: minmax(0, 1fr); }
.bl-top.solo .bl-cal { max-width: 420px; }
.bl-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; font-size: 12px; }
.bl-month .bl-dh { text-align: center; color: #8A978F; font-weight: 600; font-size: 10.5px; letter-spacing: .06em; padding: 4px 0; }
.bl-month .bl-dy { aspect-ratio: 1; max-height: 40px; border-radius: 7px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #4A5A52; border: 1px solid transparent; }
.bl-month .bl-dy.mu { visibility: hidden; }
.bl-month .bl-dy.td { border-color: var(--oro); font-weight: 700; color: var(--navy); }
.bl-month .bl-dy i, .bl-legend i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.bl-month .bl-dy i.pub, .bl-legend i.pub { background: #1E7A4A; }
.bl-month .bl-dy i.sch, .bl-legend i.sch { background: var(--oro); }
.bl-month .bl-dy i.sea, .bl-legend i.sea { background: #B5306B; }
.bl-month .bl-dy .dots { display: flex; gap: 2px; }
.bl-legend { display: flex; gap: 14px; font-size: 12px; color: #4A5A52; margin-top: 10px; }
.bl-legend i { margin-right: 5px; width: 8px; height: 8px; }

.bl-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bl-posts .empty { grid-column: 1 / -1; }
.post { background: #fff; border: 1px solid var(--border); border-radius: var(--corner); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; min-width: 0; }
.post:hover, .post:focus { box-shadow: 0 6px 18px rgba(20, 33, 27, .08); outline: none; }
.post .im { aspect-ratio: 16 / 9; background: var(--navy) center / cover no-repeat; position: relative; display: grid; place-items: center; }
.post .im .ini { font-family: "Cormorant Garamond", Georgia, serif; font-size: 64px; font-weight: 600; color: var(--oro); line-height: 1; }
.post .im .st { position: absolute; top: 10px; left: 10px; }
.post .im .st .pill { box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.post .im .by { position: absolute; top: 10px; right: 10px; background: rgba(255, 255, 255, .94); border-radius: 999px; padding: 3px 9px; font-size: 11.5px; font-weight: 600; color: var(--navy); display: flex; gap: 5px; align-items: center; }
.post .im .by img { width: 14px; height: 14px; }
.post .im .src { position: absolute; bottom: 10px; left: 10px; }
.post .bd { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.post .topic-l { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--oro-antiguo); font-weight: 600; }
.post h3 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 20px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.post p { margin: 0; font-size: 13px; color: #4A5A52; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post .ft { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; font-size: 12px; color: #8A978F; }
.post .ft .grow { flex: 1; }
.post .ft .vela { color: #4A5A52; font-weight: 500; }

/* the editor */
.ed { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.ed-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ed-card { padding: 18px 18px 0; }
.aside-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ed .aside-col { position: sticky; top: 0; }
.titlebox { width: 100%; border: 0; border-bottom: 1px solid var(--border); font-family: "Cormorant Garamond", Georgia, serif; font-size: 28px; font-weight: 600; padding: 6px 0 10px; background: none; color: var(--text); outline: none; }
.toolbar { display: flex; gap: 4px; padding: 8px 0; border-bottom: 1px solid #F0EEE6; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.toolbar button { border: 0; background: none; min-width: 30px; height: 30px; border-radius: 6px; color: #4A5A52; font-weight: 600; font-size: 13px; cursor: pointer; }
.toolbar button:hover { background: #F0EEE6; }
.toolbar .sep { width: 1px; height: 18px; background: var(--border); margin: 0 6px; }
.toolbar .grow { flex: 1; }
.ed .body { min-height: 360px; font-size: 15px; line-height: 1.65; outline: none; padding-bottom: 16px; overflow-wrap: anywhere; }
.ed .body h2, .ed .body h3 { font-family: "Cormorant Garamond", Georgia, serif; font-size: 22px; margin: 22px 0 8px; }
.ed .body p { margin: 0 0 12px; }
.ed .body ul, .ed .body ol { margin: 0 0 12px; padding-left: 22px; }
.ed .body a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--oro); }
.ai { background: linear-gradient(135deg, var(--navy) 0%, #144a32 100%); color: #fff; border-radius: var(--corner); padding: 14px 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ai .ic { width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, .12); display: grid; place-items: center; flex: none; }
.ai .ic img { width: 22px; height: 22px; }
.ai b { display: block; font-size: 13.5px; }
.ai .s { font-size: 12.5px; color: #C9D6CE; margin-top: 2px; }
.ai .grow { flex: 1 1 240px; }
.ai .sel { min-width: 180px; }
.seo { display: flex; flex-direction: column; gap: 10px; }
.f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.f > label { font-size: 12px; font-weight: 600; color: #4A5A52; display: flex; justify-content: space-between; gap: 8px; }
.f > label span { font-weight: 500; color: #8A978F; }
.f > label span.ok { color: #1E7A4A; }
.f .sel, .seo .input { width: 100%; box-sizing: border-box; }
.seo textarea { resize: vertical; min-height: 58px; font-family: inherit; }
.gprev { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: #fff; }
.gprev .u { font-size: 12px; color: #8A978F; }
.gprev .t { color: #1a0dab; font-size: 16px; margin: 2px 0; overflow-wrap: anywhere; }
.gprev .d { font-size: 12.5px; color: #4A5A52; line-height: 1.4; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tag { background: #E3EEE7; color: var(--navy); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; display: inline-flex; gap: 4px; align-items: center; }
.tag .x { border: 0; background: none; color: inherit; padding: 0; font-size: 14px; line-height: 1; cursor: pointer; }
input.tag.add { background: #fff; border: 1px dashed var(--border); color: #4A5A52; font-weight: 500; width: 110px; outline: none; }
.socs { display: flex; flex-direction: column; gap: 12px; }
.soc { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.soc .h { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #FCFBF7; border-bottom: 1px solid #F0EEE6; font-size: 12.5px; font-weight: 600; }
.soc .h .grow { flex: 1; }
.soc .tx { padding: 10px 12px; font-size: 13px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.soc.wa .h { color: #1E7A4A; } .soc.ig .h { color: #B5306B; }
.soc.wa { display: block; flex: none; min-height: 0; } /* app.css .wa is the WhatsApp screen's layout */
.ed .aside-col .cb > .sel { width: 100%; }
.bl-img { width: 100%; border-radius: 8px; display: block; margin-bottom: 8px; }
.pubbar { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--border); padding: 12px 18px; display: flex; align-items: center; gap: 10px; margin: 0 -18px; flex-wrap: wrap; }
.pubbar .ms { color: #4A5A52; font-size: 13px; }
.pubbar .grow { flex: 1; }
.pubbar a.btn { text-decoration: none; }

/* Ajustes Del Blog */
.bl-aj { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.bl-form .psec:first-child { border-top: 0; }
.bl-form .psec > .m { margin: -4px 0 12px; }
.bl-sw { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; }
.bl-sw .switch { border: 0; padding: 0; cursor: pointer; }
.lbl2 { font-size: 12.5px; font-weight: 600; color: #4A5A52; margin: 14px 0 6px; }
.freq { display: flex; gap: 8px; }
.freq button { flex: 1; border: 1px solid var(--border); background: #fff; border-radius: 8px; padding: 10px 12px; font-weight: 600; font-size: 13px; color: #4A5A52; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; cursor: pointer; text-align: left; }
.freq button small { font-weight: 500; color: #8A978F; font-size: 11.5px; }
.freq button.on { border-color: var(--oro); background: #FFFBEA; color: var(--navy); }
.bl-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.topics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.topic { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: 13px; background: #fff; cursor: pointer; }
.topic input { accent-color: var(--navy); width: 16px; height: 16px; margin: 0; }
.topic .n { font-weight: 600; flex: 1; }
.topic .c { font-size: 11.5px; color: #8A978F; white-space: nowrap; }
.topic.off { opacity: .6; }
.bl-add { display: flex; gap: 8px; margin-top: 10px; max-width: 420px; }
.bl-add .sel { flex: 1; }
.cap { display: flex; align-items: center; gap: 14px; min-height: 34px; }
.cap .meter { flex: 1; height: 8px; border-radius: 4px; background: #F0EEE6; overflow: hidden; }
.cap .meter i { display: block; height: 100%; background: var(--oro); }
.cap .v { font-size: 12.5px; color: #4A5A52; white-space: nowrap; }
.bl-2 + .m { margin: 10px 0 0; }
.season { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 14px; }
.season td { padding: 9px 0; border-bottom: 1px solid #F0EEE6; vertical-align: middle; }
.season tr:last-child td { border-bottom: 0; }
.season td.d { color: #8A978F; white-space: nowrap; width: 110px; font-size: 12.5px; }
.season td.n b { display: block; }
.season td.n span { font-size: 12px; color: #8A978F; }
.season td.r { text-align: right; white-space: nowrap; padding-left: 8px; }
.bl-how { margin: 0 0 14px; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.bl-guion { white-space: pre-wrap; font-family: inherit; font-size: 13px; line-height: 1.5; max-height: 60vh; overflow: auto; background: #FCFBF7; border: 1px solid var(--border); border-radius: 8px; padding: 12px; }

/* 0.29.0: the editor's Foto card and the season calendar's rows */
.bl-photos .cb { display: flex; flex-direction: column; gap: 8px; }
.bl-photos .imgbox { aspect-ratio: 3 / 2; border-radius: 8px; background: #F0EEE6; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.bl-photos .imgbox img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-photos .imgbox .cost { position: absolute; top: 8px; left: 8px; background: rgba(255, 255, 255, .92); border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 600; color: #4A5A52; }
.bl-photos .acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.bl-photos .warnline .link, .bl-photos .m .link { padding: 0; font-size: inherit; }
.bl-inners { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid #F0EEE6; padding-top: 10px; }
.bl-inner { display: flex; gap: 10px; align-items: flex-start; }
.bl-inner .th { width: 64px; height: 44px; border-radius: 6px; background: #F0EEE6; overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; color: #8A978F; font-weight: 600; }
.bl-inner .th img { width: 100%; height: 100%; object-fit: cover; }
.bl-inner .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.bl-inner .w { font-size: 12.5px; color: #4A5A52; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.bl-inner .w .r { margin-left: auto; }
.bl-inner .sel { width: 100%; }
.ed .body figure { margin: 12px 0; }
.ed .body figure img { width: 100%; border-radius: 6px; display: block; }
.ed .body figcaption { font-size: 12.5px; color: #8A978F; margin-top: 4px; }
.season tr.off td { opacity: .55; }
.season td.r .btn { margin-left: 6px; }
@media (max-width: 1100px) {
  .bl-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ed, .bl-aj, .bl-top { grid-template-columns: minmax(0, 1fr); }
  .ed .aside-col { position: static; }
}
@media (max-width: 640px) {
  .bl-posts, .topics, .bl-2 { grid-template-columns: minmax(0, 1fr); }
  .freq { flex-direction: column; }
  .titlebox { font-size: 24px; }
  .bl-top.solo .bl-cal { max-width: none; }
}

/* 0.30.0: Categorías Del Blog: one row per category, in the web's order */
.bl-catcard { max-width: 860px; width: 100%; }
.bl-cats { list-style: none; margin: 0; padding: 0; }
.bl-cats li { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.bl-cats li:first-child { border-top: 0; }
.bl-cats li.off { background: #FAF8F2; }
.bl-cats .n { width: 22px; text-align: center; font-weight: 600; color: #0B3522; }
.bl-cats .tx { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; flex: 1 1 240px; min-width: 0; }
.bl-cats .tx .mono { overflow-wrap: anywhere; }
.bl-cats .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.bl-hd { display: flex; align-items: center; gap: 6px; }
.bl-hd .sel { flex: 1 1 auto; min-width: 0; }
.bl-hd .sel[readonly] { background: #F4F2EC; }