/* ============================================================
   Estilos  ·  App de tareas
   Fondo oscuro · marco dorado · paneles de casa · pergamino
   El color de casa entra por --acento y --panel.
   ============================================================ */

:root {
  /* Por defecto: madera y laton (quien aun no tiene casa).
     Cada casa sobreescribe estas variables desde comun.php */
  --acento:       #7A4E28;
  --acento-suave: #EFE2CE;
  --panel:        #2A1D12;   /* relleno de contadores y menu */
  --brillo:       #D9A85C;   /* reflejo del titulo y los puntos */
  --halo:         rgba(122,78,40,0.20);

  /* Veta de la madera. Las casas la apagan. */
  --grano: repeating-linear-gradient(96deg,
             rgba(0,0,0,0.16) 0 2px, rgba(255,255,255,0.022) 2px 7px,
             rgba(0,0,0,0.10) 7px 11px, rgba(255,255,255,0.012) 11px 19px);

  /* Sin casa, el titulo lleva las cuatro piedras a la vez. */
  --degradado: linear-gradient(100deg, #7FC9A6 2%, #E08494 34%, #7FA8D8 66%, #E0BE72 98%);
  --sello: conic-gradient(#1D5C42 0 25%, #8A2436 0 50%, #1E4A7A 0 75%, #8A6516 0);

  --fondo:        #080C0A;
  --fondo-alto:   #0D1512;

  --oro:          #A8862F;
  --oro-claro:    #C9A94E;
  --oro-tenue:    rgba(168, 134, 47, 0.32);

  --claro:        #D8E4DC;
  --claro-tenue:  #93A69C;

  --pergamino:    #EFE6CE;
  --pergamino-alto:#F6EFDC;
  --tinta:        #2A2418;
  --tinta-suave:  #6B6047;

  --vino:         #A6394A;
  --ambar:        #C08A2E;

  --radio: 4px;
  --titulo: 'Cinzel', Georgia, 'Times New Roman', serif;
  --texto: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(ellipse at 50% 0%, var(--halo), transparent 60%),
    var(--fondo);
  color: var(--claro);
  font: 17px/1.6 var(--texto);
  -webkit-text-size-adjust: 100%;
  min-height: 100vh;
}

a { color: var(--oro-claro); }

.contenedor { max-width: 860px; margin: 0 auto; padding: 0 20px 56px; }

/* ---------- Marco dorado ---------- */
.marco {
  position: fixed; inset: 9px;
  border: 1px solid var(--oro-tenue);
  pointer-events: none; z-index: 40;
}
.marco::before, .marco::after {
  content: ''; position: absolute; width: 34px; height: 34px;
  border-color: var(--oro); border-style: solid; opacity: 0.55;
}
.marco::before { top: 5px; left: 5px; border-width: 1px 0 0 1px; border-radius: 12px 0 0 0; }
.marco::after  { top: 5px; right: 5px; border-width: 1px 1px 0 0; border-radius: 0 12px 0 0; }

/* ---------- Menu ---------- */
.barra {
  background: var(--grano),
              linear-gradient(180deg, var(--panel), rgba(0,0,0,0.25)), var(--panel);
  border-bottom: 1px solid var(--oro-tenue);
  padding: 11px 0; margin-bottom: 26px;
}
.barra .contenedor {
  padding-bottom: 0; display: flex; align-items: center;
  gap: 18px; flex-wrap: wrap;
}
.barra .marca {
  font-family: var(--titulo); font-size: 15px;
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-right: auto; color: var(--oro-claro); text-decoration: none;
}
.barra a {
  color: var(--claro-tenue); text-decoration: none;
  font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase;
  font-family: var(--titulo);
}
.barra a:hover { color: var(--oro-claro); }

/* ---------- Encabezado ---------- */
.encabezado { margin-bottom: 22px; }

.casa-titulo {
  font-family: var(--titulo); font-size: 21px; font-weight: 500;
  letter-spacing: 0.1em; margin: 0 0 3px;
  background: var(--degradado);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--acento);
}
.rotulo {
  font-family: var(--titulo); font-size: 9.5px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--oro); margin: 0 0 6px;
}

h1 { font-size: 21px; font-weight: 400; margin: 0 0 4px; color: var(--claro); }
.sub {
  color: var(--claro-tenue); font-size: 13px; margin: 0 0 16px;
  font-family: var(--sans);
}

.barra-avance {
  height: 3px; background: rgba(168,134,47,0.18);
  margin-top: 9px; max-width: 300px; overflow: hidden;
}
.barra-avance div {
  height: 100%;
  background: linear-gradient(90deg, var(--oro), var(--oro-claro));
}

/* ---------- Contadores ---------- */
.resumen {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  background: var(--grano),
              linear-gradient(180deg, var(--panel), rgba(0,0,0,0.3)), var(--panel);
  border: 1px solid var(--oro-tenue);
  margin-bottom: 26px; overflow: hidden;
}
.contador {
  display: block; text-align: center; text-decoration: none;
  padding: 15px 5px; color: var(--claro-tenue);
  border-left: 1px solid rgba(168,134,47,0.16);
}
.contador:first-child { border-left: 0; }
.contador:hover { background: rgba(255,255,255,0.04); }
.contador .numero {
  display: block; font-family: var(--titulo); font-size: 25px;
  color: var(--claro); line-height: 1.15; font-variant-numeric: tabular-nums;
}
.contador .rotulo {
  display: block; font-family: var(--titulo); font-size: 9px;
  letter-spacing: 0.22em; text-transform: uppercase; margin-top: 5px;
}
.contador.activo { background: rgba(255,255,255,0.07); }
.contador.activo .numero { text-shadow: 0 0 14px var(--brillo); }

/* ---------- Titulos de seccion (tira de pergamino) ---------- */
h2 {
  font-family: var(--titulo); font-size: 11px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--tinta-suave); margin: 26px 0 10px;
  background: linear-gradient(180deg, var(--pergamino-alto), var(--pergamino));
  padding: 9px 16px; text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.45);
}

/* ---------- Tareas ---------- */
.tarea {
  display: flex; gap: 13px; align-items: flex-start;
  background: linear-gradient(180deg, var(--pergamino-alto), var(--pergamino));
  border-left: 3px solid #8A7E5E;
  color: var(--tinta);
  padding: 13px 16px; margin-bottom: 7px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.tarea.caducada   { border-left-color: var(--vino); }
.tarea.en_proceso { border-left-color: var(--ambar); }
.tarea.hecha      { border-left-color: var(--acento); opacity: 0.72; }
.tarea .cuerpo { flex: 1; min-width: 0; }
.tarea .titulo {
  display: block; font-size: 17px; color: var(--tinta); text-decoration: none;
}
.tarea .titulo:hover { text-decoration: underline; }
.tarea.hecha .titulo { text-decoration: line-through; color: var(--tinta-suave); }
.tarea .meta {
  font-size: 12px; color: var(--tinta-suave); margin-top: 3px;
  font-family: var(--sans);
}

/* ---------- Gestas ---------- */
.gesta { font-size: 14px; color: #5A4F35; margin-top: 6px; font-style: italic; }
.gesta.hecha { color: var(--acento); font-style: normal; font-family: var(--sans); font-size: 12px; }
.gesta.rara {
  display: inline-block; font-style: normal;
  background: #2A2010; color: var(--oro-claro);
  padding: 3px 11px; letter-spacing: 0.04em; font-size: 13px;
}

/* ---------- Cierre: frase y puntos ---------- */
.cierre {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 34px;
}
.frase {
  background: linear-gradient(160deg, var(--pergamino-alto), var(--pergamino));
  color: var(--tinta); padding: 26px 22px; text-align: center;
  font-style: italic; font-size: 17px; line-height: 1.5;
  box-shadow: 0 1px 5px rgba(0,0,0,0.45);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.sello {
  width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
  background: var(--sello);
  color: #EAF6F0; font-family: var(--titulo); font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}
.panel-puntos {
  border: 1px solid var(--oro-tenue);
  background: var(--grano),
              linear-gradient(180deg, var(--panel), rgba(0,0,0,0.4)), var(--panel);
  text-align: center; padding: 26px 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.panel-puntos .rotulo { margin: 0 0 6px; color: var(--claro-tenue); }
.panel-puntos .cifra {
  font-family: var(--titulo); font-size: 44px; line-height: 1;
  color: var(--brillo); text-shadow: 0 0 22px var(--brillo);
  font-variant-numeric: tabular-nums;
}

/* ---------- Bloques ---------- */
.tarjeta {
  background: linear-gradient(180deg, rgba(255,255,255,0.035), transparent);
  border: 1px solid var(--oro-tenue);
  padding: 22px; margin-bottom: 20px;
}
.tarjeta h1 { font-family: var(--titulo); font-size: 16px; letter-spacing: 0.1em;
              text-transform: uppercase; color: var(--oro-claro); margin-bottom: 6px; }

/* ---------- Propuesta de casa ---------- */
.propuesta {
  background: linear-gradient(160deg, var(--pergamino-alto), var(--pergamino));
  color: var(--tinta); padding: 15px 17px; margin-bottom: 22px;
  display: flex; gap: 13px; align-items: flex-start;
  box-shadow: 0 1px 5px rgba(0,0,0,0.45);
}
.propuesta .rombo { color: var(--vino); font-size: 18px; line-height: 1.3; }
.propuesta p { margin: 0 0 11px; font-size: 16px; }

/* ---------- Formularios ---------- */
label {
  display: block; font-size: 10px; margin-bottom: 6px;
  font-family: var(--titulo); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--oro);
}

input[type=text], input[type=email], input[type=password],
input[type=datetime-local], input[type=number], select, textarea {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--oro-tenue); border-radius: var(--radio);
  font: 15px var(--sans);
  background: var(--pergamino-alto); color: var(--tinta);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--oro); outline-offset: 1px;
}
textarea { min-height: 84px; resize: vertical; }
.campo { margin-bottom: 16px; }
.fila { display: flex; gap: 12px; flex-wrap: wrap; }
.fila > * { flex: 1 1 180px; }

button, .boton {
  display: inline-block; padding: 10px 18px;
  border: 1px solid var(--oro); border-radius: var(--radio);
  background: linear-gradient(180deg, var(--acento), rgba(0,0,0,0.35));
  color: #F0EAD8; cursor: pointer; text-decoration: none; text-align: center;
  font-family: var(--titulo); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
button:hover, .boton:hover { filter: brightness(1.2); }
.boton-suave {
  background: transparent; color: var(--claro-tenue); border-color: var(--oro-tenue);
}
.boton-suave:hover { background: rgba(255,255,255,0.06); filter: none; color: var(--claro); }
.boton-riesgo { background: transparent; color: var(--vino); border-color: rgba(166,57,74,0.5); }
.boton-riesgo:hover { background: rgba(166,57,74,0.12); filter: none; }
.boton-mini { padding: 6px 12px; font-size: 10px; }

/* Dentro del pergamino los botones se oscurecen para verse */
.tarea .boton-suave, .propuesta .boton-suave {
  color: var(--tinta-suave); border-color: #B5A57E;
}
.tarea .boton-suave:hover, .propuesta .boton-suave:hover {
  background: rgba(0,0,0,0.07); color: var(--tinta);
}

/* ---------- Casas ---------- */
.casas { display: flex; flex-wrap: wrap; gap: 9px; }
.casa {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--oro-tenue); border-radius: var(--radio);
  padding: 9px 15px; cursor: pointer; background: rgba(255,255,255,0.03);
  font-family: var(--texto); font-size: 16px; color: var(--claro);
  margin: 0; text-transform: none; letter-spacing: 0;
}
.casa:hover { border-color: var(--oro); }
.casa input { width: auto; margin: 0; }
.casa .piedra { width: 12px; height: 12px; transform: rotate(45deg); display: inline-block; }
.casa .piedra.cuatro {
  background: conic-gradient(#1D5C42 0 25%, #8A2436 0 50%, #1E4A7A 0 75%, #8A6516 0);
}

/* ---------- Casillas de personas ---------- */
.marcas { display: flex; flex-wrap: wrap; gap: 9px; }
.marca-persona {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--oro-tenue); border-radius: 999px;
  padding: 7px 14px; margin: 0; cursor: pointer;
  background: rgba(255,255,255,0.03); font-family: var(--texto);
  font-size: 16px; color: var(--claro);
  text-transform: none; letter-spacing: 0;
}
.marca-persona:hover { border-color: var(--oro); }
.marca-persona input { width: auto; margin: 0; }

/* ---------- Chips ---------- */
.chip {
  display: inline-block; font-size: 9px; font-family: var(--titulo);
  text-transform: uppercase; letter-spacing: 0.16em;
  padding: 3px 10px; border: 1px solid var(--oro-tenue); color: var(--oro-claro);
}
.chip.en_proceso { color: var(--ambar); }
.chip.hecha      { color: var(--brillo); }
.chip.caducada   { color: var(--vino); }

/* ---------- Avisos ---------- */
.aviso {
  background: linear-gradient(160deg, var(--pergamino-alto), var(--pergamino));
  color: var(--tinta); border-left: 3px solid var(--oro);
  padding: 12px 15px; margin-bottom: 20px; font-size: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.aviso.error { border-left-color: var(--vino); color: #6E2431; }

.vacio {
  text-align: center; padding: 38px 22px; color: var(--claro-tenue);
  border: 1px dashed var(--oro-tenue); font-size: 17px;
}

/* ---------- Entrada ---------- */
.entrada { max-width: 400px; margin: 10vh auto; padding: 0 20px; }
.entrada h1 {
  text-align: center; margin-bottom: 26px; font-family: var(--titulo);
  font-size: 26px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--oro-claro);
}

/* ---------- Tabla ---------- */
table { width: 100%; border-collapse: collapse; font-size: 16px; }
th, td { text-align: left; padding: 11px 8px; border-bottom: 1px solid var(--oro-tenue); }
th {
  font-size: 9.5px; font-family: var(--titulo); text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--oro); font-weight: 500;
}

.pie { text-align: center; font-size: 13px; color: var(--claro-tenue); margin-top: 34px; }
.en-linea { display: inline; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .contenedor { padding: 0 14px 48px; }
  .fila > * { flex: 1 1 100%; }
  .contador { padding: 12px 3px; }
  .contador .numero { font-size: 20px; }
  .contador .rotulo { font-size: 7.5px; letter-spacing: 0.12em; }
  .casa-titulo { font-size: 18px; }
  h1 { font-size: 18px; }
  .cierre { grid-template-columns: 1fr; }
  .panel-puntos .cifra { font-size: 38px; }
  .barra { gap: 12px; }
  .barra a { font-size: 11px; letter-spacing: 0.08em; }
}