/* ====== VIGIVOLT (estilos base) ====== */
/* Tipografía Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap');

@font-face{
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 100 700;
  src: url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2");
  font-display: swap;
}

:root{
  --vigivolt: #D32F2F;         /* rojo corporativo */
  --ink: #1f2937;              /* texto */
  --muted: #6b7280;            /* texto secundario */
  --bg: #fafafa;               /* fondo general */
  --card: #ffffff;             /* tarjetas */
  --radius: 16px;
  --shadow-s: 0 2px 12px rgba(0,0,0,.06);
  --shadow-m: 0 8px 20px rgba(0,0,0,.08);
  --shadow-l: 0 12px 28px rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html,body{
  margin:0;
  font-family:'Montserrat', sans-serif;
  background:var(--bg);
  color:var(--ink);
}

/* ====== Header ====== */
header{
  background-color: var(--vigivolt);
  color:#fff;
  padding:10px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow: var(--shadow-s);
}
.back-button{background:none;border:none;color:#fff;font-size:20px;cursor:pointer;margin-right:10px}

/* ====== Tarjetas con sombra ====== */
.button{
  background: var(--card);
  border: 1px solid #ececec;
  border-radius: var(--radius);
  padding: 18px;
  margin: 12px 4px;
  cursor: pointer;
  text-align: left;
  box-shadow: var(--shadow-m);
  transition: transform .15s ease, box-shadow .15s ease, border .15s ease, background-color .15s ease;
}
.button:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-l);
  border-color: rgba(211,47,47,.6); /* acento vigivolt */
  background-color: #f7f7f7;
}

/* Producto */
img.device{width:100%;max-width:300px;display:block;margin:0 auto 20px auto;border-radius:12px;background:#fff}
.product-card{
  background: var(--card);
  border:1px solid #ececec;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  padding:16px;
}

/* Botones de acción */
.action-button{
  background-color: var(--vigivolt);
  color:#fff;
  padding:10px 14px;
  border:none;
  cursor:pointer;
  margin:5px 5px 5px 0;
  display:inline-block;
  border-radius:999px;
  box-shadow:0 3px 10px rgba(211,47,47,.30);
  font-weight:700;
}
.action-button:hover{ transform: translateY(-1px); box-shadow:0 6px 16px rgba(211,47,47,.35) }

/* Tabla */
table{width:100%;border-collapse:collapse;margin-top:10px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.07)}
td{border-bottom:1px solid #f0f0f0;padding:10px;font-size:14px}
tr:last-child td{border-bottom:0}

/* Modal */
#modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);justify-content:center;align-items:center;padding:16px}
#modal-content{background:#fff;padding:20px;border-radius:16px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.25)}
#modal-content button{margin:10px}

/* ====== Footer tipo ECO-DC (adaptado a Vigivolt) ====== */
.footer{
  max-width:1100px;
  margin: 24px auto;
  padding: .75rem 1rem;
  border-top: 1px solid #f3c7c7;        /* línea superior suave, tono rojizo */
  color: #333;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:#fff;
  border-radius:12px;
  box-shadow: var(--shadow-s);
}
.footerL h2{
  margin:0;
  font-size:1rem;
  color:#333;
}
.footerR ul{
  list-style:none;
  display:flex;
  align-items:center;
  gap:20px;
  padding:0;
  margin:0;
}
.footerR a{
  color: var(--vigivolt);
  text-decoration:none;
  font-weight:700;
}
.footerR a:hover{ text-decoration:underline }
.footer .material-symbols-outlined{
  vertical-align:middle;
  margin-right:6px;
  font-size:20px;
  color: var(--vigivolt);
}

/* Fuerza que la clase use la fuente de iconos, no Roboto */
.material-symbols-outlined{
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;         /* ajusta tamaño si quieres */
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;

  /* Ejes de variación del set */
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;

  color: var(--vigivolt);
  vertical-align: middle;
  margin-right: 6px;
}

/* Iconos universales (texto) */
.uicon{
  font-size: 20px;
  line-height: 1;
  color: var(--vigivolt);   /* tu rojo */
  vertical-align: middle;
  margin-right: 6px;
  user-select: none;
}


/* Responsive footer */
@media (max-width: 700px){
  .footer{flex-direction:column;align-items:flex-start}
  .footerR ul{flex-direction:column;align-items:flex-start;gap:10px}
}