/* ============================================================
   Coop16 — Página "Consumo de electrodomésticos" (propuesta)
   Extiende coop16-system.css, no lo reemplaza.
   ============================================================ */

.consumo-tag {
  display: inline-block;
  font: 700 .72rem 'Cuprum', system-ui;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c16-verde-oscuro);
  background: rgba(68,145,108,.12);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.consumo-intro {
  background: var(--c16-card);
  border: 1px solid var(--c16-line);
  border-radius: 10px;
  padding: 18px 22px;
  margin-bottom: 30px;
  box-shadow: 0 1px 3px rgba(10,89,36,.05);
}
.consumo-intro p { margin: 0 0 8px; font-size: .9rem; line-height: 1.6; }
.consumo-intro p:last-child { margin-bottom: 0; }
.consumo-intro strong { color: var(--c16-verde-oscuro); }

.consumo-section-title {
  font-size: 1.15rem;
  margin: 0 0 2px;
  display: flex; align-items: center; gap: 8px;
}
.consumo-section-sub {
  font-size: .82rem; color: var(--c16-sage); margin: 0 0 16px;
}

.consumo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 34px;
}
.consumo-card {
  background: var(--c16-card);
  border: 1px solid var(--c16-line);
  border-radius: 10px;
  padding: 18px 18px 16px;
  position: relative;
  box-shadow: 0 1px 3px rgba(10,89,36,.05);
}
.consumo-card .icon {
  font-size: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(32,178,191,.12);
  margin-bottom: 10px;
}
.consumo-card .rank {
  position: absolute; top: 14px; right: 16px;
  font: 700 .72rem 'Cuprum', system-ui;
  color: var(--c16-sage);
}
.consumo-card h3 {
  font-size: .98rem; margin: 0 0 6px;
  color: var(--c16-slate);
}
.consumo-badge {
  display: inline-block; font-size: .66rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; margin-bottom: 8px;
}
.consumo-badge.invierno { background: rgba(32,178,191,.15); color: #127680; }
.consumo-badge.todo-el-ano { background: rgba(68,145,108,.15); color: var(--c16-verde-oscuro); }
.consumo-badge.sorpresa { background: rgba(224,169,58,.18); color: #8a5d0f; }

.consumo-pending {
  margin-top: 8px;
  border: 1.5px dashed #e0a93a;
  background: #fff7e6;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: .78rem;
  color: #7a5410;
  display: flex; align-items: center; gap: 6px;
}
.consumo-pending::before { content: "⏳"; font-size: .8rem; }

.consumo-data {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--c16-line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.consumo-kwh {
  font: 700 .85rem 'Cuprum', system-ui;
  color: var(--c16-slate);
}
.consumo-kwh em, .consumo-cost em {
  font-style: normal;
  font-weight: 400;
  color: var(--c16-sage);
  font-size: .78em;
}
.consumo-cost {
  font: 700 .98rem 'Cuprum', system-ui;
  color: var(--c16-verde-oscuro);
}

.consumo-top {
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
  background: var(--c16-card);
  border: 1px solid var(--c16-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(10,89,36,.05);
}
.consumo-top li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  border-bottom: 1px solid #eef2f0;
  font-size: .92rem;
}
.consumo-top li:last-child { border-bottom: 0; }
.consumo-top .pos {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--c16-verde);
  color: #fff;
  font: 700 .82rem 'Cuprum', system-ui;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.consumo-top li:first-child .pos { background: var(--c16-verde-oscuro); }
.consumo-top .nombre { flex: 1; color: var(--c16-slate); font-weight: 600; }
.consumo-top .valor { font: 700 .95rem 'Cuprum', system-ui; color: var(--c16-turquesa); }

.consumo-fuente {
  font-size: .74rem;
  color: var(--c16-sage);
  line-height: 1.5;
  margin: -10px 0 26px;
}

.consumo-tabla {
  width: 100%;
  border-collapse: collapse;
  background: var(--c16-card);
  border: 1px solid var(--c16-line);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(10,89,36,.05);
}
.consumo-tabla thead th {
  text-align: left;
  padding: 10px 16px;
  background: #eef4f1;
  color: var(--c16-verde-oscuro);
  font: 700 .72rem 'Cuprum', system-ui;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--c16-line);
}
.consumo-tabla tbody td {
  padding: 9px 16px;
  border-bottom: 1px solid #eef2f0;
  font-size: .86rem;
  color: var(--c16-slate);
}
.consumo-tabla tbody tr:last-child td { border-bottom: 0; }
.consumo-tabla tbody td:nth-child(2) { color: var(--c16-sage); white-space: nowrap; }
.consumo-tabla tbody td:nth-child(3) { font-weight: 700; color: var(--c16-verde-oscuro); white-space: nowrap; }

.consumo-cta {
  background: var(--c16-verde-oscuro);
  color: #fff;
  border-radius: 12px;
  padding: 26px 28px;
  margin-bottom: 8px;
}
.consumo-cta h2 { color: #fff; font-size: 1.1rem; margin: 0 0 8px; }
.consumo-cta p { font-size: .88rem; line-height: 1.6; margin: 0; color: rgba(255,255,255,.9); max-width: 620px; }
.consumo-cta ol { margin: 12px 0 0; padding-left: 20px; font-size: .85rem; color: rgba(255,255,255,.95); }
.consumo-cta li { margin-bottom: 6px; }

/* -------- Formulario de subida / comentarios -------- */
.consumo-form-wrap {
  background: var(--c16-card);
  border: 1px solid var(--c16-line);
  border-radius: 12px;
  padding: 24px 28px 28px;
  margin-top: 30px;
}
.consumo-form-wrap h2 { font-size: 1.1rem; margin: 0 0 4px; }
.consumo-form-sub { font-size: .85rem; color: var(--c16-sage); margin: 0 0 18px; }

.consumo-field {
  display: block;
  margin-bottom: 16px;
}
.consumo-field span {
  display: block;
  font: 700 .78rem 'Cuprum', system-ui;
  color: var(--c16-verde-oscuro);
  margin-bottom: 6px;
}
.consumo-field input[type="file"],
.consumo-field textarea {
  width: 100%;
  border: 1px solid var(--c16-line);
  border-radius: 8px;
  padding: 10px 12px;
  font: 400 .88rem 'Open Sans', system-ui;
  color: var(--c16-slate);
  background: #fff;
}
.consumo-field textarea { resize: vertical; }

.consumo-submit {
  border: none;
  background: var(--c16-verde);
  color: #fff;
  font: 700 .88rem 'Cuprum', system-ui;
  padding: 10px 22px;
  border-radius: 8px;
  cursor: pointer;
}
.consumo-submit:hover { background: var(--c16-verde-oscuro); }
.consumo-submit:disabled { opacity: .6; cursor: default; }

#buzon-form-status {
  margin-left: 14px;
  font-size: .82rem;
  color: var(--c16-sage);
}
#buzon-form-status.err { color: #b23b3b; }