A client-side style override of the portal with a heavy material design influence. Customizable tokens.

securematerial.css

@-moz-document domain("secure.etecsa.net") {
/* ================================
   Secure Portal – Material 3 Redesign
   Minimalist, rounded, modern. AI generated base + heavy customization with a harmless amount of skeumorphism ;D
   ================================ */

/* ---- Color tokens (Material 3 inspired) ---- */
:root {
  --md-bg: #f5f7fb;
  --md-surface: #ffffff;
  --md-primary: #5f59b3;
  --md-primary-hover: #7f67be;
  --md-secondary: #625b71;
  --md-outline: #e0e0e0;
  --md-text: #333;
  --md-text-muted: #5f6368;
  --md-success: #1e8e3e;
  --md-radius-lg: 14px;
  --md-radius-md: 8px;
  --md-shadow-1: 1px 2px 3px -2px #10d;
  --md-shadow-2: 1px 2px 2px -2px #10d;
	--border-a: 2px solid #0003;
}

/* ---- Base reset ---- */
html, body {
  background: var(--md-bg) !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--md-text);
}

/* ---- Header ---- */
#header {
/*   background: transparent !important; */
  padding: 2px 1.5rem 2px 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
	height: fit-content;
	box-shadow: 0 0 3px 0 #10d;
}
#header>img#logo_nauta {
  height: auto;
	max-height: 80px;
	width:auto;
	max-width: 65%;
  aspect-ratio: initial;
  filter: saturate(0.9);
  position: static;
	border-radius: var(--md-radius-md)
}

#header>img#logo_etecsa{
	position: static;
	height: auto;
	max-height: 32px;
	width:auto;
  	filter: saturate(0.9) !important;
}
/* SPACER */
#header > div:nth-child(1){
	display: none;
}
/* ---- Main container ---- */
#contenedor {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 16px;
}

#int {
  width: 100% !important;
  max-width: 520px;
}

/* ---- Card ---- */
.blq {
  background: var(--md-surface);
  border-radius: var(--md-radius-lg);
  overflow: hidden;
  border: 2px solid var(--md-outline);
  margin-block-start: 24px;
}

/* ---- Card title ---- */
.blq .title {
  background: transparent !important;
/*   padding: 28px 32px 12px; */
  font-size: 1.25rem;
	color: #3202;
	font-weight:black;
	text-align: center;
	font-family: monospace;
	line-height: 1;
	padding-top:3rem;
	padding-bottom:2rem;
	
}
.blq .title::before {
	content:"👩‍🦱";
	font-size: 4em;
	display: block;
	color:#fff;
	transition: all .5s;
/* 	text-shadow: 6px 8px 12px #0033; */
}
.blq .title:hover::before{
	transform: rotate(-6deg) scale(1.05) translateY(3px);
	text-shadow: 3px 6px 12px #0043;
} 

/* ---- Inner content ---- */
.blq_int {
  padding: 0 32px 32px;
}

#cont {
  width: 100% !important;
  background: transparent !important;
}

/* ---- Connection status ---- */
#cont img[src*="conected"] {
  width: 32px;
  height: 32px;
}

#cont span {
  font-size: 1rem;
  color: var(--md-success);
}

/* ---- Table ---- */
#logout {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}

#logout tr {
  border-bottom: 1px solid var(--md-outline);
}

#logout tr:last-child {
  border-bottom: none;
}

#logout td {
  padding: 12px 0;
  font-size: 0.95rem;
}

#logout .key {
  color: var(--md-text-muted);
  font-weight: 500;
  width: 50%;
}

/* ---- Time values emphasis ---- */
#onlineTime,
#availableTime {
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* ---- Buttons (Material 3 style) ---- */
.btn {
  appearance: none;
  border:none;
  border-bottom:var(--border-a);
  border-radius: var(--md-radius-md);
  padding: 12px 20px;
  font-size: 0.95rem;
  font-weight: 500;
  margin: 8px 6px;
  cursor: pointer;
  background: var(--md-primary);
  color: #fff;
  box-shadow: var(--md-shadow-1);
  transition: 
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
  background: var(--md-primary-hover);
  box-shadow: var(--md-shadow-2);
}

.btn:active {
  transform: scale(0.99) translateY(0);
}

/* ---- Secondary button (Actualizar) ---- */
input[name="refrescar"] {
  background: transparent;
	color: var(--md-primary);
	border:var(--border-a);
}

input[name="refrescar"]:hover {
  background: rgba(103, 80, 164, 0.08);
}

/* ---- Logout button emphasis ---- */
input[name="logout"] {
  background: #b3261e;
}

input[name="logout"]:hover {
  background: #c9382c;
}

/* ---- Bottom image ---- */
#cont img[src*="popup"] {
  display: none; /* remove clutter */
}

/* ---- Small screens ---- */
@media (max-width: 480px) {
  .blq_int {
    padding: 0 20px 24px;
  }

  .blq .title {
    padding: 24px 20px 8px;
  }

  .btn {
    width: 100%;
    margin: 8px 0;
  }
}


/* CEPC CUSTOM */

#contenedor{
	background-image: none;
}
#header{
	border-bottom: var(--border-a)
}
a{
	text-decoration: none;
	color:var(--md-primary);
}
a:hover{
	text-decoration: underline;
}

/* CANCEL LOGIN BUTTON , AYUDA BUTTON*/
input.btn:nth-child(19),input.btn:nth-child(20){
	background:none;
	color: var(--md-primary);
	box-shadow: none;
	border: 2px solid var(--md-primary) !important;
	padding:10px 8px;
}
input.btn:nth-child(20){
	margin-top:4rem;	
	border: none !important;
	font-weight: normal;
}

#username,#password{
	border-radius: var(--md-radius-md);
	padding: 10px 12px;
	border:2px solid var(--md-primary);
	width: auto;

}
.form {
	position: relative;
	margin:auto;
}
#formulario{
	margin: auto;
	display: flex;
	flex-direction: column;
	
}

.form label[for=nombre],.form label[for=uri]{
	color:var(--md-primary);
	font-family: monospace;
	font-weight: normal !important;
	transform: translate(8px,10px);
	background: var(--md-surface);
	width: fit-content;
	padding: 1px 4px;
/* 	float: initial !important; */
	margin: 0;
/* 	display: inline-block; */
	border-radius: var(--md-radius-md)
}

/* LANGUAGE SELECTION */
#es_ESsel, #en_USsel{
	padding: 0 !important;
	box-shadow: var(--md-shadow-1)
}
#es_ESsel.sel>a, #en_USsel.sel>a{
	pointer-events: none;
	background-color: var(--md-primary) !important;
	
}
#es_ESsel>a, #en_USsel>a{
/* 	background-color: var(--md-primary) !important; */
	border-bottom:var(--border-a);
	transition:all .15s;
	padding: 8px;
	display: block;
	border-radius: 0 0 var(--md-radius-md) var(--md-radius-md);
}
#es_ESsel:hover:not(.sel)>a, #en_USsel:hover:not(.sel)>a{
	padding-top:12px; 
	background: var(--md-primary-hover);
	box-shadow: var(--md-shadow-2)
}
#es_ESsel:active:not(.sel)>a, #en_USsel:active:not(.sel)>a{
	padding-top:16px; 
}
/* links */
.vnc{
/* 	margin-block-start: 64px; */
}

/* COVID APK dowload old link */
.blq_int > a:nth-child(2){
	display:none
}

#banner_promos{
	background: var(--md-surface);
	padding: 1.5rem 0 1rem 0;
	border-top: 2px solid var(--md-outline)
}

#promo{
	height: 32px !important;
	border: 1px solid var(--md-outline);
	padding: 6px 8px;
	border-radius: 10px !important;
	border-bottom-width: 4px; 
}


/* CONNECTED CARD */
#logout > tbody:nth-child(1) > tr > td:nth-child(1){
	display: none;
}

/* USER ACCOUNT */
#logout > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(2){
	font-family: monospace;
	font-weight: 700;
	color: var(--md-text-muted)
}

/* TIME */
#logout > tbody:nth-child(1) > tr > td:nth-child(2){
	text-align: center;
}
#logout > tbody:nth-child(1) > tr{
	border:none;
}
#cont > div:nth-child(1){
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ONLINE TIME */
#onlineTime{
	font-family: monospace;
	font-size: 5rem !important;
	color: var(--md-text);
}
#availableTime{
	color:var(--md-text);
}

/* MESSAGE */
#cont > div:nth-child(1) > div:nth-child(1){
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}
#cont > div:nth-child(1) > div:nth-child(1) > span:nth-child(2){
	padding: 0 !important;
}

/* TIME TABLE */
#logout{
margin: auto;
	width:auto;
}
}