:root { --primario:#8f9d68; --fondo:#f9f9f9; --borde:#ddd; --texto:#333; }
    body { font-family:'Segoe UI',sans-serif; background:var(--fondo); color:var(--texto); margin:0; padding:20px; line-height:1.6; }
    h1,h2,h3 { color:var(--primario); margin-bottom:10px; }
    select,button,input,textarea { margin:10px 0; padding:10px; width:100%; max-width:400px; border:1px solid var(--borde); border-radius:6px; font-size:16px; }

/* Colores para selects específicos */
#verdura { background-color: #a3c574; }
#proteina { background-color: #e3a78f; }
#hidrato { background-color: #e2bb5f; }
#completo { background-color: #b2ccdb; }

/* Puntos de color delante de cada alimento */
.bullet-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  position: relative;
  top: -1px; /* leve alineación vertical */
}
.bullet-verdura { background-color: #a3c574; }
.bullet-proteina { background-color: #e3a78f; }
.bullet-hidrato { background-color: #e2bb5f; }
.bullet-completo { background-color: #b2ccdb; }
    button { background:var(--primario); color:#fff; border:none; cursor:pointer; transition:background .3s; }
    button:hover { background:#0088cc; }
    #mensaje { margin:20px; font-weight:bold; }
    table { width:100%; max-width:800px; margin:30px auto 0; border-collapse:collapse; }
    th,td { border:1px solid var(--borde); padding:12px; text-align:center; }
    td:hover { background:#f0f0f0; }
    td.selected { border:2px solid var(--primario); background:#e6f7ff; }
    .menu-eliminar { display:inline-block; margin-top:5px; background:#bbb; color:#fff; font-size:11px; padding:3px 6px; border-radius:3px; cursor:pointer; }
    .top-buttons { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:30px; }
    .top-buttons button { padding:8px 12px; font-size:14px; width:auto; }
    @media (max-width:600px){
      table, thead, tbody, th, td, tr { display:block; }
      thead{ display:none; }
      tr{ margin-bottom:15px; background:#fff; border:1px solid var(--borde); border-radius:6px; padding:10px; }
      td{ text-align:left; border:none; border-bottom:1px solid var(--borde); position:relative; padding-left:50%; }
      td::before{ position:absolute; top:10px; left:10px; width:45%; padding-right:10px; white-space:nowrap; content:attr(data-label); font-weight:bold; color:var(--primario); }
      td:last-child{ border-bottom:none; }
    }
    .plato-saludable{ width:400px; max-width:100%; height:auto; }
    .mensaje-toast{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); min-width:280px; max-width:90%; padding:12px 18px; border-radius:8px; font-size:15px; font-weight:500; color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.2); display:none; z-index:1000; animation:fadein .3s ease, fadeout .3s ease 3.7s; }
    .mensaje-toast.exito{ background:#4CAF50; }
    .mensaje-toast.error{ background:#f44336; }
    @keyframes fadein { from{opacity:0; transform:translate(-50%,20px);} to{opacity:1; transform:translate(-50%,0);} }
    @keyframes fadeout { from{opacity:1;} to{opacity:0;} }

    /* Checkbox pegado al texto y con sombreadito */
.opciones-ensalada {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.opciones-ensalada .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;          /* separa solo 6px entre tilde y texto */
  margin: 0;
  padding: 6px 10px; /* “pill” */
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #f6f6f6;
  cursor: pointer;
  user-select: none;
}

.opciones-ensalada .chip input[type="checkbox"] {
  margin: 0;         /* quita márgenes por defecto del navegador */
  transform: translateY(0); /* evita desalineación vertical */
}
.opciones-ensalada {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.opciones-ensalada .chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #f9f9f9;
  cursor: pointer;
  font-size: 14px;
}

/* 👇 forzamos el checkbox a mostrarse igual en iOS */
.opciones-ensalada .chip input[type="checkbox"] {
  appearance: auto;       /* asegura que Safari no los oculte */
  -webkit-appearance: checkbox; /* compatibilidad Safari */
  width: 18px;
  height: 18px;
  margin: 0;
}

.opciones-coccion {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.opciones-coccion label {
  display: flex;
  align-items: center;
  gap: 4px;
}

.opciones-coccion input[type="radio"] {
  -webkit-appearance: radio; /* asegura que se vean normales en Safari */
  appearance: radio;
  width: 18px;
  height: 18px;
  margin: 0 6px 0 0; /* espacio a la derecha del circulito */
  flex-shrink: 0;    /* evita que se encoja y empuje el texto */
}


table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;   /* 👈 fuerza que todas las columnas se adapten */
  word-wrap: break-word; /* 👈 permite cortar palabras largas */
}

td {
  vertical-align: top;
  overflow-wrap: break-word; /* 👈 corte de palabras si no entran */
  white-space: normal;       /* 👈 permite salto de línea */
}




button {
  background: var(--primario); /* Verde base (#8f9d68) */
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  padding: 10px;
  transition: background .3s;
}

button:hover,
button:focus {
  background: #6f8632; /* un tono apenas más oscuro que el base */
  outline: none;       /* saca el borde azul de focus */
}

.verduras-paren {    /*aca se puede achicar la letra de adentro de los paerentesis*/
  font-size: 12px;
  color: #555;
}

h1 {
  font-family: 'Courgette', cursive;
  font-size: 3rem;
  text-align: center;
  color: var(--primario);
  margin-bottom: 15px;
}
h2 {
  font-size: 1rem;     /* más chico, igual al texto normal */
  font-weight: 500;    /* medio, para que se note pero no grite */
  text-align: center;  /* opcional si querés centrarlo */
  margin-bottom: 15px; /* separación abajo */
}


.btn-calendario-container {
  display: flex;
  flex-direction: column; /* uno debajo del otro */
  align-items: flex-start; /* los alinea a la izquierda */
  gap: 6px; /* espacio entre botones */
  margin: 5px 0 15px 0;
}

.btn-calendario {
  display: inline-block; /* ocupa solo el ancho del texto */
  width: auto;           /* asegura que no se estiren */
  background: var(--primario);
  color: #fff;
  padding: 6px 12px;     /* igual que botón flotante */
  font-size: 0.9rem;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: background 0.2s ease;
}


.btn-calendario {
  background: var(--primario);
  color: #fff;
  padding: 4px 8px;
  font-size: 0.75rem;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: background 0.2s ease;
}

.btn-calendario:hover {
  background: #5a6b3c; /* verde más oscuro al pasar el mouse */
}

/* FLOTANTE ya elegiste tu menu de hoy?*/
.btn-flotante {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9999;
}

#btnHoy {
  background: #bd8531;   /* naranja */
  color: #fff;
}

#btnHoy:hover {
  background: #704c16;   /* más oscuro al pasar el mouse */
}

/* Botón de Lista de Compras (debajo del botón hoy) */
#btnListaCompras {
  background: #a8b87a !important;  /* verde más claro */
  color: #fff;
  top: 70px !important;  /* debajo del botón "¿Ya tenés el menú de hoy?" */
}

#btnListaCompras:hover {
  background: #9aa86a !important;  /* más oscuro al pasar el mouse */
}

/* Botón de Lista de Compras */
#btnListaCompras {
  background: #a8b87a !important;  /* verde más claro */
  color: #fff;
  top: 70px !important;  /* debajo del botón "¿Ya tenés el menú de hoy?" */
}

#btnListaCompras:hover {
  background: #9aa86a !important;  /* más oscuro al pasar el mouse */
}

/* Modal para Lista de Compras */
.modal-lista-compras {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-contenido {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.modal-header {
  background: var(--primario);
  color: white;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  margin: 0;
  color: white;
}

.btn-cerrar {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.3s;
}

.btn-cerrar:hover {
  background: rgba(255, 255, 255, 0.2);
}

.modal-body {
  padding: 20px;
  max-height: 50vh;
  overflow-y: auto;
}

.modal-footer {
  padding: 20px;
  border-top: 1px solid #eee;
  text-align: center;
}

.btn-descargar {
  background: #a8b87a; /* tono verde del carrito */
  color: #fff;
  border: none;
  padding: 6px 12px; /* ~mitad */
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px; /* ~mitad */
  transition: background 0.3s;
}

.btn-descargar:hover {
  background: #9aa86a; /* hover similar */
}

/* Tachado sutil para elementos de lista marcados */
/* Tachado más visible para elementos de lista marcados */
.tachado .ingrediente-nombre {
  position: relative;
  color: #999; /* el texto se ve gris pero legible */
}

.tachado .ingrediente-nombre::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px; /* 👈 grosor de la línea, ajustá a 4px si querés más marcado */
  background-color: rgba(255,0,0,0.45); /* 👈 mismo color que tenías */
  transform: translateY(-50%);
  pointer-events: none;
}



/* Eliminamos botón propio y usamos el estilo existente .menu-eliminar del calendario */

/* Estilos para la lista de compras */
.lista-compras {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lista-compras li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lista-compras li:last-child {
  border-bottom: none;
}

.ingrediente-nombre {
  font-weight: 500;
}

.ingrediente-cantidad {
  color: #666;
  font-size: 14px;
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 12px;
}

@media (max-width: 600px) {
  .modal-contenido {
    width: 95%;
    margin: 10px;
  }
  
  .modal-header {
    padding: 15px;
  }
  
  .modal-body {
    padding: 15px;
  }
  
  .modal-footer {
    padding: 15px;
  }
}



/* Tutorial modal moderno */
.tutorial-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  animation: fadeIn 0.3s ease;
}

.tutorial-box {
  background: #fff;
  padding: 30px 24px;
  max-width: 420px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
  animation: slideUp 0.4s ease;
  position: relative;
}

/* Paso actual en top */
.tutorial-step-indicator {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primario);
  color: #fff;
  font-size: 0.9rem;
  padding: 6px 14px;
  border-radius: 20px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

.tutorial-buttons {
  margin-top: 25px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.tutorial-buttons button {
  flex: 1;
  background: var(--primario);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.tutorial-buttons button:hover {
  background: #6f8632;
  transform: translateY(-2px);
}

.tutorial-buttons button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}




/* boton agregar ensalada */
.btn-mini {
  font-size: 0.8rem;
  padding: 4px 8px;
  background: #8f9d68;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-mini:hover {
  background: #738254;
}

/* Configuración de celdas de tabla */
td {
  vertical-align: top;
  overflow-wrap: break-word; 
  white-space: normal;
  word-break: normal;     /* evita cortes arbitrarios dentro de palabras */
  hyphens: none;          /* sin guiones automáticos */
}







.btn-whatsapp-top {
  display: flex;
  justify-content: flex-start; /* alineado a la izquierda */
  margin: 10px 0; /* separacion de arriba */
}

.btn-whatsapp-top .btn-whatsapp {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6rem;
  padding: 5px 10px;
  background:  #20b155; /* verde WhatsApp */
}

.btn-whatsapp-top .btn-whatsapp:hover {
  background: #21b657;
}

.icono-whatsapp {
  width: 16px;
  height: 16px;
}



/* Configuración de celdas de tabla */
td {
  vertical-align: top;
  overflow-wrap: break-word; 
  white-space: normal;
  word-break: normal;     /* evita cortes arbitrarios dentro de palabras */
  hyphens: none;          /* sin guiones automáticos */
}







#loginBtn {
  display: block;
  margin: 80px auto 20px auto; /* lo baja y lo centra */
  padding: 12px 24px;
  font-size: 1.1rem;
  border: none;
  border-radius: 8px;
  background: #8f9d68;
  color: white;
  cursor: pointer;
  transition: background 0.3s;
}

#loginBtn:hover {
  background: #7b8a59;
}







/* === Botones de abajo minimalistas con ancho completo === */
.top-buttons,
.btn-calendario-container {
  display: flex;
  flex-direction: column;
  margin: 20px 0;
  gap: 10px;
}

.top-buttons button,
.top-buttons a.btn-calendario,
.btn-calendario-container a.btn-calendario {
  all: unset;
  display: block;
  text-align: center;
  width: 100%;                  
  box-sizing: border-box;
  padding: 12px;
  font-size: 0.95rem;
  font-weight: 400;
  color: #333;
  background: #f0f0f0;          /* gris base más visible */
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.top-buttons button:hover,
.top-buttons a.btn-calendario:hover,
.btn-calendario-container a.btn-calendario:hover {
  background: #e4e4e4;          
  border-color: #ccc;
  color: #000;
}

.top-buttons button:active,
.top-buttons a.btn-calendario:active,
.btn-calendario-container a.btn-calendario:active {
  background: #dcdcdc;
  transform: scale(0.97);
}


/* BOTON DE TACHAR EN LAS COSAS AGREGADAS DE LA LISTA DE COMPRAS*/
li {
  display: grid;
  grid-template-columns: 1fr auto; /* nombre a la izquierda, acciones a la derecha */
  align-items: center;
}

li .acciones {
  display: flex;
  gap: 6px;
}