/* Portal de la empresa: mismo lenguaje que el sitio de InvenTia (papel, tinta, esquinas rectas, sombra dura). */
:root { --tinta: #1b1814; --texto: #4a443c; --suave: #5f574d; --fondo: #f4efe5; --linea: #d9cfba; --coral: #b83c24; --acento: #e0563b; --ok: #2f7d5d; --mono: ui-monospace, Menlo, Consolas, monospace; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; min-height: 100vh; display: flex; flex-direction: column; }
a { color: inherit; } main { flex: 1; }
.salto { position: absolute; left: -999px; top: 0; background: #fff; padding: .6rem 1rem; z-index: 100; } .salto:focus { left: 0; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.barra { background: var(--tinta); border-bottom: 3px solid var(--acento); }
.barra-in { max-width: 62rem; margin: 0 auto; padding: .8rem 1.2rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: baseline; gap: .55rem; text-decoration: none; font: 700 1.35rem var(--serif); color: #f4efe5; }
.logo i { width: 18px; height: 18px; background: var(--acento); display: inline-block; align-self: center; }
.logo small { font: 600 .68rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #d9d2c4; }
.sesion { display: flex; align-items: center; gap: .8rem; color: #f4efe5; font-size: .88rem; } .sesion form { margin: 0; } .sesion button { background: transparent; color: #f4efe5; border-color: #f4efe5; padding: .3rem .7rem; }
.contenido { max-width: 62rem; margin: 0 auto; padding: 2rem 1.2rem 3rem; } .angosto { max-width: 38rem; }
.centro { display: grid; place-items: center; padding: 3rem 1.2rem; }
.hoja { width: min(100%, 30rem); background: #fff; border: 2px solid var(--tinta); box-shadow: 8px 8px 0 var(--linea); padding: 2rem; } .recibo { width: 100%; max-width: 34rem; }
h1 { font: 700 2rem/1.15 var(--serif); color: var(--tinta); margin: 0 0 1rem; letter-spacing: -.02em; }
h2 { font: 700 1.2rem var(--serif); color: var(--tinta); margin: 1.8rem 0 .7rem; }
.tarjeta h2, .alerta h2, .plan h2 { margin-top: 0; }
.titulo { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .4rem; } .titulo h1 { margin: 0; }
.migas { margin: 0 0 1rem; } .migas a { font-weight: 600; }
.formulario { display: grid; gap: .5rem; } label { font-weight: 700; color: var(--tinta); font-size: .9rem; }
input { font: inherit; padding: .6rem .75rem; border: 2px solid #8f8576; background: #fff; color: var(--tinta); width: 100%; }
button, .boton { font: 700 .92rem system-ui; padding: .6rem 1rem; border: 2px solid var(--tinta); background: #fff; color: var(--tinta); cursor: pointer; text-decoration: none; display: inline-block; text-align: center; }
button:hover, .boton:hover { box-shadow: 3px 3px 0 var(--tinta); transform: translate(-1px, -1px); }
.primario { background: var(--tinta); color: #f4efe5; } .peligro { color: var(--coral); border-color: var(--coral); }
.botones { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1rem; } .botones form { margin: 0; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; margin: 1.2rem 0; align-items: start; }
.tarjeta, .plan { background: #fff; border: 2px solid var(--tinta); padding: 1.2rem 1.3rem; box-shadow: 5px 5px 0 var(--linea); } .tarjeta p { margin: 0 0 .6rem; }
.grande { font: 700 1.7rem/1.1 var(--serif); color: var(--tinta); margin: 0 0 .5rem; } .grande small { font: 400 .85rem system-ui; color: var(--suave); }
.alerta { background: #fbeae7; border: 2px solid var(--coral); padding: 1.1rem 1.3rem; margin: 1rem 0; } .alerta.suave { background: #fbf1dc; border-color: #c9922e; } .alerta p { margin: 0 0 .8rem; }
.datos { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .4rem 1rem; margin: .6rem 0; } .datos dt { color: var(--suave); font-size: .9rem; } .datos dd { margin: 0; word-break: break-word; }
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.2rem; margin: 1rem 0; } .plan.actual { border-color: var(--ok); } .plan .boton { margin-top: .5rem; }
table { width: 100%; border-collapse: collapse; background: #fff; border: 2px solid var(--tinta); }
th { text-align: left; font: 700 .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); padding: .55rem .8rem; border-bottom: 2px solid var(--tinta); background: #faf6ec; }
td { padding: .65rem .8rem; border-bottom: 1px dashed var(--linea); vertical-align: top; } tr:last-child td { border-bottom: 0; } .der { text-align: right; } .mono { font-family: var(--mono); }
.ins { display: inline-block; font: 700 .7rem var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: .15rem .55rem; border: 1.5px solid currentColor; white-space: nowrap; } .ins-ok { color: var(--ok); } .ins-mal { color: var(--coral); } .ins-gris { color: var(--suave); }
.aviso { padding: .8rem 1rem; margin: 0 0 1rem; border-left: 4px solid; font-weight: 600; } .aviso.ok { background: #e3f3ea; border-color: var(--ok); color: #1f6a4c; } .aviso.mal { background: #fbeae7; border-color: var(--coral); color: #8a2a1a; }
.nota { color: var(--suave); font-size: .88rem; } small { color: var(--suave); } .vacio { padding: 1rem; background: #fff; border: 1px dashed var(--linea); color: var(--suave); }
.lista { padding-left: 1.2rem; } .lista li { margin: .3rem 0; }
.lista-empresas { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; } .lista-empresas a { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: #fff; border: 2px solid var(--tinta); padding: 1rem 1.2rem; text-decoration: none; box-shadow: 4px 4px 0 var(--linea); } .lista-empresas span { color: var(--suave); font-family: var(--mono); font-size: .85rem; }
.pie { max-width: 62rem; margin: 0 auto; padding: 1.4rem 1.2rem 2rem; color: var(--suave); font-size: .85rem; border-top: 1px dashed var(--linea); width: 100%; }
@media (max-width: 560px) { body { overflow-x: hidden; } th, td { padding: .5rem .5rem; } td:last-child a { font-size: .85rem; } .datos { grid-template-columns: 1fr; } th:nth-child(2), td:nth-child(2) { display: none; } .contenido { padding-top: 1.4rem; } }
@media print { .barra, .pie, .no-imprimir { display: none; } .hoja { box-shadow: none; } body { background: #fff; } }