/* Recetas de la comunidad (ver comunidad.js). Usa las variables
   de color que define cada guía de preparación en su :root. */
.com{max-width:480px;margin:44px auto 0;padding:0 20px}
.com [hidden]{display:none!important}
.com-title{font-family:'Poppins',sans-serif;font-weight:500;font-size:26px;line-height:1.15;color:var(--green-darker);margin-bottom:8px}
.com-sub{font-size:13px;font-weight:300;color:var(--muted);line-height:1.7;margin-bottom:18px}
.com-estado{font-size:13px;color:var(--muted);line-height:1.7;padding:22px 18px;text-align:center;background:var(--white);border:1px dashed var(--border);border-radius:16px}

.com-filtros{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:12px;scrollbar-width:none}
.com-filtros::-webkit-scrollbar{display:none}
.com-chip{flex-shrink:0;font-family:'Outfit',sans-serif;font-size:12px;font-weight:600;padding:7px 13px;border-radius:99px;border:1.5px solid var(--border);background:var(--white);color:var(--muted);cursor:pointer;transition:all .15s}
.com-chip span{font-weight:400;opacity:.7;margin-left:2px}
.com-chip.activo{background:var(--green-light-soft);border-color:var(--green-light);color:var(--green-darker)}

.com-lista{display:flex;flex-direction:column;gap:12px}
.com-card{background:var(--white);border:1px solid var(--border);border-radius:18px;padding:16px;box-shadow:0 4px 20px rgba(8,50,41,.03)}
.com-card-propia{border-style:dashed;border-color:var(--green-light)}
.com-card-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.com-avatar{width:36px;height:36px;border-radius:50%;background:var(--green-dark);color:var(--white);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px;flex-shrink:0}
.com-quien{flex:1;min-width:0}
.com-nombre{font-size:14px;font-weight:600;color:var(--green-darker);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.com-iglink{font-size:12px;color:var(--blue);font-weight:500}
.com-iglink:hover{text-decoration:underline}
.com-metodo{font-size:11px;font-weight:600;color:var(--green-dark);padding:4px 11px;background:var(--cream);border:1px solid var(--border);border-radius:99px;white-space:nowrap;flex-shrink:0}
.com-revision{font-size:11px;font-weight:600;color:#a9690f;background:#fcf3dd;border-radius:8px;padding:6px 10px;margin-bottom:12px}
.com-stats{display:grid;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.com-stats div{padding:10px 4px;text-align:center}
.com-stats div:not(:last-child){border-right:1px solid var(--border)}
.com-stats b{display:block;font-size:14px;font-weight:600;color:var(--text);line-height:1.2}
.com-stats span{display:block;font-size:9px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-top:2px}
.com-extra{font-size:12px;color:var(--muted);margin-top:10px}
.com-pasos{list-style:none;counter-reset:paso;margin-top:12px;display:flex;flex-direction:column;gap:6px}
.com-pasos li{counter-increment:paso;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text)}
.com-pasos li::before{content:counter(paso);width:22px;height:22px;border-radius:50%;border:1.5px solid var(--green-light);background:var(--green-light-soft);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:var(--green-darker);flex-shrink:0}
.com-coment{margin-top:12px;padding:11px 13px;border-radius:10px;background:var(--cream);border-left:2.5px solid var(--green-light);font-size:12.5px;line-height:1.7;color:var(--green-darker);white-space:pre-line}
.com-fecha{font-size:10px;color:var(--muted);letter-spacing:.06em;margin-top:10px;text-align:right}

.com-mas,.com-abrir,.com-otra{display:block;width:100%;margin-top:12px;font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;border-radius:99px;padding:12px 18px;cursor:pointer;transition:all .2s}
.com-mas{background:none;border:1.5px solid var(--border);color:var(--muted)}
.com-mas:hover{border-color:var(--green-dark);color:var(--green-dark)}
.com-abrir,.com-otra{background:var(--green-dark);border:none;color:var(--white);margin-top:16px}
.com-abrir:hover,.com-otra:hover{background:var(--green-darker)}

.com-listo{margin-top:16px;padding:18px;border-radius:16px;background:var(--green-light-soft);text-align:center;font-size:13px;color:var(--green-darker);line-height:1.6}
.com-listo-titulo{font-family:'Poppins',sans-serif;font-size:18px;font-weight:500;margin-bottom:4px}

.com-form{margin-top:16px;background:var(--white);border:1px solid var(--border);border-radius:18px;padding:18px 16px;display:flex;flex-direction:column;gap:14px;scroll-margin-top:80px}
.com-form-title{font-family:'Poppins',sans-serif;font-size:18px;font-weight:500;color:var(--green-darker)}
.com-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.com-row-3{grid-template-columns:repeat(3,1fr)}
.com-row-agua{grid-template-columns:2fr 1fr}
.com-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.com-field>span:first-child,.com-vform legend{font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.com-field em,.com-vform legend em{font-style:normal;font-weight:400;text-transform:none;letter-spacing:0;opacity:.8}
.com-form input,.com-form select,.com-form textarea{width:100%;font-family:'Outfit',sans-serif;font-size:15px;color:var(--text);background:var(--cream-soft);border:1px solid var(--border);border-radius:10px;padding:10px 11px;outline:none;transition:border-color .15s,background .15s;-webkit-appearance:none;appearance:none}
.com-form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a5a5a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:30px}
.com-form textarea{resize:vertical;min-height:76px;line-height:1.5}
.com-form input:focus,.com-form select:focus,.com-form textarea:focus{border-color:var(--green-light);background:var(--white)}
.com-form [aria-invalid="true"]{border-color:#d9534f}
.com-ig{display:flex;align-items:center;background:var(--cream-soft);border:1px solid var(--border);border-radius:10px;padding-left:10px}
.com-ig b{font-weight:500;color:var(--muted);font-size:15px}
.com-ig input{border:none!important;background:none!important;padding-left:3px}
.com-ig:focus-within{border-color:var(--green-light);background:var(--white)}
.com-ratio{font-size:12px;font-weight:600;color:var(--green-dark);margin-top:-6px;min-height:0}
.com-ratio:empty{display:none}

.com-vform{border:none;display:flex;flex-direction:column;gap:8px}
.com-vform legend{margin-bottom:4px}
.com-vayuda{font-size:12px;color:var(--muted);margin-top:-2px}
.com-vlista{display:flex;flex-direction:column;gap:8px}
.com-vfila{display:grid;grid-template-columns:22px 1fr auto 1fr 30px;align-items:center;gap:8px}
.com-vnum{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--green-light);background:var(--green-light-soft);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:var(--green-darker)}
.com-vunidad{font-size:13px;color:var(--muted)}
.com-vquitar{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:none;color:var(--muted);font-size:18px;line-height:1;cursor:pointer}
.com-vpie{display:flex;align-items:center;justify-content:space-between;gap:10px}
.com-vsumar{background:none;border:none;font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;color:var(--green-dark);cursor:pointer;padding:4px 0}
.com-vtotal{font-size:12px;color:var(--muted);margin-left:auto}

.com-trampa{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0}
.com-aviso{font-size:11px;color:var(--muted);line-height:1.6}
.com-error{font-size:12px;font-weight:600;color:#d9534f;line-height:1.5}
.com-wa{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#25D366;color:#fff;padding:11px 18px;border-radius:99px;font-size:13px;font-weight:600}
.com-acciones{display:flex;gap:10px}
.com-cancelar,.com-enviar{flex:1;font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;border-radius:99px;padding:12px 16px;cursor:pointer;transition:all .2s}
.com-cancelar{background:none;border:1.5px solid var(--border);color:var(--muted)}
.com-enviar{flex:2;background:var(--green-dark);border:none;color:var(--white)}
.com-enviar:hover{background:var(--green-darker)}
.com-enviar:disabled{opacity:.6;cursor:wait}

@media (max-width:380px){
  .com-row{grid-template-columns:1fr}
  .com-row-3{grid-template-columns:repeat(3,1fr)}
  .com-row-agua{grid-template-columns:2fr 1fr}
}